Facebook Customer Chat Plugin with LeadFlip

A week ago Facebook switched to Open Beta for a new widget called “Facebook Customer Chat Plugin”. This plugin allows you to put a web messenger widget on your website. You can read more about this on their blog post too.

Currently as it is on Beta not all functions supported like on FB Messenger but we believe that eventually all features will be available.

Right now when you place the widget on your webpage a messenger icon appears on the bottom right corner of your website .

When you click to that button a small popup window appears. If you are already logged in with Facebook on the browser you can instantly start talking. If you a not logged in then instead of your profile picture and name you will see a Login with FB link.

When you click to “Chat Now” button then a chat popup window appears. You can start talking with your FB Bot from this window. All the conversations are also visible from FB Messenger app or website too.

As you know in LeadFlip we have also a Popup Webwidget too. If you prefer that your visitors must be a Facebook user to talk with bot then it is better to use this new widget. But if you want to talk with anonymous users too then your need to use our Embed Widget or Popup Widget.

How to use Facebook Customer Chat Plugin

For advanced operations or customisations you can follow the Facebook Documentation for customer chat plugin. On LeadFlip to make things easier we have created a screen to get neccesary codes requeired for customer chat plugin.

  1. Before placing your widget make sure to whitelist your domain via Facebook tool. Page Settings > Messenger Platform > Whitelisted Domains (Change YOURPAGEID on url)

  2. Create your chatbot project and connect it to your Facebook Page.
  3. After connecting your project you will see a few buttons next to your page name.
  4. Click to “Customer Chat” button and you will see auto generated code for your Facebook Customer Chat Plugin. You need to place that code into your website homepage after <BODY> tag.
  5. That’s all, your widget should be displayed on your page now.