How to add a WhatsApp button to the website

Nina De la Cruz Nina De la Cruz 6 min read

Over the past few years, the WhatsApp team has released several features to ensure their product remains a go-to messenger for personal and business use alike.

One of those features is the ability to invite people to chat with you via a direct link.

You can share a link to your chat in your Instagram bio or email signature. And if you have a website, you can use a floating WhatsApp button or a popup to invite visitors to send you a message:

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.

WhatsApp website button gallery, powered by Getsitecontrol

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.

How to add a widget template to the 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.

How to change the text on a floating button in Getsitecontrol

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:

How to switch to the mobile preview mode when editing a floating button in Getsitecontrol

💡 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:— where the numbers after the slash sign are your WhatsApp number.

How to add a WhatsApp universal link to the floating button settings

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

How to tweak targeting settings in Getsitecontrol

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:

How to activate a new widget 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:

How universal WhatsApp URLs with a pre-filled message work

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.

How to find button settings when you’re editing a popup

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:


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, it will now look like this:

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.

How to add a WhatsApp URL with a pre-filled message to the button action in Getsitecontrol

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:

How to assign a phone number to the button click in Getsitecontrol

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.

Nina De la Cruz is a content strategist at Getsitecontrol. She is passionate about helping small and medium ecommerce brands achieve sustainable growth through email marketing.

You’re reading Getsitecontrol usecase collection where we talk about the best practices for using website popups. This usecase is a part of Request forms section.

Get the print version

Download a PDF version of our use case for easier offline reading and sharing with coworkers.

Download PDF