Modifying and Branding the QR Code Generator

This pages describes how the QR code generator page can be branded by changing the title, adding a banner and a background image

There is a simple to use form for customizing the QR code generator and details of the various settings can be found below.

Adding a CC email address

An optional CC email address can be added to the QR code generator by adding a cc parameter to the URL e.g. https://contactlessbooth.com?cc

Changing the Title

The title can be changed by adding a title parameter to the URL e.g. https://contactlessbooth.com?title=Title.
The title can be hidden by setting it to a single space character: https://contactlessbooth.com?title=+
The default title will also be hidden if you add a banner to the page.
Please note that the title must be URL encoded if it contains spaces, ?, % or & characters. To URL encode a space replace it with +
e.g. to change the title to "My Title" use https://contactlessbooth.com?title=My+Title

List of codes for special characters in titles:
+ for spaces e.g. use https://contactlessbooth.com?title=Fun+Photo+Booth for "Fun Photo Booth"
%25 for % e.g. use https://contactlessbooth.com?title=100%25+Fun! for "100% Fun!"
%26 for & e.g. use https://contactlessbooth.com?title=John+%26+Mary's+Wedding for "John & Mary's Wedding"
%2B for + e.g. use https://contactlessbooth.com?title=Two%2BTwo for "Two+Two"
%3F for ? e.g. use https://contactlessbooth.com?title=Want+to+play%3f for "Want to play?"

Adding a banner

A banner image can be added to the top of the page by adding a banner parameter to the URL with the URL of the banner image. The banner image can be any image type that can be embedded in the HTML <img> tag e.g. a JPEG, a PNG or an animated GIF.
e.g. https://contactlessbooth.com?banner=https://contactlessbooth.com/banner.png.
Strictly speaking the banner URL should be URL encoded but most URLs should work without being URL encoded unless they contain & or % characters.

Example banners
A selection of different banner images you can use to customize the the appearance of the QR code generator page are available on this page.

Adding a background image

A background image can be added to the page by adding a bg parameter to the URL with the URL of the background image. The banner image can be a JPEG or a PNG image, Please avoid images that are dark which could make it difficult to read the text on the page or use the dark option described in the next section.
e.g. https://contactlessbooth.com?bg=https://contactlessbooth.com/background.jpg.
Strictly speaking the background image URL should be URL encoded but most URLs should work without being URL encoded unless they contain & or % characters.

Light or dark background

The page can be displayed with a white background and black text by adding a light parameter or with white text on a black background by adding a dark parameter.
e.g. white background, black text: https://contactlessbooth.com?light
black background, white text: https://contactlessbooth.com?dark

Combining options

Multiple options can be used together by adding multiple parameters to the URL separated by ampersand characters.
e.g. add a CC field and a title and banner https://contactlessbooth.com?cc&title=My+Photo+Booth&banner=https://contactlessbooth.com/banner.png.

Using <iframe> to embed the generator in your own web page

You can use the HTML <iframe> tag to embed the QR code generator into a page on your own website
e.g. <iframe src="https://contactlessbooth.com?title=iframe+Example" frameborder="0" width="100%" height="400"></iframe>