Setting up a Facebook Messenger Widget Setting up a Facebook Messenger Widget

Setting up a Facebook Messenger Widget

Maria Scieranska

Objective

Setting up a Facebook Messenger Widget

Applies To

  • Jumper
  • Facebook Messenger Widget

Facebook Messenger chat plugin allows you to integrate your Messenger experience directly into your website allowing your customers to shop then and there.

The Shop on Messenger widget enables your customers to shop your #hashtags within Messenger, without leaving your website. This helps create a single experience for your customers and lets you continue the checkout even if they have left your webpage.

Note: To use the Facebook Messenger Widget, make sure you are connected to at least one Facebook page with your Jumper.ai account.

Procedure

  1. To get started, go to Sales channels >> Facebook.



  2. Now select the Messenger Chat Plugin option.



  3. Now add your site URL, & click on the Add button.
    Important note: Ensure you add the correct site URL as it cannot be altered later. In case you update or add an incorrect URL, just add a new URL for which you want to enable the widget.



    Now you need to add your webpage URL & whitelist the URL for the widget in Facebook Page settings.
    Under the Settings section, click on Page Settings.



    Now click on the Whitelist tab & add the URL that you want to whitelist for your widget.



  4. Here, you will find options to customise your widget view on your site for a better customer experience.
    On the right, you can also view the preview for your Messenger widget.



    Domains:     Allows one to add multiple domains to configure their widget.
    You can add multiple domains & sub-domains (e.g. www.mywebsite.com/products) in the domain option, also you can set your widget theme color according to your website theme.
    Important Note: In case you make any changes to the widget for customization, then reconfiguration & whitelisting of your existing URL would be required, to do so go to Facebook Page Settings, under the whitelist tab delete your existing URL & add your URL again.
    Theme color: Here you can adjust the color of your widget based on your business-required theme color or leave it as default.



    Below is an example of changed widget theme color.



    Greeting message: Here, you can add your greeting message for your customers which will be visible on your widget.



    Guest mode: Allows customers to interact with the widget without signing in to their Facebook messenger account.



    Alignment of the chat plugin: Select your required alignment of the widget for your webpage, from options “left” or “right”, which will be at the bottom of your page.



    Below is an example of a right-aligned widget.



    Below is an example of a left-aligned widget.



    Determine how the greeting dialog will be displayed: You can select any one option between the 3 options, for displaying your greeting dialog.

    1. The greeting dialog is hidden until a user clicks on the plugin.



    2. The greeting dialog is shown and remains open.



    3. The greeting text is shown above the plugin icon, but the greeting dialog is hidden until a user clicks on the plugin.



    Desktop bottom spacing of the chat plugin (Unit will be in pixels): Here, you can specify the widget distance(in pixels) from the bottom of the Desktop.

    Mobile bottom spacing of the chat plugin (Unit will be in pixels): Here, you can specify the widget distance(in pixels) from the bottom of the Mobile.
    Post adding the widget details, click on the Save option to save your widget.



  5. Once saved, copy and paste the below code inside the <body></body> tag of your website & done. Your widget will be enabled on your webpage.



    Note: This widget will be enabled for the specified Domain URLs, in case you want to enable the widget for your sub-domain URLs (e.g. www.mywebsite.com/products), add your sub-domains URLs to whitelisting under Facebook Page settings in Jumper.ai dashboard.

 

Adding a Custom Chat Bubble for Facebook Widget

You can also modify the messenger chat bubble icon on your code by following the below steps:

  1. Along with the widget code, add the below additional code to your website (on the page where the widget is enabled) to customize your personal chat bubble icon to your web page.
  2. Below, you would be required to add your personal icon link for the chat bubble, add the icon link inside the image tag under the source (src) of the image, i.e. <img id="myImage" src="yourimage.png">.
  3. Now replace the page ID (i.e. page_id="474747477474">) with your Facebook account page ID.
<style>
.fb_dialog_content{
 opacity: 0.01;
}
#myImage{
    width: 70px;
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    height: 70px;
    }
</style>
    <!-- Messenger Chat Plugin Code -->
<div id="fb-root" style="display: none;"></div>



<!-- Your Chat Plugin code -->
<div id="fb-customer-chat" class="fb-customerchat"
page_id="474747477474">
</div>

    <img id="myImage" src="yourimage.png" alt="Click to toggle button">

    <script>
    // Get references to the button and image elements by their IDs
const myButton = document.getElementById('fb-root');
const myImage = document.getElementById('myImage');

// Add a click event listener to the image
myImage.addEventListener('click', function () {
    // Toggle the button's visibility
    if (myButton.style.display === 'none' || myButton.style.display === '') {
        myButton.style.display = 'block'; // Show the button
    } else {
        myButton.style.display = 'none'; // Hide the button
    }

});

    </script>


Below is an example of a customized chat bubble using the above method.




Articles in this section