Adding a WhatsApp Chat Widget to Your Website

The WhatsApp chat widget is a valuable tool for enhancing customer engagement on your website. It allows visitors to reach out to you instantly, making it easier for them to connect with your business. Adding this widget to your website is a straightforward process, and you can choose between three options: adding the global site tag directly to your website code, using Google Tag Manager or using your Shopify account. Follow the steps below to get started.

Option 1: Adding the WhatsApp Chat Widget via Your Website Code

Step 1: Access Your Website's HTML Code

Access the HTML source code of your website. This can typically be done through your website's Content Management System (CMS) or by editing the HTML directly.

Step 2: Insert the WhatsApp Widget Global Site Tag

1. Locate the closing </footer> tag in your HTML code. You'll typically find this tag near the end of your webpage, just before the closing </body> tag.
2. Paste the WhatsApp widget Global Site Tag (gtag.js) code just above the </footer> tag.
3. Save your changes and publish your updated website.

Step 3: Verify the WhatsApp Chat Widget

1. Visit your website to ensure that the WhatsApp chat widget appears as expected.
2. Test the widget by sending a message to your WhatsApp Business Account to verify that messages are received correctly.

‍

Option 2: Adding the WhatsApp Chat Widget via Google Tag Manager

Step 1: Set Up the WhatsApp Widget in Google Tag Manager

1. Log in to your Google Tag Manager (GTM) account.
2. If you haven't already, create a new GTM container and select the appropriate website.
3. In your GTM dashboard, navigate to "Tags" and click on "New."
4. Name your tag (e.g., "WhatsApp Widget").
5. Under "Tag Configuration," select "Custom HTML" as the tag type.
6. Paste the WhatsApp widget code snippet you copied from your WhatsApp Business Account in Step 2 into the HTML field.

Step 2: Define When the Widget Should Be Displayed

1.  In the same "Tag Configuration" section, add a trigger for when the widget should be displayed. You might want to use a trigger like "All Pages" if you want the widget to appear on every page of your website.

Step 3: Publish Your Tag

1. Click "Save" to save your tag configuration.
2. Next, click the "Submit" button in the upper right corner of the GTM interface.
3. Provide a name and description for your version (e.g., "WhatsApp Widget Added").
4. Review your changes and click "Publish" to make the tag live on your website.

Step 4: Verify the WhatsApp Chat Widget

3. Visit your website to ensure that the WhatsApp chat widget appears as expected.
4. Test the widget by sending a message to your WhatsApp Business Account to verify that messages are received correctly.

‍

Option 3: Adding the WhatsApp Chat Widget via Shopify

Step 1: Set Up the WhatsApp Widget in your Shopify account

1. Go to admin.shopify.com and log in using your credentials.
2. In the left navigation bar, click on "Online Store."
3. Select the "Themes" option within the "Online Store" menu.

4. Locate the theme you want to edit, then click the ellipsis (3 dots) next to it. This will open a dropdown menu.
5. From the dropdown menu, click "Edit Code." This action will take you to the code editor for your selected theme.

6. In the file directory on the left, find and open the "Sections" folder.
7. Among the available files, locate and select the "footer.liquid" file.

8. Copy the WhatsApp widget script from your settings page.
9. Paste the script into the "footer.liquid" file, typically just before the closing </footer> tag.

Step 2: Verify the WhatsApp Chat Widget

1. Visit your website to ensure that the WhatsApp chat widget appears as expected.
2. Test the widget by sending a message to your WhatsApp Business Account to verify that messages are received correctly.

‍