🟩 How To Create And Integrate A WhatsApp Chat Widget Into Your Website

🟩 How to Create and Integrate a WhatsApp Chat Widget into Your Website

📚 A chat widget is a powerful tool that allows website visitors to engage in real-time communication with your company, offering immediate support and assistance. Follow these steps to seamlessly integrate a chat widget into your website.

💡 PRO TIP: Click here to hire an expert to guide you in the step by step. Book a call now to learn all the tips and tricks for training your AI, or let us handle it all for you instead.

Table of contents

Creating the Chat Widget
Save Chat Widget Configurations
Configure Start Bot Flow
Retrieve Embedded Code
Integrating the Chat Widget

Adding a chat widget to your website enhances user experience by providing instant support and communication. By following these steps, you can create and integrate a chat widget effectively.

Creating the Chat Widget #

1. Navigate to WhatsApp Bot Manager:

Access the WhatsApp Bot Manager Page to begin creating your chat widget.

2. Select Chat Widget Section:

Within the WhatsApp Bot Manager, navigate to the “Chat Widget” section and click on the “Create” button. Ensure that the WhatsApp bot account is selected for which the chat widget will be created.

3. Configure Action Button:

Customize the action button by completing the following fields and clicking “Save”:

Upload a logo image or provide a URL for the logo.

Select a color from the palette or input a hexadecimal color code for the chat widget’s header background.

Set a display name for your chat widget.

Craft a welcoming message for your users.

Choose the desired position for the chat widget on your webpage.

Define the button text.

Specify colors for the button background, button text, button hover background, and button text hover color.

Set the button size.

Provide a reference for tracking the plugin later.

Save Chat Widget Configurations #

Click the “Save” button to preserve the chat widget configurations.

Configure Start Bot Flow #

Double click on the “Start Bot Flow” and provide a name for it. You can also add labels, sequences, and assign conversations to an agent or team member as needed. Save the flow after adding the desired replies.

Retrieve Embedded Code #

Retrieve the embedded code for the chat widget.

Integrating the Chat Widget #

1. For WordPress Website:

Copy the JavaScript Embed Code.
Access your WordPress Dashboard and navigate to “Appearance” > “Theme File Editor.”
Paste the copied code into the footer section.

2. For Custom Website:

Copy the JavaScript Embed Code.
Paste it into the header or footer section of your index.php or index.html file.

By following these steps, you can effectively create and integrate a chat widget into your website, providing an efficient means of communication and support for visitors and subscribers.