Follow Avox Docs on Google
Pick Avox Docs as a preferred source and Google shows these pages more often when you search for help with Avox.
Follow Avox Docs on Google
Pick Avox Docs as a preferred source and Google shows these pages more often when you search for help with Avox.
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.
The Website chat button turns a smart link 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.
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.
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".
Pick the colours
Under Colours, pick WhatsApp green, Dark, Light or Your own colours. See Colours.
Pick an icon
Under Icon, pick one of seven icons, or None. See Icons.
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.
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.
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.
The icon sits before the words, in the same colour as the text:
Paste the code where the button should appear, in any part of your page that accepts HTML:
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):
<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>
Make a separate smart link for your website, so its visits and chats are counted apart from your
posters and posts. Campaign labels like website on that link make it
easy to spot in your analytics.
Last updated