TL;DR:
Set up the BotSailor Engagement Widget to connect your website visitors with Facebook Messenger. Create a widget, customize the button and Messenger plugin, configure your website domain, generate the JavaScript code, and add it to your website. Finally, publish and test the widget to ensure visitors can click the Send Message button and start a conversation with your Facebook Page.
|
| Before setting up the Engagement Widget, make sure you have: |
| ● A BotSailor account. ● A connected Facebook Page in BotSailor. ● A website where you can add custom JavaScript or HTML code. ● Access to your website's HTML, header, or body section. ● The correct website domain available for the Messenger plugin configuration. |
|
| The Facebook Engagement Widget is a website-based Messenger interaction tool that allows visitors to contact your connected Facebook Page directly from your website. |
| The widget can be customized with different button text, colors, hover effects, and sizes. The Messenger plugin can then open a conversation when a visitor interacts with the button. |
| A typical interaction looks like: |
| Website Visitor → Engagement Widget → Messenger → Facebook Page |
|
Step 1: Open the Engagement Widget
| First, log in to your BotSailor account. |
| From the dashboard: |
| ● Open Chatbot Manager from the left-hand sidebar. ● Select Facebook Bot. ● Choose the Facebook Page where you want to use the widget. ● Click Engagement Widget. ● Click Create to start setting up a new widget. |
| This takes you to the Engagement Widget configuration area for the selected Facebook Page. |
BotSailor Facebook Bot Manager showing the Engagement Widget section.
Step 2: Configure the Widget Action
| After creating the widget, configure the action that visitors will use to interact with Messenger. |
| Select the appropriate Action Type from the dropdown. The official BotSailor setup typically uses the Messenger Engagement Plugin. |
| You can configure options such as: |
| ● Button text, such as Send Message ● Button background color ● Button text color ● Hover background color ● Hover text color ● Button size ● Reference |
| The available button sizes include: |
| ● Small ● Medium ● Large ● Extra Large |
| The Reference field can be used as an internal identifier, which is particularly useful when managing multiple widgets. |
BotSailor Configure Action Button settings for the Engagement Widget
Step 3: Customize the Messenger Plugin and Appearance
| Next, configure the Messenger plugin that will be used by the widget. |
| Select the plugin type, typically Send to Messenger, and configure the available plugin settings. |
| Depending on the configuration, you can set: |
| ● Website domain ● Language ● Button text ● Plugin skin ● Plugin size ● Optional redirection settings ● Optional success message |
| The available plugin skins include White and Blue, while plugin sizes include Standard, Large, and Extra Large. |
| Make sure the website domain entered in the configuration matches the domain where you plan to install the widget. |
| After completing the settings, click Save. |
BotSailor Messenger plugin configuration and appearance settings for the Engagement Widget.
Step 4: Get the Widget JavaScript Code
| Once the widget has been configured, return to the Engagement Widget section. |
| Find the widget you created and click JS Code. |
| BotSailor will provide the JavaScript snippet required to install the widget on your website. Copy the generated code. |
BotSailor Engagement Widget list showing the JS Code option for a created widget.
Step 5: Test and Publish the Widget
| After adding the JavaScript code: |
| ● Save or publish your website changes. ● Open the live website. ● Check whether the Send Message widget appears. ● Click the widget. ● Verify that Messenger opens as expected. ● Test the interaction from the visitor side. |
| The official setup flow recommends visiting the website and clicking the widget to confirm that Messenger opens correctly. |
Step 6: Customize Button and Publish the Widget
| After opening the Chat Widget Element Builder: |
| ● Open your Element Builder page. ● Select the section where you want to place the chat button. ● Add a Button Element. ●Set your button name (Example: Chat on Messenger). ● Add your Messenger link in the Link field. ● Save the changes. ● Publish the widget. ● Open your live website and test the button to confirm Messenger opens correctly. |
Live website showing the Send Message Engagement Widget and Messenger interaction.
|
| Once the widget is installed, the interaction follows a simple flow: |
| Visitor Opens Website ↓ Engagement Widget Appears ↓ Visitor Clicks Send Message ↓ Messenger Opens ↓ Visitor Starts a Conversation ↓ Facebook Page Receives the Message |
| The Messenger Engagement Plugin is designed to open a Messenger conversation when the visitor interacts with the configured button. |
|
| After installing the widget, you can verify the setup directly from your live website. |
| For example: |
| Website Visitor: Clicks the Send Message button. |
| Messenger: Opens the Messenger interaction for the connected Facebook Page. |
| The live website test confirms that the widget is visible and that the configured Messenger interaction opens as expected. |
Live website test showing the Send Message button and Messenger interaction.
|
Engagement Widget Is Not Showing
| Check: |
| ● Whether the widget was created successfully. ● Whether the JavaScript code was added to the website. ● Whether the website changes were saved or published. ● Whether the configured domain matches your live website domain. ● Whether the script was placed correctly in the website HTML. |
Widget Appears but Messenger Does Not Open
| Check: |
| ● Whether the Messenger Engagement Plugin was selected. ● Whether the correct plugin type was configured. ● Whether the website domain matches the configured domain. ● Whether the JavaScript snippet is complete and correctly installed. |
Button Appearance Is Not Correct
| Review the widget action settings and check: |
| ● Button text ● Background color ● Text color ● Hover background ● Hover text color ● Button size ● Plugin skin |
| Save the configuration after making changes. |
Changes Are Not Appearing
| After changing the widget configuration: |
| ● Save the updated settings. ● Make sure the website changes are published. ● Refresh the live website. ● Check whether the browser is displaying an older cached version. ● Confirm that the correct widget code is installed. |
|
| After setup, verify: |
| ✅ Facebook Page is connected to BotSailor. ✅ Engagement Widget is created. ✅ Messenger Engagement Plugin is configured. ✅ Button appearance is configured. ✅ Website domain matches the configured domain. ✅ JavaScript code is copied from the widget settings. ✅ JavaScript code is added to the website. ✅ Widget appears on the live website. ✅ Send Message button can be clicked. ✅ Messenger opens correctly. ✅ The visitor can start a conversation. |
|
| After setting up and testing the Engagement Widget, you can extend the setup by: |
| ● Connecting the widget with additional Messenger automation flows. ● Creating different message interactions for website visitors. ● Testing the widget across desktop and mobile devices. ● Monitoring visitor interactions and engagement. ● Updating the widget configuration as your website or messaging needs change. |
| These steps help you move from simply installing the widget to maintaining and improving the website-to-Messenger interaction. |
