Add Facebook Chat widget to the website

How to add a Chat widget to your website

In this document, you will learn how to add a live chat widget to your website. Currently, we support you to add a Facebook Messenger chat widget to your website or landing pages.

Create a Customer Chat widget You can go to your Facebook Messenger channel, and then go to Tools, and in the widget section, you can create a new widget.

Select Customer Chat in the dropdown, as per the instruction below:

Widget Settings

  • Opt-in Flow

You can easily set up which of the chatbot flows you want to trigger when the user starts a live chat.

Simply choose a sub-flow, and select the flow you want to trigger.

  • Install Javascript Snippet

When you click the Install Javascript snippet button, it should popup the window below:

You should copy the script and paste the script to the header of your website or landing page.

Also, make sure your domain is authorized as well. If not, you can add your domain to the Authorize website section.

After you install the code to your website, refresh the page, the chatbot icon should show up on the website.

  • Customize the chat icon color

There are extra options to customize the color of the chat icon.

You can use the hex code to match your brand. Please note the preview will not change, but it will take effect on the live website.

  • Set up different greeting messages for logged in or logged out user

You can also set up different greeting messages for the login/logged-out user.

  • Configure when your chat icon should show up

in these settings, you can set up the time delay and also the open behavior of the chatbot icon.

You can choose to simply show the messenger bubble icon or you can choose to open the chat window when the page loads.

Please note that this will only show up when the customer is visiting your website for the first time.

  • Turn on/off of the guest mode

Guest mode is enabled by default for every Facebook page. To disable this feature use the link mentioned on the page, scroll down to the “Add Messenger to your website” section and click the “Get started” button. In the opened window you’ll need to find the “Let People Chat as a Guest” setting and disable the corresponding toggle.

Please note, you will see the option if you are the owner of the page.

The detailed instruction to turn off/on guest chat is below:

Last updated