How to add a WhatsApp button to the website

When a visitor clicks the chat button, it will take them to WhatsApp messenger and prompt them to start a conversation. You can use this feature to provide real-time sales support, accept orders, and notify customers of ongoing deals.

Now, because WhatsApp doesn’t provide a native way to add a button to a website, we’ll show you how to do it using an app named Getsitecontrol.

You’ll be able to tailor the chat button to your business needs and decide how it should be displayed on your website. As a bonus, we’ll also show you how to let customers call you directly from your website.

The entire process should take you less than half an hour, even if you have zero technical knowledge.

Let’s go.

How to create a custom WhatsApp button for your website

Before getting started, we recommend connecting Getsitecontrol to your website. It’s quick and easy.

If you’re on WordPress, use the dedicated plugin. If you’re on Shopify or Wix, use the Getsitecontrol app from the Shopify App store or Wix App store. For other website platforms, read these instructions.

When you’re ready, follow the steps below.

Step 1. Select a template

Once you decide how you want to feature the WhatsApp button on your website, go to the template gallery and have a look at the options.

For general queries, consider placing a compact button sitewide. For more specific queries, popups might be a better choice – they provide more space to create the context for queries, and you can place them on selected pages only, if you want.

Once you find a template you like, use the prompts to add it to your Getsitecontrol dashboard.

Whether you choose a floating button or a popup with a button on it, the principle and the setup are almost identical. We’ll show you how to set up the floating button first, and then explain what’s different about popups.

Step 2. Type your call to action

In the dashboard, go ahead and change the call to action on the button. Just click on it and type new text.

For example, instead of the default CTA, you may want to use “Chat with us,” “Need help?” or “Ask a question.”

To see how the button will look on different mobile devices, switch to the mobile preview mode:

💡 If you see that the image (or the icon) looks wrong on mobile, go to Images and uncheck the box titled ‘Visible on mobile’ to remove it. From the same menu, you can adjust the sizing and spacing of the button.

Step 3. Add your WhatsApp URL to the button-click

It’s time to insert the chat URL into the button settings. To do that, scroll down the right-side menu, select ‘Background click’ and make sure the ‘Open URL’ action is selected. Then paste your universal WhatsApp link in the following format: https://wa.me/15551234567— where the numbers after the slash sign are your WhatsApp number.

Notice that the checkbox indicates that the chat will open in a new window. This means that regardless of the customer’s device, they’ll be prompted to the WhatsApp app. In case they don’t have the app, they’ll be prompted to install it from the store first.

Step 4. Set up audience targeting (optional)

At this point, the button is ready. If you go ahead and activate it, it will go live on every page of our website.

However, if you prefer displaying it under certain conditions, in the Targeting tab, you can set various rules, such as:

1. Display the button on selected pages only
2. Display the button to visitors on certain devices or from certain locations
3. Display the button during certain days or hours

Targeting settings are pretty straightforward, but if you want to dig deeper and learn all the ins and outs, read this guide.

Step 5. Activate WhatsApp button on your website

When you’re ready, hit the Save & close button in the top right corner and activate the button in the Getsitecontrol dashboard:

Then go to your website and test it out to see how everything works. Once the button starts getting views and hits, you’ll see these numbers in the dashboard. You’ll also be able to access more detailed statistics on where those who start the conversation are located, and from which page they choose to contact you.

How to create a pre-filled message

To help customers start the conversation without having to look for the right words, you can generate a pre-filled message and add it to the button settings. As a result, when a customer opens the chat, the message will be already typed:

This option is especially convenient when you’re using WhatsApp to collect orders, requests, or other non-generic queries. Below, we’ll show you how to add a pre-filled message to the button. For this example, we’ll use a popup template and explain how its setup is different from the floating button’s setup.

Step 1. Open the button settings

If you’ve chosen to feature a WhatsApp button on a popup, scroll down to Buttons to open its settings.

From there, you’ll be able to change the text on the button and set up the action triggered by the click. More on that in a moment.

Step 2. Generate the pre-filled message

Earlier, we showed you what a universal WhatsApp URL looks like. Essentially, the pre-filled message is just a piece of text used as an extension to that URL.

Before adding the message to the URL, you’ll need to encode it by replacing spaces with %20.

For example, if your pre-filled message sounds like “I have a question”, after encoding, it will look like:

I%20have%20a%20question

Once you’re done encoding, connect the message to your universal WhatsApp URL using ?text=.

For example, if your original WhatsApp URL after the https:// was wa.me/15551234567, it will now look like this:

wa.me/15551234567?text=I%20have%20a%20question

Step 3. Add the URL to the button-click settings

Now that you have the URL, paste it into the corresponding field in the menu.

When ready, activate the popup and test it on your website to make sure you’ve spelled the pre-filled message correctly.

Bonus: let customers call you directly

If you want to offer your customers an option to call you directly, you can do it with Getsitecontrol as well. In the gallery, you’ll find templates designed specifically for that purpose. Here is one example that might work for you:

The template is already pre-configured for the call activation, so all you need to do is open the button’s settings and paste your phone number into the corresponding field instead of the placeholder:

Keep in mind that the app used to initiate the call will depend on the device your customers are using. For example, those using an iPhone or a Mac will be suggested to proceed via Facetime. Others will be redirected to the default app on their devices if there’s one.

Let customers chat with a real person in real time

The share of mobile traffic is growing – so is the demand for quick answers to customers’ questions and concerns, both before and after the purchase. Having a WhatsApp button on your website is an easy way to let people reach a real person behind the business in real time, using the messenger most are already familiar with.

But that’s not all! Having your customers as WhatsApp contacts is a priceless opportunity for you to promote sales and personalized discounts through SMS marketing campaigns.

Try this approach today and see if it adds value to your business.