How To Add A WhatsApp Chat Widget To Your Website?

4 days ago

authkey

2 minutes

Add A WhatsApp Chat Widget (Button) To Your Website

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

Before you begin, please ensure you have the following:

Authkey Account
Create your free account at Authkey Signup.
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.
A Website
You need access to your website’s code where the widget code will be placed.

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

WhatsApp Number
Enter the registered WhatsApp Business API number.
Display Name
Add your business name (e.g., Authkey Support or XYZ Store). This will be shown to users on the widget.
Logo Upload
Upload your company logo to make the widget look authentic and branded.
Background Color
Select a color that matches your website’s theme or brand identity.
Select Template
Choose a predefined widget style or template for a ready-made layout.
Open Widget by Default?: Yes or No
Decide whether the widget should be open automatically when someone visits your website.
Welcome Text
Add a friendly greeting or call-to-action (e.g., “Hi 👋 Need help? Chat with us on WhatsApp!”).
Position
Select where the widget will appear on your website: bottom right or bottom left.
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.

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

Open your website’s editor and paste the code just before the closing </body> tag.

Save the Website Code and publish your updated website files.

Done!

Your WhatsApp Chat Widget is now live on your website.
A Demo website Showing the live WhatsApp Chat Widget in the right bottom corner.