Build Smart QR Codes: Dynamic URLs, Custom Colours, and Embed in PDFs & iFrames

Problem Learning:

We have implemented a dynamic QR code generation system for client-specific travel offers. This system ensures each offer is linked to a unique QR code that can be easily scanned to access the offer’s detail page via an iframe.

• Dynamic QR Code Generation: Each time a new offer is created, a corresponding QR code is automatically generated using the QR Code library in PHP.
• URL Management (Short & Long URLs): The QR code can embed either a long URL or a shortened version. For improved user experience and performance, long URLs are converted to short URLs before embedding in the QR code.
• Dynamic Colour Customisation: In our project, we implemented dynamic colour functionality that allows different users to generate QR codes with custom colour combinations. The system adapts the QR code’s design based on the user-selected colours while ensuring optimal contrast and readability.
• PDF & Image Output: The QR code is available for download and can also be rendered in PDF format, making it suitable for use in marketing materials such as brochures, print ads, and digital campaigns.
• Iframe Integration: Scanning the QR code opens the offer detail page directly in an embedded iframe, streamlining access for end users.
• Colour Conversion Logic: We use HEX-to-RGB conversion and HSL lightness checks to dynamically set the background colour for maximum readability.
• File Output: Generated QR codes are saved as PNG images and optionally exported in PDF format.
• Reusable Function: A centralised QRCodeGen() function handles QR code creation, simplifying integration into different modules across the platform.

Overcoming Challenges:

• Dynamic QR Code Generation:
  One of the initial challenges was ensuring that each offer automatically generates a unique QR code that can adapt to various use cases, such as embedding in an iframe, downloading as an image, or exporting as a PDF. We addressed this by building a flexible and reusable function that handles all dynamic inputs and outputs.
• URL Handling (Short vs Long):
  Managing both long and short URLs was critical for improving scan speed and avoiding harsh QR designs. We implemented a conversion layer that ensures long offer URLs are shortened before being embedded in the QR code, improving readability and scan performance.
• Colour Customisation with Readability:
  Allowing users to define their own QR code colour presented a potential issue with scan reliability. To solve this, we implemented a HEX-to-RGB and HSL-based validation system that automatically adjusts the background colour (light or dark) based on the brightness of the selected foreground colour, ensuring high contrast and proper QR code readability.
• Seamless Iframe Redirection: Another challenge was making sure the scanned QR code redirects users to the correct iframe-based offer detail page without breaking the client website’s structure. This was resolved through strict URL formatting and dynamic generation of valid iframe links.

How We Solve the Problem:

• Automated QR Code Generation: We implemented a dynamic QR code generation system that automatically creates a unique QR code every time a new travel offer is added, ensuring seamless integration and zero manual effort.
• Short URL Integration: To enhance performance and keep the QR design clean, we integrated URL shortening. The system detects long URLs and converts them into short URLs before generating the QR code, ensuring quick scanning and cleaner aesthetics.
• Dynamic Colour Handling: developed a colour-handling mechanism that converts HEX values to RGB and evaluates lightness using HSL. This ensures that user-selected colours maintain high readability, and the background is adjusted accordingly for contrast.
• PDF & Image Download Support: Each QR code can be downloaded as a PNG image or exported into a PDF file.
• Iframe Redirection for Offer Pages: When scanned, the QR code redirects the user to an iframe-based detailed offer page.

QR Code Implementation Example:

Preview:

Scalability and Performance Best Practices

• Optimised QR Code Generation: The QR code generation logic is modular and lightweight, ensuring that QR codes are created efficiently without impacting server performance.
• URL Shortening for Speed: Using short URLs within QR codes reduces the size and complexity of the QR pattern, making them faster to scan and improving reliability, especially on low-end devices or slow connections.
• Efficient File Handling: QR codes are stored as PNG images and optionally as PDFs. Files are saved in optimised formats with caching headers, reducing load times and server overhead.
• Dynamic Colour Processing: Colour logic (HEX to RGB and HSL validation) is processed only once per QR generation.
• Reusable Architecture: The QR code generation is designed as a centralised function, making it easily reusable across different modules, helping scale the feature without code duplication.