Learn how to create a WhatsApp Chat Widget and use it on websites by following the next steps:

Access the WhatsApp Bot Manager: #

1. • From the BotCommerce dashboard, go to “WhatsApp Bot Manager”.
2. • Select the WhatsApp account for which you want to create the chat widget.

Create a Short Link: #

1. • Click on “Short Link” and then on “Create”.
2. • This will redirect you to the “Visual Flow Builder”. Here, you’ll see a bot flow with the “Start Bot Flow” and an action button.

Configure the Action Button: #

1. • The action button corresponds to the chat widget settings.
   • Customize the chat box header and background colors.
     
2. • Change the display name, welcome message, and pre-filled message if desired.
   • Choose the chat widget position on the webpage (default is bottom right).
   • Set whether the widget will be open or closed by default.
     
3. • Adjust the widget’s position using the X and Y offset values.
4. • Configure the delay time for the chat widget to appear after the website loads (0 to 60 seconds).

Customize the Widget Button: #

1. • Modify the button text, background, text color, hover background color, and button size.
     
2. • Enter a unique reference using only alphanumeric characters.

Assign Labels: #

• • Add labels to categorize subscribers who sign up through this chat widget.

Save the Settings: #

• • Click “OK” to save the chat widget settings.
  • Assign a name to the bot flow in the “Start Bot Flow”.

Add Replies to the Chat Widget: #

1. • You can add any type of bot reply: text, image, audio, video, interactive, etc.
2. • Add a simple text reply and connect it to the next reply.
   • For interactive replies, add buttons, text, or images as needed.

Save the Bot and Get the Embed Code: #

1. • Once the bot is configured, click “Get Embed Code” to obtain the JavaScript code.
2. • Use this code on your website to display the chat widget.

Test the Widget on the Website: #

1. • Insert the code into your website and ensure the chat widget appears.
     
2. • If needed, go back to “Short Link” in BotCommerce to edit the widget settings.

Review the Subscribers: #

• • Go to “Subscriber Manager” in BotCommerce to view users who subscribed through the chat widget.
• • Verify that the labels have been correctly assigned to the subscribers.