WhatsApp buttons & reference codes
How to add a WhatsApp click-to-chat button to your site, pre-fill the message, control where it shows, and use the reference code to tie chats back to visits.
What the WhatsApp button does
The WhatsApp button is a small round launcher that floats in the corner of your site. When a visitor taps it, WhatsApp opens with a message already typed in, ready for them to send. On a phone this opens the WhatsApp app; on a computer it opens WhatsApp Web.
It is deliberately WhatsApp green rather than your brand colour, because visitors recognise the mark instantly and that recognition is what gets them to tap. There is no AI and no chat transcript here — it simply hands the conversation off to WhatsApp. Every tap is recorded as a click-lead in your Conversations log so you can see it happened.
Your number and pre-filled message
Give the button a Name (this is only for your dashboard) and enter your WhatsApp number. You can type it naturally with a plus sign and spaces, for example +44 20 7946 0321 — Sorraia strips it down to the digits WhatsApp needs.
The Pre-filled message is the text that appears already typed in WhatsApp. You can insert a {page} token with the “+ Insert {page}” button: it is replaced, in the visitor's browser, with the name of the page they were on when they tapped. That way a message like “I was looking at your {page} page…” tells you exactly where the conversation started.
Position and mobile-only
Two options control where the button shows:
- Position — choose Bottom-right or Bottom-left corner.
- Show on mobile only — tick this to hide the button on wider screens (it disappears above 768px, so it shows on phones but not on desktops).
The reference code
When the reference code is switched on, Sorraia adds a short code to the end of the pre-filled message on its own line, like “Ref: #K7F3QD”. It is six characters made of numbers and clear, unambiguous letters (the easily-confused I, L, O and U are left out so it is easy to read off a screen). The visitor sees this line in their message.
The same code is quietly attached to the click-lead that gets logged when they tap. Because WhatsApp chats otherwise carry nothing that links back to your site, this code is the thread you can follow: when a message comes in with “Ref: #K7F3QD”, you can match it to that exact tap in your Conversations log — the page they were on and where they came from. That is what the code is for: attribution.
The reference-code toggle
The setting is the checkbox “Include a reference code in the message.” It is on by default. Leave it on if you want to be able to tie WhatsApp chats back to visits; untick it if you would rather the message contain only your own text with no extra line.
The code changes on every tap, so each visitor gets their own unique reference. There is nothing to configure beyond the on/off toggle.
Add it to your site
Pick which Site the button belongs to, then save. New buttons show “Save & get embed code”; once saved, the Embed code box appears with a Copy embed code button.
Paste the copied snippet into your site's HTML — it is a short <script> tag plus a placeholder div. The button is fixed to the corner of the screen, so it works wherever you drop the code on the page. Come back and edit the button any time; your changes take effect without needing to re-paste the embed.