# Website Chat Button

> Put a WhatsApp chat button on your own website that opens your smart link: your words, preset or custom colours, an icon, a live preview, and code you copy and paste.

Source: https://docs.theavoxai.com/chat-links/website-button

The **Website chat button** turns a [smart link](https://docs.theavoxai.com/chat-links) into a button for your own website. A
visitor clicks it, WhatsApp opens a chat with you, and the message you wrote for the link is already
typed in. You design it in the dashboard and paste a few lines of code into your site.

It's on every smart link's **Share** tab, under **Website chat button**.

> **Note**
>
> The button is a plain link with no script, no font and no outside file, so it works on any site builder
> that takes HTML and doesn't slow your page down. It tracks nothing of its own: clicks are counted by the
> smart link, like any other visit. See [Link analytics](https://docs.theavoxai.com/chat-links/analytics).

## Make your button

**1. Write the words**

**Button text** is what the button says, up to 40 characters. It starts as "Chat with us on
WhatsApp". Try "Ask us on WhatsApp", "Book on WhatsApp" or "Order on WhatsApp".

**2. Pick the colours**

Under **Colours**, pick **WhatsApp green**, **Dark**, **Light** or **Your own colours**. See
[Colours](#colours).

**3. Pick an icon**

Under **Icon**, pick one of seven icons, or **None**. See [Icons](#icons).

**4. Check the preview**

**Preview** shows the button exactly as your visitors will see it. Switch **Preview on** between
**Light page** and **Dark page** to see it on both kinds of website.

**5. Copy the code**

Click **Copy code**. The code under **Code** is exactly what gets copied, and it changes as you
change the button.

The button isn't saved in Avox: it lives in your website once you paste it. To change it later, open the
**Share** tab again, make it the way you want and copy the new code.

## Colours

| Choice | Background | Text and icon |
| --- | --- | --- |
| **WhatsApp green** | WhatsApp's green | White |
| **Dark** | Near black | White |
| **Light** | White, with a soft grey edge | Near black |
| **Your own colours** | Any colour you pick | Any colour you pick |

**Your own colours** starts from the look you had picked, then gives you two colour boxes:
**Background** and **Text and icon**. Click one to pick from quick colours (WhatsApp's greens, darks and
lights, and a few bright brand colours), open your device's colour picker, or type a colour code like
`#1d4ed8`.

If the two colours are too close to read the words easily, a warning says so: "These two colours are
close, so the words may be hard to read. Pick a darker or lighter text colour." The button still works;
the warning is there to help your visitors.

A very light background gets a soft grey edge so the button still shows on a white page.

## Icons

The icon sits before the words, in the same colour as the text:

- **WhatsApp**, the WhatsApp logo (picked to start with)
- **Chat bubble**
- **Message**
- **Conversation**
- **Phone**
- **Send**
- **Support**
- **None**, for words only

## Add it to your website

Paste the code where the button should appear, in any part of your page that accepts HTML:

- **Website builders:** add an "HTML", "Embed" or "Custom code" block, and paste the code into it.
- **Your own site:** paste it into the page's HTML where the button should go.

It shows as a rounded button, opens WhatsApp in a new tab, and looks the same on phones and computers.
The code looks like this (yours has your own link, words, colours and icon):

```html
<a href="https://chat.theavoxai.com/ab3x9k" target="_blank" rel="noopener" style="display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border:1px solid #25d366;background:#25d366;color:#ffffff;font:600 15px/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;text-decoration:none">
  <svg ...>...</svg>
  <span>Chat with us on WhatsApp</span>
</a>
```

> **Tip**
>
> Make a separate smart link for your website, so its visits and chats are counted apart from your
> posters and posts. [Campaign labels](https://docs.theavoxai.com/chat-links#campaign-labels) like `website` on that link make it
> easy to spot in your analytics.

## Good to know

- The button works only while its smart link is live. If the link is paused, ended or archived, visitors
  who click it see a friendly page instead of WhatsApp. See [Link states](https://docs.theavoxai.com/chat-links#link-states).
- Changing the link's message, what it sends or its dates in Avox changes what the button does straight
  away, with no new code to paste. Changing the link's **address** does need new code: the old address
  keeps opening WhatsApp, but its visits stop counting. See
  [Changing the address](https://docs.theavoxai.com/chat-links#changing-the-address).
- Anyone who can see smart links can make and copy a button.

## Related

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

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

- [QR codes](https://docs.theavoxai.com/chat-links/qr-codes): Design and download a smart link's QR code