QR Codes

A QR code is the square of dots a phone camera can read. Point a phone at it, and the phone opens a web page, joins a Wi-Fi network, or saves a contact.

This screen makes them. You pick what the code holds and how it looks. Then you download it for a flyer, a sign or a truck door. Nothing shows on your website.

Only an Admin user can use this screen.

Go to Plugins, open the Marketing group, and click QR Codes.

The screen

The screen has three parts, side by side.

• On the left: the New QR code button, and your saved codes.
• In the middle: the boxes that build the code. Name, then Content, Style, Logo and Frame.
• On the right: a live picture of the code, the download buttons and the save button.

In a narrow window, the three parts stack instead, one above the other.

The picture changes as you type. What you see is what you get.

Make a code for your website

Northwind Heating is the made-up business in these examples.

1. Click New QR code.
2. Type a Name, such as “Truck door”. It names the code and its files.
3. Leave Type on Website URL.
4. Type your address in URL, such as northwind-heating.example. The https:// is added for you if you leave it off.
5. Hold your phone up to the picture on the right. Your website should open.
6. Click Save to media library.

You see Saved. Your code is on the list on the left, and its files are in your Media library.

Want it to go to one page instead? Type the full address of that page, such as northwind-heating.example/services.

Make a Wi-Fi code for your waiting room

Guests scan it and join your Wi-Fi without typing the password.

1. Click New QR code, and name it “Guest Wi-Fi”.
2. Set Type to Wi-Fi.
3. Type the network’s name in Network name (SSID), such as Northwind-Guest. It must match exactly, capitals and all.
4. Type the Password.
5. Leave Security on WPA/WPA2/WPA3, unless you know your network is different.
6. Check Hidden network only if your network does not show up in a phone’s list.
7. Test it with your phone. It should offer to join.
8. Click Save to media library.

Make a contact card

A contact card code puts your name and number straight into a phone’s contacts.

1. Click New QR code, and name it “Business card”.
2. Set Type to Contact card.
3. Fill in what you want people to have: First name, Last name, Company, Job title, Phone, Mobile, Email, Website, the address, and a Note. Leave out what you do not need.
4. Test it with your phone. It should offer to save a new contact.
5. Click Save to media library.

Keep it short. A full card makes a busy code, and a busy code is harder to scan. See The scan check below.

Every kind of code

Type holds eleven kinds. Changing it clears the boxes under it.

Type	What a phone does with it
Website URL	Opens a web page.
Plain text	Shows your words on the screen.
Contact card	Offers to save a new contact.
Wi-Fi	Offers to join a Wi-Fi network.
Email	Opens a new email with the To, Subject and Message filled in.
Phone call	Offers to call the number.
SMS	Opens a new text message to the number, with your words in it.
Map location	Opens a map with a pin. You type the Latitude and Longitude.
Calendar event	Offers to add the event to the phone’s calendar.
WhatsApp	Opens a WhatsApp chat with the number.
App download	Opens one link to your app.

A few of these have a catch.

• Calendar event: times carry no time zone. Each phone reads them as its own local time.
• WhatsApp: type the number with its country code, such as 1 for the US.
• App download: a QR code holds one link only. If you fill in Fallback URL, the code opens that, so make it a page that links to both stores. Without one, it opens the App Store URL, or else the Google Play URL.

Style

Style sets the look. Each box has a ? beside it that says what it does.

• Dot shape: Square, Rounded, Dots or Classy. It starts on Rounded.
• Eye frame and Eye center: the three big squares in the corners. Each can be Square, Rounded or Circle.
• Dot color, Eye frame color, Eye center color and Background: the colors. Dark dots on a light background scan best.
• Gradient: check it to fill the dots with two colors that blend. Pick a Start color and an End color.
• Quiet zone: the blank border around the code. It starts at 4. Phones need some border to find the code, so do not set it to 0 for print.
• Error correction: how much of the code can be covered or scuffed and still scan. It starts at M. H is the toughest, but makes a busier code.

Logo

You can put your logo in the middle of the code.

1. Click Choose logo. A list of your Media library opens.
2. Click your logo. It must be a PNG, JPEG or WebP picture, under 2 MB.
3. Set Logo size. It starts at 18 percent of the code’s width.
4. Leave Clear the dots behind the logo checked. It gives the logo a clean space.

With a logo, Error correction is set to H for you, so the code still scans with part of it covered.

The logo must be in your Media library first. Media shows you how to upload it.

Frame

Check Add a frame with a caption to put a colored border around the code, with a band of words. The Caption starts as “Scan me”. It can be up to 40 letters.

You can set the Frame color, the Caption color, and the Caption position: Bottom or Top.

The scan check

Under the picture, the screen tests your code as you build it.

• Scan check passed. means it read the code fine.
• This code didn’t scan in a test. means it could not read it.
• This is a dense code, and a logo or round dots may keep it from scanning. means it may fail.
• Low contrast - this code may not scan reliably. means a color is too close to the background.

If you see a warning, try a smaller logo, Square dots, darker dots, or less in the code. A shorter web address helps a lot.

Downloading

Pick a Download size: 512 px, 1024 px or 2048 px. Bigger is sharper. Then click one of the three buttons.

Button	What you get	Best for
SVG	A file that stays sharp at any size.	Anything printed: signs, flyers, vans. Give this one to your printer.
PNG (white)	A picture on a white background.	Email, documents, social posts.
PNG (transparent)	A picture with no background.	Laying the code over your own design.

A download goes to your computer only. It is not saved anywhere on your website.

Saving to your Media library

Click Save to media library. The button stays gray until the code has a Name.

Saving keeps the code, so you can open it and change it later. It also puts three files in your Media library, in a folder called QR Codes: one SVG, one PNG on white and one PNG with no background. Under the button, a list shows the three files.

The file names come from the code’s name on the first save. They never change after that, even if you rename the code.

Opening and changing a saved code

Click a code in the list on the left. It opens in the middle, just as you left it.

Change what you need, then click Save changes. The same three files are replaced with the new ones.

Deleting a code

Click Delete next to the code in the list on the left.

While a code is saved, its files and its logo cannot be deleted from the Media library. The library tells you Used by: QR Codes. Delete the code here first.

Shortcuts from other screens

Two other screens can start a code for you, if your website has them.

• On Landing Pages, the QR code button shows the page’s link. Click Copy, then Open QR codes. Paste the link into URL.
• On a poll in Bookings, Make a QR code opens this screen with the link filled in. You see Link filled in. Name the code, then save it.