# QR Codes

Make QR codes for your website, your Wi-Fi or your contact card, in your own colors, and save them for print.

Source: https://docs.lookoutridgeit.com/plugins/qr-codes/

**Add-on**
QR Codes is an add-on, so not every website has it. If it is not in
your menu, see [Add-ons](https://docs.lookoutridgeit.com/billing/add-ons/) to add it.

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**.

**Warning**
Anyone who can see this code can join that network. Use a guest network, not
the one your office computers are on.

If you change the Wi-Fi password, the old code stops working. Open the code,
type the new password, save it, and print it again.

## 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](https://docs.lookoutridgeit.com/plugins/qr-codes/#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](https://docs.lookoutridgeit.com/content/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.

**Warning**
Some browsers cannot run the scan check, and then it only makes a guess. Always
scan the code with a real phone before you print it. A box of flyers with a
code that does not scan cannot be fixed.

## 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.

**Important**
A printed code holds its content itself. Changing the saved code does not
change codes already printed. If you change where it points, print it again.

## Deleting a code

**Warning**
**Delete** removes the code and its three files from your Media library. Your
browser asks you to confirm first. Nothing brings it back.

Codes already printed keep working. They do not need the files.

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](https://docs.lookoutridgeit.com/plugins/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](https://docs.lookoutridgeit.com/plugins/booking/), **Make a QR code** opens this
  screen with the link filled in. You see **Link filled in. Name the code,
  then save it.**