A chat widget is a valuable tool that enables website visitors to engage in real-time communication with your company. Typically, it appears as a button located at the bottom of a web page, offering a warm greeting and providing immediate support to users. To seamlessly integrate a chat widget into your website, follow the below steps.<img src="https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/chat_widget.png" alt="" width="inherit" height="inherit"> To Create a Chat Widget: Navigate to the WhatsApp Bot Manager Page. Within the WhatsApp Bot Manager, select the `Chat Widget` section and click on the `Create` button. Make sure the WhatsApp bot account is selected for which the chat widget will be created <img src="https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/to_create_a_chat_widget_1.png" alt="" width="inherit" height="inherit"> Configure the action button by completing the following fields and clicking `Save`: <img src="https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/to_create_a_chat_widget_2.png" alt="" width="inherit" height="inherit"><ol class="PlaygroundEditorTheme__ol1"><li value="1" class="PlaygroundEditorTheme__listItem"> On the actions, WhatsApp short link is selected by default </li></ol><img src="https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/to_create_a_chat_widget_3.png" alt="" width="inherit" height="inherit"> Upload a .png or .jpg file for a logo, or provide a URL for the logo. <img src="https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/to_create_a_chat_widget_4.png" alt="" width="inherit" height="inherit"> Select a color from the color palette or input a hexadecimal color code for the chat widget`s header background. <img src="https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/to_create_a_chat_widget_5.png" alt="" width="inherit" height="inherit"> <img src="https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/to_create_a_chat_widget_6.png" alt="" width="inherit" height="inherit"> Set a display name for your chat widget. <img src="https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/to_create_a_chat_widget_7.png" alt="" width="inherit" height="inherit"> Craft a welcoming message for your users <img src="https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/to_create_a_chat_widget_8.png" alt="" width="inherit" height="inherit"> Choose the desired position for the Chat Widget on your webpage. <img src="https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/to_create_a_chat_widget_9.png" alt="" width="inherit" height="inherit"> Define the button text. <img src="https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/to_create_a_chat_widget_10.png" alt="" width="inherit" height="inherit"> Specify colors for the chat widget`s button background, button text color, button hover background, and button text hover color. <img src="https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/to_create_a_chat_widget_11.png" alt="" width="inherit" height="inherit"> Set the button size. <img src="https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/to_create_a_chat_widget_12.png" alt="" width="inherit" height="inherit"> Provide a reference to easily track the plugin later. <img src="https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/to_create_a_chat_widget_13.png" alt="" width="inherit" height="inherit"> Click on the `Save` button to preserve the chat widget configurations. <img src="https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/to_create_a_chat_widget_14.png" alt="" width="inherit" height="inherit"> Double click on the `Start Bot Flow` and provide a name for it. Also, there are options for adding label, sequence and assigning conversation to an agent or team member. <img src="https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/to_create_a_chat_widget_15.png" alt="" width="inherit" height="inherit"> Now let’s add desired reply from the `Start Bot Flow` and save the flow. <img src="https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/to_create_a_chat_widget_16.png" alt="" width="inherit" height="inherit"> Retrieve the embedded code and insert it into your website`s source code. <img src="https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/to_create_a_chat_widget_17.png" alt="" width="inherit" height="inherit">&nbsp;<img src="https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/to_create_a_chat_widget_18.png" alt="" width="inherit" height="inherit"> Both WordPress and custom websites may have the embedded code installed. Here’s how: For WordPress website: <ol class="PlaygroundEditorTheme__ol1"><li value="1" class="PlaygroundEditorTheme__listItem">Copy the JavaScript Embed Code.</li><li value="2" class="PlaygroundEditorTheme__listItem">Access your WordPress Dashboard.</li><li value="3" class="PlaygroundEditorTheme__listItem">Go to `Appearance` &gt; `Theme File Editor.`</li><li value="4" class="PlaygroundEditorTheme__listItem">Paste the copied code into the footer section. </li><li value="5" class="PlaygroundEditorTheme__listItem"><img src="https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/for_wordpress_website_1.png" alt="" width="inherit" height="inherit"></li></ol> For Custom website: <ol class="PlaygroundEditorTheme__ol1"><li value="1" class="PlaygroundEditorTheme__listItem">Copy the JavaScript Embed Code.</li><li value="2" class="PlaygroundEditorTheme__listItem">Paste it into the header or footer section of your `index.php` or `index.html` file. </li></ol>The Chat Widget will now be displayed on the website, providing an efficient means of communication and support for visitors/subscribers of the website.

A chat widget is a valuable tool that enables website visitors to engage in real-time communication with your company. Typically, it appears as a button located at the bottom of a web page, offering a warm greeting and providing immediate support to users. To seamlessly integrate a chat widget into your website, follow the below steps.

![](https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/chat_widget.png)

To Create a Chat Widget:

Navigate to the WhatsApp Bot Manager Page.

Within the WhatsApp Bot Manager, select the \`Chat Widget\` section and click on the \`Create\` button. Make sure the WhatsApp bot account is selected for which the chat widget will be created

![](https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/to_create_a_chat_widget_1.png)

Configure the action button by completing the following fields and clicking \`Save\`:

![](https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/to_create_a_chat_widget_2.png)

1. On the actions, WhatsApp short link is selected by default

![](https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/to_create_a_chat_widget_3.png)

Upload a .png or .jpg file for a logo, or provide a URL for the logo.

![](https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/to_create_a_chat_widget_4.png)

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

![](https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/to_create_a_chat_widget_5.png)

![](https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/to_create_a_chat_widget_6.png)

Set a display name for your chat widget.

![](https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/to_create_a_chat_widget_7.png)

Craft a welcoming message for your users

![](https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/to_create_a_chat_widget_8.png)

Choose the desired position for the Chat Widget on your webpage.

![](https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/to_create_a_chat_widget_9.png)

Define the button text.

![](https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/to_create_a_chat_widget_10.png)

Specify colors for the chat widget\`s button background, button text color, button hover background, and button text hover color.

![](https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/to_create_a_chat_widget_11.png)

Set the button size.

![](https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/to_create_a_chat_widget_12.png)

Provide a reference to easily track the plugin later.

![](https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/to_create_a_chat_widget_13.png)

Click on the \`Save\` button to preserve the chat widget configurations.

![](https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/to_create_a_chat_widget_14.png)

Double click on the \`Start Bot Flow\` and provide a name for it. Also, there are options for adding label, sequence and assigning conversation to an agent or team member.

![](https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/to_create_a_chat_widget_15.png)

Now let’s add desired reply from the \`Start Bot Flow\` and save the flow.

![](https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/to_create_a_chat_widget_16.png)

Retrieve the embedded code and insert it into your website\`s source code.

![](https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/to_create_a_chat_widget_17.png)

![](https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/to_create_a_chat_widget_18.png)

Both WordPress and custom websites may have the embedded code installed. Here’s how:

****For WordPress website:****

1. Copy the JavaScript Embed Code.
2. Access your WordPress Dashboard.
3. Go to \`Appearance\` > \`Theme File Editor.\`
4. Paste the copied code into the footer section.
5. ![](https://dash.botbiz.io/assets/docs/images/bot_manager/chat_widget/for_wordpress_website_1.png)

****For Custom website:****

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

The Chat Widget will now be displayed on the website, providing an efficient means of communication and support for visitors/subscribers of the website.

Was this article helpful?