How to Add a WhatsApp Chat Widget (button) to Weebly Website?

Add A WhatsApp Chat Button To Your Weebly Website

In this guide, you’ll learn step by step how to integrate the Authkey WhatsApp Chat Widget into your Weebly website.

Prerequisites

Before you begin, please ensure you have the following:

1. Authkey Account
   Create your free account at Authkey Signup.
2. WhatsApp Business API
   The Authkey WhatsApp Chat Widget works only on the official WhatsApp Business API.
   
   • If you’re already onboarded, proceed to the next step.
   • If not, start your WhatsApp Business API onboarding process.
3. A Website
   You need access to your website’s code where the widget code will be placed.

Step-by-Step Guide

1. Sign in to Your Authkey Account

• Go to your dashboard.
• Navigate to: Chat Management → WhatsApp Widget → Create Widget.

2. Customize Your Widget

To make your WhatsApp Chat Widget match your brand, fill in the following fields:

1. WhatsApp Number
   Enter the registered WhatsApp Business API number.
2. Display Name
   Add your business name (e.g., Authkey Support or XYZ Store). This will be shown to users on the widget.
3. Logo Upload
   Upload your company logo to make the widget look authentic and branded.
4. Background Color
   Select a color that matches your website’s theme or brand identity.
5. Select Template
   Choose a predefined widget style or template for a ready-made layout.
6. Open Widget by Default?: Yes or No
   Decide whether the widget should be open automatically when someone visits your website.
7. Welcome Text
   Add a friendly greeting or call-to-action (e.g., “Hi, Need help? Chat with us on WhatsApp!”).
8. Position
   Select where the widget will appear on your website: bottom right or bottom left.
9. Margin Bottom / Right
   Adjust the spacing from the screen edge to fit well with your site’s layout.

Once all fields are filled, click “Create Widget” to generate the Code.

3. Embed the Widget Code on Weebly Website. 

Copy the Generated Code by clicking on the “copy” button.

Method 1: Drag-and-Drop to Add WhatsApp Chat Widget on a Weebly Page

Log in to your Weebly Admin Account and open the Dashboard.

Click Edit Site.

From the Elements Panel, drag the Embed Code block to the footer area of the page.

Click inside the Embed Code block.

Paste the WhatsApp Chat Widget Code into the code editor box (see image in section 3).

All done. You have successfully added the Authkey’s WhatsApp Chat Widget 

to a specific page of your Weebly website!

Note: If the widget looks cropped in the backend preview, simply publish the page and check it in Incognito mode. On the live site, the widget will display correctly.

Method 2: Add WhatsApp Chat Widget to All Pages (Theme Level)

Log in to your Weebly Admin Account and go to Edit Site → Theme.

Click Edit HTML / CSS from the bottom of the left sidebar.

Open the header.html file and paste the WhatsApp Widget Code just before the closing </body> tag.

Do the same in the no-header.html file.

Click Save in the top-right corner to apply changes.

Done! Your WhatsApp Chat Widget will now appear across your entire Weebly website, enabling seamless customer engagement.

Below is an example of a Weebly website with the Authkey WhatsApp Chat Widget successfully integrated and visible in the bottom corner of the page.