Set Up the Facebook Chat Plugin

modified:

The Chat Plugin allows you to integrate your Messenger experience directly into your website. This plugin allows your customers to interact with your business anytime with the same personalized, rich-media experience they get in Messenger.

The Chat Plugin automatically loads recent chat history between the person and your business, meaning recent interactions with your business on messenger.com, in the Messenger app, or the Chat Plugin on your website will be visible. This plugin helps create a single experience for your customers. It enables you to continue the conversation even after they have left your webpage—no need to capture their information to follow up. Just use the same chat in Messenger.

The Chat Plugin supports the following:

  • Text Messages
  • Video/Image/Audio/GIFs
  • Postback Buttons
  • URL Buttons
  • Call Buttons
  • Text Quick Replies
  • User Phone Number Quick Replies
  • User Email Quick Replies
  • Sender Actions
  • Persistent Menu

Before You Start

You will need:

  • A Facebook Page for your website linked to the Meta Business Suite
  • The pages_messaging permission
  • A Page access token is requested from a person who can perform the MODERATE task on the Facebook Page

The Meta Business Tools Terms apply in connection with your usage of the Chat Plugin.

Set Up the Chat Plugin

You can use the Meta Business Suite or implement the plugin programmatically to include the Chat Plugin on your website.

Use the Meta Business Suite (Recommended)

Step 1. Navigate to the Meta Business Suite.

Step 2. Select your business' Facebook Page in the left navigation menu dropdown menu. You may need to hover over the menu to expand the full menu.

Step 3. Select Inbox in the left side navigation menu.

Step 4. Click the Settings button. Then click on View all settings.

Step 5. Select the Chat Plugin tab.

Step 6. Pick the setup method and follow the instructions:

  • Standard - Get the code to add the plugin to your website. This setup includes the Facebook SDK for JavaScript implementation code.

Step 7. Copy your page id from the "copy code" page

Step 8. Add your page id code to the system (Settings->System->Configuration->messangerPageId)

You can also use the Meta Business Suite to customize an automated welcome message to help start conversations and to customize your Chat Plugin to complement your brand.

Be sure that your page is published:

You can do that in Page Settings-> Page visibility. The chat plugin will not appear in the /shop if the page is not published.