Enhance Customer Interaction with BotSailor's Facebook Engagement Widget

Adding Facebook Messenger chat to your website gives visitors a familiar way to reach you instantly. With BotSailor’s Facebook Engagement Widget, you can set up a branded chat interface, craft a custom greeting, and handle messages in real time. This step-by-step guide shows how to access the Engagement Widget settings, adjust appearance and behavior options, generate the embed code, and integrate it into your site’s HTML, so you can start connecting with customers right away.

Why Should You Consider Having a Facebook Engagement Widget?

  • Familiar Platform: Engage users via Messenger’s trusted interface.
  • Custom Branding: Match button colors, text, and size to your site.
  • Instant Setup: Embed with one script.
  • Persistent Chats: Continue conversations across devices via Messenger.

Step 1: Navigate to Bot Manager & Access the Engagement Widget

  • Log in to your BotSailor dashboard.
  • Select Facebook Bot from the left-hand sidebar under the Chatbot Manager section.
  • Choose the Facebook page where you want to install the Engagement Widget from the list of connected pages.
  • Within your chosen page, click on the Engagement Widget.
  • Click Create to set up a new widget.

Step 2: Configure the Widget Actions

  • Select the action type from the dropdown. Typically, you’ll use the Messenger Engagement Plugin.
  • Set the desired parameters such as:
    • Button text (e.g., "Send Message").
    • Button background color, text color, hover background, and hover text color.
    • Button size (Small, Medium, Large, Extra Large).
    • Reference (an identifier for your convenience).

Step 3: Customize Plugin Type & Appearance

  • Select your plugin type: typically "Send to Messenger."
  • Enter the domain of your website.
  • Choose language preferences, button text, and plugin skin (White or Blue).
  • Set plugin size (Standard, Large, Extra Large).
  • Configure optional settings like redirection after successful subscription or a custom success message.
  • Click Save to finalize your settings.

Step 4: Embedding the Widget

  • Once configured, return to the Engagement Widget
  • Click on the JS Code button next to your created widget.
  • Copy the JavaScript snippet provided.

Step 5: Add the Widget to Your Website

  • Paste the copied JS code into the <head> section or just before the closing </body> tag of your website.
  • Ensure that the domain you've entered matches your live site to ensure correct functioning.

Step 6: Test and Publish

  • Visit your website to confirm the widget appears correctly.
  • Click on your widget to ensure it opens Messenger as expected.

Why Choose BotSailor’s Engagement Widget?

  • Direct Customer Interaction: Engage instantly with your visitors via Facebook Messenger.
  • Highly Customizable: Tailor the appearance to align with your branding.
  • Seamless Integration: Quick and easy implementation without extensive coding.

By following these simple steps, you can significantly enhance your user engagement, fostering stronger connections and improving customer satisfaction with BotSailor's Facebook Engagement Widget.

❓ Frequently Asked Questions (FAQ)

What is the Facebook Engagement Widget in BotSailor?
The Facebook Engagement Widget enables you to add a Messenger chat button to your website, allowing visitors to message your Facebook page directly through the Messenger platform.

How do I create a Facebook Engagement Widget in BotSailor?
Log in to your BotSailor dashboard → Go to Facebook > Bot Manager → Choose your connected Facebook page → Click on Engagement Widget → Click Create to begin setup.

What is the Messenger Engagement Plugin?
It is a Facebook-supported plugin that opens a Messenger chat window when clicked, allowing real-time communication with users directly from your website.

Can I customize the appearance of the widget?
Yes, you can fully personalize the widget by adjusting the button’s text, background color, text color, hover effects, size, and more to match your website’s branding.

What is the plugin skin option used for?
The plugin skin (White or Blue) controls the overall theme of the Messenger plugin. Choose one that best fits your site’s design aesthetics.

Where should I place the Facebook widget script in my website code?
Paste the copied JavaScript snippet either in the <head> section or just before the closing </body> tag of your website’s HTML for optimal performance.

What is the “Reference” field in the widget settings?
It’s an internal label used to identify or track the widget within your BotSailor account, especially useful if you're managing multiple widgets.

Do I need to whitelist my domain for the widget to work?
Yes. Make sure the domain entered in the widget setup matches your live website domain, or the Messenger plugin may not load correctly.

Can I redirect users after they click the Messenger button?
Yes, you can configure optional redirection or display a success message once a user successfully opens or interacts with the Messenger widget.

Is the widget mobile-friendly?
Absolutely. The Facebook Engagement Widget is responsive and works well across desktop and mobile browsers.

Powered by BotSailor.