# QR Codes for Smart Links

> Design a smart link's QR code: 20 starting designs, patterns, eyes, colours, frames, words, the centre logo, the scan meter, and downloads as PNG, SVG or PDF once the link is live.

Source: https://docs.theavoxai.com/chat-links/qr-codes

Every [smart link](https://docs.theavoxai.com/chat-links) comes with a QR code. Scan it with a phone camera and WhatsApp opens a
chat with you, message already typed. The QR code designer lets you make it look like your business,
tells you whether it will scan, and gives you files for a screen or a printer.

You design the code on the **QR code** step when you create a link, and on the link's **QR code** tab
afterwards. Changes on the tab save on their own a moment after you make them ("Saving", then
"Saved"). If a save fails, **Not saved** shows with **Try again**.

> **Note**
>
> A QR code always points at its smart link, never at WhatsApp directly. Change the design, the message or
> what the link sends whenever you like: codes you've already printed keep working.

## The designer at a glance

The code sits on one side, with two views: **Code** (the code on its own) and **On a phone** (the code on
a printed card, seen through a phone camera). Under it is the [scan meter](#the-scan-meter). Beside the
code are **Undo** (`Ctrl` + `Z`), **Redo** (`Ctrl` + `Shift` +
`Z`) and **Export**.

The other side holds the designs to start from (**Starting designs**, and your team's
[**Saved designs** and **Brand kit**](https://docs.theavoxai.com/chat-links/qr-designs)), then six tabs:

| Tab | What you change |
| --- | --- |
| **Pattern** | The shape of the small dots, the repair level and the blank margin |
| **Eyes** | The three corner squares: their outer ring, their centre, and their colours |
| **Colours** | The code's colour (solid, gradient or glow) and the background (filled or see-through) |
| **Frame** | A frame around the code, and its colour |
| **Centre** | The graphic in the middle: the Avox mark, your logo, an icon, letters, or nothing |
| **Text** | The words on the frame, their font and colour |

On a phone, the tabs are buttons under the code (with **Customise**), and each opens its options in a
sheet from the bottom of the screen.

While you create a link, its six-character code is picked when you save, so the designer shows a sample
code in your design (with an [ending-only address](https://docs.theavoxai.com/chat-links#addresses), or once the draft is saved,
it's already your real code). Downloads open on the link's **QR code** tab once the link is live.

## Starting designs

20 finished designs: ten for different kinds of business and ten looks. Every one is high contrast and
checked to scan. Pick one, then change anything you like. Picking a design keeps the
printed width you set on the scan meter.

| Design | Frame and words |
| --- | --- |
| **Cafe** | Bottom banner: "Order ahead on WhatsApp", a "C" in the middle |
| **Salon** | Card: "Book your next visit" and "Tap, chat, done" |
| **Clinic** | Simple border: "Chat with our front desk", a "+" in the middle |
| **Retail shop** | Label tag: "Scan to shop" |
| **Restaurant** | Ribbon: "Reserve a table" |
| **Real estate** | Top banner: "Ask about this home", "RE" in the middle |
| **Gym** | Ticket: "Join on WhatsApp" and "First week free" |
| **Education** | Speech bubble: "Ask us anything" |
| **Events** | Round badge: "RSVP here" |
| **Services** | Corners: "Get a quote on WhatsApp" |
| **Minimal** | No frame, square dots and eyes, nothing in the middle |
| **Midnight** | Dark card: "Scan to chat" and "We reply on WhatsApp", the Avox mark in the middle |
| **Neon night** | Dark round badge in bright green: "Scan me" |
| **Gold on black** | Black card in gold: "By appointment" and "Message us on WhatsApp", an "L" in the middle |
| **Eco green** | Green label tag: "Chat with us" |
| **Pastel** | Pink speech bubble: "Say hello" |
| **Bold colour** | Yellow bottom banner: "SCAN TO CHAT" |
| **Ocean** | Blue simple border: "Message us", the Avox mark in the middle |
| **Sunset** | Orange ribbon: "Chat with us" |
| **Typewriter** | Photo print: "scan me, say hi", "Hi" in the middle |

Designs your team saves, and your brand kit, sit right under the starting designs. See
[Saved QR designs and brand kit](https://docs.theavoxai.com/chat-links/qr-designs).

## Pattern, eyes and colours

- **Pattern:** Square, Rounded, Dots, Diamond, Tall bars, Wide bars or Liquid. Square and Rounded are
  the easiest to read; the others are a little harder for older phones.
- **Repair level:** how much of the code can be covered or damaged and still read: **Auto**, **Low**,
  **Medium**, **High** or **Highest**. **Auto** picks the highest level when there's a centre graphic,
  and that's the right choice almost every time.
- **Blank margin:** the empty space around the code, 0 to 10. 4 is the standard, and it helps phones
  find the code.
- **Eye frame** and **Eye centre:** the corner squares' ring (Square, Soft, Rounded, Circle, Leaf) and
  centre (Square, Soft, Circle, Leaf, Diamond). Matching shapes read best on older phones. **Eye
  colours** are **Same as code** to start with; keep them dark against the background.
- **Code colour:** **Solid**, **Gradient** (a start and end colour and a **Direction**) or **Glow** (a
  middle and edge colour).
- **Background:** **Filled** with a colour, or **See-through**. Place a see-through code on a light,
  plain surface.

Every colour picker also shows your [brand kit](https://docs.theavoxai.com/chat-links/qr-designs#brand-kit) colours, once your team
has saved one.

> **Tip**
>
> A dark code on a light background is the safest choice. Some phone cameras can't read a light code on a
> dark background at all, and the scan meter warns you when you try.

## Frames and text

A frame with a short call to action gets more scans. Pick one of twelve frames, or **No frame**:

Simple border, Card, Bottom banner, Top banner, Speech bubble, Phone, Ticket, Round badge, Photo print,
Label tag, Ribbon and Corners.

On the **Text** tab, write the words for the frame, up to 40 characters a line, or tap an idea: "Scan to
chat", "Chat with us on WhatsApp", "Order on WhatsApp", "Book on WhatsApp", "Scan for the menu" or "Get
a quote". Card, Phone and Ticket frames have room for a second line. Pick the **Font** and the **Text
colour** there too. There are 14 fonts, each shown in its own style in the list: Clean, Classic, Friendly,
Typewriter, Narrow, Modern, Thin, Soft modern, Old style, Elegant, Slab, Poster, Script and Handwritten.
They use the fonts already on your device, so a font can look slightly different on another phone or
computer. Test-scan before you print.

## The centre graphic

New codes have the **Avox mark** in the middle, in its own colours. It's yours to change: on the
**Centre** tab, pick:

- **None** for a plain code;
- **Avox**, in **Brand colours** or the **Code colour**;
- **Logo** to upload your own (PNG, JPG, WebP or SVG under 5 MB), or paste an `https://` link to an
  image;
- **Icon** to pick one from the built-in set, in a colour of your choice. Choosing **Logo** or **Icon**
  opens its picker first; your code keeps its current centre until you upload a logo or tap an icon;
- **Letters**, up to 3, with a font and colour of your choice.

**Size and shape** sets how big it is and its shape (Circle, Rounded, Square), with an optional
**Backing plate** behind it in a colour of your choice. A centre graphic covers part of the code, so Avox
keeps it inside what the repair level can rebuild: if you ask for more, it's shown a little smaller so the
code stays readable.

> **Note**
>
> An uploaded logo is kept with the design. A logo from a link has to load when you download: if it
> can't, it's left out of that file and the designer tells you, so upload the file instead.

## The scan meter

The scan meter scores your design from 0 to 100 and says it in words: **Scans easily**, **Should scan
well**, **Might be hard to scan** or **Likely won't scan**. Open it to see each check, marked as fine,
worth a look or needs fixing, with plain advice for anything that isn't fine:

| Check | What it looks at |
| --- | --- |
| **Contrast** | How different the code and its background are |
| **Colours** | A dark code on a light background, or the riskier light-on-dark |
| **Centre** | How much of the code's repair room the centre graphic uses |
| **Corner eyes** | Whether the eye ring and centre shapes match |
| **Margin** | The blank space around the code |
| **Pattern** | How easy the dot shape is to read |
| **Print size** | The size of each dot at your printed width, and how far away it scans |
| **Link length** | A longer address makes a denser code |

Set **Printed width** (15 to 300 mm) to the size you'll really print. The meter then says how big one
dot prints and roughly how far away the code scans from. As a rule of thumb, a code scans from about ten
times its own width, so a poster across a room needs a bigger code than a table card. The PDF download
uses the same width.

> **Warning**
>
> The scan meter is a guide, not a promise. Always test-scan with a phone before printing: print one copy
> at the real size, and scan it with two different phones, in the light where it will hang.

## Downloads

Click **Export** beside the code. A panel opens next to the designer (on a phone, in its place until you
close it) with **Format** and one **Download** button:

| Format | What you get | Good for |
| --- | --- | --- |
| **PNG** | A picture in one of four **Size** choices: **Small** (512 pixels), **Medium** (1024), **Large** (2048) or **Print** (4096) | Chats, posts and websites |
| **SVG** | A sharp file that stays crisp at any size | Designers and print shops |
| **PDF** | A page ready to print, with the code at your **Printed width** | Printing it yourself |

Every download is your design exactly as it looks in the designer: the same frame, words, centre
graphic and colours, and a see-through background stays see-through. Nothing in the export panel changes
how the code looks. The link's **Share** tab and the [go-live window](https://docs.theavoxai.com/chat-links#your-link-is-live)
also have a quick **Download** of the PNG at 1024 pixels.

> **Note**
>
> Downloads open only while the link is **Live**, so nobody prints a code that leads to a "not open" page.
> For a draft, scheduled, paused, ended or archived link, **Export** stays greyed out and says why: for
> example "This link is paused. Downloads open once the link is live." You can keep designing meanwhile.

People who can see smart links but not change them get the downloads, without the design controls. An
archived link can't be redesigned until it's restored.

## Where to put a QR code

- **Eye level, near where the question comes up.** On the counter by the till, on the menu, on the
  parcel's packing slip, on the "Back in 10 minutes" sign.
- **Say what happens.** A frame with "Scan to chat" or "Book on WhatsApp" does better than a bare code.
- **Give it room and light.** Keep the blank margin, and avoid glossy surfaces that reflect lights.
- **One link per place.** A separate link for the window and the menu tells you which one works, on
  [Link analytics](https://docs.theavoxai.com/chat-links/analytics). [Folders](https://docs.theavoxai.com/chat-links#folders) keep them together.

## Troubleshooting

**Export is greyed out**

The link isn't live. Hover **Export** to see its state, then switch it on, resume it, or wait for its
start date. See [Link states](https://docs.theavoxai.com/chat-links#link-states).

**My logo is missing from the download**

The logo came from a link that couldn't be loaded when you downloaded. Upload the image file on the
**Centre** tab instead, then download again.

**The scan meter says it might not scan**

Open the meter and fix the checks marked as needing a fix, starting from the top. The usual ones: make
the code darker than its background, keep the blank margin at 4, make the centre graphic smaller, or set
the repair level back to **Auto**.

**The download didn't work**

Try again, or pick a smaller PNG size. On a slow device the **Print** size can take a moment.

## Related

- [Smart links](https://docs.theavoxai.com/chat-links): Addresses, sends, dates, sharing and limits

- [Saved designs and brand kit](https://docs.theavoxai.com/chat-links/qr-designs): Reuse designs and your brand across every code

- [Link analytics](https://docs.theavoxai.com/chat-links/analytics): Scans, clicks, chats started and conversions