← Help Center

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 WhatsApp’s own page opens first, where the visitor can continue in the desktop app or 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 logged on your Conversations page (switch the channel to WhatsApp) with the page the visitor was on, where they came from and, when reference codes are on, the tap's code. A tap is not a lead on its own; Taps and leads, below, explains how to turn taps into leads.

Your number and pre-filled message

Give the button a Name (this is only for your dashboard) and enter your WhatsApp number in international format: a plus sign, your country code, then the rest of the number. Spaces are fine — 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 saved with the tap Sorraia logs. 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 by pasting the code into the Conversations search, which shows 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.

Taps and leads

A tap tells you a visitor opened WhatsApp, not that they sent the message, so by default a tap is only logged, never sent as a lead.

To treat taps as leads, tick Send taps as leads on the button; it is off by default. Each tap then becomes a lead labelled “WhatsApp tap”, saved as a submission of the form you pick under Lead form (one of your forms on that site, or the site's WhatsApp leads form), so that form's webhook and workflows receive it. Tap leads are capped at about 10 every 10 minutes and 100 a day per button; taps over the cap are still logged, just not sent as leads.

In an organisation, only an org admin can change this setting. It is never available on a HIPAA site: there, taps are logged but never sent as leads.

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 a floating launcher for the whole site: paste the snippet once in a site-wide spot, just before the closing </body> tag, and it appears in the corner of every page that loads it. Never put it in the <head>, where the button won't appear. On Wix, add it through Settings → Custom Code (a paid plan with a connected domain), not an Embed HTML element, which would trap the button inside a box. Come back and edit the button any time; your changes take effect without needing to re-paste the embed.