Set Up Engagement Widget (Facebook)

Introduction

 

The Engagement Widget in BotSailor allows you to create interactive buttons that direct users to your Facebook Messenger bot through an m.me short link. These widgets can be embedded on websites, enabling a frictionless experience for customer communication and lead generation.

 

Step-by-Step Guide

 

Step 1: Select Facebook Account

 

 

  • Go to Facebook Bot Manager from your BotSailor dashboard.
  • Select the desired Facebook page/account from the left panel (e.g., La Zoné).

 

Step 2: Open Engagement Widget

 

  • Click on Engagement Widget from the menu.
  • This section helps you create both me links and embedded chat buttons.

 

Step 3: Create a New m.me Link

 

  • On the right panel, click the Create button to generate a new m.me link.

 

Step 4: Configure Action Button

 

 

  • Select Action: Choose Messenger engagement plugin.
  • Select Short Link: Pick the me link you created.
  • Button Text: Enter the CTA text (e.g., “Chat”).
  • Customize Appearance: (Optional)

    • Button background color
    • Text color
    • Hover background and text color
  • Button Size: Choose from Small, Medium, Large, or Extra Large.
  • Reference & Labels: Add a unique reference (e.g., botzzzz) and select applicable labels.

 

Step 5: Connect to a Bot Flow

 

 

  • In the visual flow builder, link the Action Button to the Start Bot Flow.
  • Example: Connect it to a welcome flow titled Chatbotzzz.

 

Step 6: Generate Embed Code

 

 

  • After saving, return to the Engagement Widget section.
  • Locate your link and click on JS Code under "Embed Code".

 

Step 7: Copy Embed Code or m.me Link

 

 

  • A modal will show both:

    • JS Embed Code (for website integration - recommended)
    • me URL (direct link)
  • Copy the desired code/link.

 

Step 8: Embed in Website (Example: Elementor)

 

 

  1. Open your site’s page editor (e.g., Elementor).
  2. Add a new section or block.
  3. Search for Shortcode widget and drag it into the section.
  4. Paste the copied JS code into the shortcode field.
  5. Click Apply and Publish the page.
  6. Now, your website will display a “Chat” button that redirects to Messenger when clicked.

 

Use Cases

 

  • Lead Generation: Capture user details via Messenger automatically.
  • Customer Support: Provide instant help through a chatbot on Messenger.
  • Marketing Campaigns: Embed CTA buttons in landing pages to boost interaction rates.
  • eCommerce: Assist customers with order tracking, FAQs, or product recommendations.

 

Conclusion

 

Setting up an Engagement Widget in BotSailor helps you bridge your website traffic with Messenger automation. It’s an effective way to streamline communications, qualify leads, and deliver instant responses via chatbot flows.

 

FAQ

 

Can I customize the button design?
Yes, you can change the background, text, and hover colors along with size options.

What is the difference between JS code and m.me link?
The JS code is used for embedding on a website, while the m.me link can be shared directly or used in ads.

Do I need a developer to install this?
No, it's a simple copy-paste task in website editors like Elementor, Wix, or custom HTML pages.

Can I track clicks on the m.me link?
Yes, using the reference ID and Facebook Insights, you can measure engagement.

Can it be added to any website?
Yes, as long as you can paste JS code or use a shortcode, this feature is compatible.

Powered by BotSailor.