WhatsApp Chat Button for website

Requirement:

• A Google Tag Manager account connected with your website. If you don’t have one yet you can follow our guide to create an account and add GTM into your Magento 2 website.
• A WhatsApp account

Configuration Guide

1. Import WhatsApp button config file into GTM:

Inside your GTM dashboard, go to Admin > Import Container.

- Select file to import: select the file whatsapp-button.json you’ve just downloaded

- Choose workspace: Existing > Default Workspace. (only choose New if you know what you’re doing)

- Choose an import option: Merge > Overwrite conflicting tags, triggers and variables.

Then click Confirm

2. Configure the button:

Go to Variables tab. This is where you’ll configure the necessary information for the WhatsApp Chat Button. The variables whose name starting with “INPUT” are the ones you can edit, where “NO EDIT” are the ones you must not touch.
To edit a variable, simply click on its name, edit the Value field, and then click Save.

- INPUT - Whatsapp Chat Button - Phone Number (Required): enter your Whatsapp phone number. This is the only required variable. You can already go to the next step to implement your Whatsapp Button. Otherwise you can configure other variables below to customize your button.

- INPUT - Whatsapp Chat Button - Position (Optional): the position of the Whatsapp Chat Button on screen. The following values are supported (Default: right)

+ left: show the button on bottom left corner of the screen

+ right: show the button on bottom right corner of the screen

- INPUT - Whatsapp Chat Button - Distance from left/right (px) (Optional): how far the button is from the left or the right of the screen (depending on the Position variable), in pixels. (Default value: 20)

- INPUT - Whatsapp Chat Button - Distance from bottom (px) (Optional): how far the button is from the bottom of the screen, in pixels. (Default value: 20)

3. Preview your WhatsApp Button:

*Important: make sure you disabled AdBlock on your browser.

In your GTM dashboard, click Preview.

A new tab will open. Enter your website URL into the popup and then click Start.

The URL you entered will be opened in a new window. In the current window, if you see the message “Connected!” as in the below screenshot, then your GTM implementation is working.

4. Apply the WhatsApp Chat Button to live site:

In your GTM dashboard, click Submit.

You can enter a Version Name & Version Description for this submit version (optional). Then click Publish.

Click Continue.

Done!