Add a WhatsApp contact button to your website

A contact widget is a small “Message us” button that sits in the corner of your website. A visitor taps it and ends up in a WhatsApp conversation with your business. Their message lands in your Broadcaster inbox like any other, and you reply from there.

Setting one up takes about ten minutes. You will need to paste one line of code into your website, so if someone else looks after your site, this is the point at which you send it to them.

What your visitors see

It depends on the device, and the difference matters.

On a phone, tapping the button opens WhatsApp straight away, with a chat to your business already open and a message ready to send. The visitor types (or just sends what you pre-filled) and that is that. They never fill in a form, and they never type their phone number, because WhatsApp already knows who they are.

On a desktop, most people are not signed in to WhatsApp in their browser, so the widget shows a short form instead: their phone number and their message. When they send it, the message arrives in your inbox and you reply on WhatsApp as normal.

You can turn the phone behaviour off if you would rather everyone used the form. There is more on that below.

Step 1: Create the widget

Go to Settings, then Contact Widgets, and click Create widget.

You need two things:

1. A name. This is just for you. Visitors never see it. If you run more than one site, name it after the site.
2. Allowed domains. The websites this widget is allowed to run on. Type them without the https://, so example.com rather than https://example.com. If your site serves visitors on both example.com and www.example.com, add both. Messages sent from any other domain are rejected.

Click Create widget.

Step 2: Copy the embed snippet

You will land on the widget’s settings page. Scroll to the bottom and you will find the Embed snippet: a single <script> tag with your public key already filled in.

Click Copy snippet and keep it somewhere safe for a moment.

The full key is shown once, right after the widget is created. If you navigate away before you copy it, the key is masked and cannot be shown again. That is not a disaster: click Rotate key and you get a fresh one, and the snippet updates to match. Just remember to re-paste the new snippet into your site, because the old one stops working.

Step 3: Paste it into your website

Paste the snippet just before the closing </body> tag on every page where you want the button to appear. Most website builders and content management systems have a “custom code”, “footer scripts” or “tracking code” box for exactly this, and pasting it there puts it on every page at once.

Do not put it on pages that only logged-in staff see. The widget is for your visitors.

Reload your website and the button should appear in the corner within a second or two.

Step 4: Make it yours

Back on the widget’s settings page, everything saves as you type. There is no save button.

• Appearance. Which corner it sits in, the text on the button, the heading on the panel.
• Ask for the visitor’s name. Off by default on new widgets. Every field is one more thing to type, and WhatsApp tells you who replied anyway. Leave it off unless you genuinely need the name up front.
• Pre-filled message. The text the visitor starts with, both in the WhatsApp chat and in the form. Something like “Hi, I’m getting in touch via your website” works well. It gives them a starting point, and it tells you where they came from.
• Automatic reply. Pick an approved WhatsApp template to send back the moment a form submission arrives, with a different one for outside business hours if you like. Leave both blank to send nothing.
• Thank-you message. What the visitor sees after the form is sent.

Common gotchas

• If your website has a Content Security Policy, the button will not appear. This is the one that catches people out, because there is no error message on the page. Your site is telling the browser which scripts it is allowed to run, and ours is not on the list. Add https://widget.getbroadcaster.com to the script-src part of your policy. If you do not know whether you have one, you probably do not, but if the button refuses to show up and everything else looks right, this is the first thing to check. Your web developer will know what this means.
• Allowed domains control sending, not showing. The button can appear on a domain you forgot to list, and then fail when someone tries to send. If messages are not arriving, check the domain is on the list, including the www. version if your site uses it.
• The pre-filled message is a starting point, not a sent message. It appears in the visitor’s WhatsApp, ready to go, but they still have to press send. They can also edit it or delete it first.
• On phones, you only hear about the ones who send. Because the visitor is handed straight to WhatsApp, you get no record of anyone who taps the button and then changes their mind. That is the trade for asking them to type nothing at all. If you would rather capture every enquiry, even the half-hearted ones, turn off On phones, open WhatsApp directly and everyone gets the form.
• No WhatsApp number connected means no direct opening. If your account is not yet connected to WhatsApp, the widget quietly shows the form on every device, including phones. Finish your WhatsApp setup and the phone behaviour starts working on its own.
• Switching the widget off hides it everywhere, immediately. Use Widget enabled to take it down without editing your website.
• Your website might be cached. If you use a CDN or a caching plugin and the button does not appear after pasting the snippet, clear the cache and try again in a private browsing window.

Related