Meta Business Help Centre

Add Chat Plugin to your website

Chat Plugin is a free chat extension that you can install on your website to enable messaging. When people visit your website and click on the chat button, it will send them directly into a Messenger conversation to chat with your business. If people are logged in to their Facebook accounts, the conversations will be saved in Messenger. Otherwise, they can message you as a guest user.

There are two parts to complete the installation. First, you will set up Chat Plugin from your Facebook Page, then you will add the code for the plugin into your website. If you're having trouble with loading Chat Plugin, use our diagnostic tool to check for errors. This diagnostic tool will identify common issues and help you resolve them.

Note: If your website is built on WordPress, or if you use ManyChat or Chatfuel, you can skip the Facebook Page setup and go directly to the Add the chat plugin to your website section.

Set up Chat Plugin from your Facebook Page

  1. Go to your Page's Settings and click Messaging.
  2. Under Add Messenger to your website, click Get started.
  3. From here, you can either:
    • Install manually by clicking Set up. From here, you can select your language, add your website domain(s) and copy the code to paste on your website.
    • Follow the Add Chat Plugin to your website steps below based on your chosen website builder and paste the code on the page(s) where you want the Chat Plugin to appear.
  4. Under Start a conversation, you can create a welcome message and add automated responses for frequently asked questions.
  5. Under Customise your chat plugin options, you can customise the colour, alignment and expansion settings.

Add the chat plugin to your website

After you've completed the chat plugin setup from your Page, you can paste the code directly into your website from your preferred website builder:

WordPress

Note: Make sure you're logged in to Facebook on your browser and that you're the administrator of your Facebook Page.

  1. Go to your Wordpress home page and go to WP admin.
  2. Go to the Plugins menu.
  3. Click Add New.
  4. In the search field, type Facebook chat plugin.
  5. Click Search plugins.
  6. Select the Facebook chat plugin.
  7. Click Install Now.
  8. Click Activate.
  9. You should now see a tab that says Customer chat. Go to the Getting started section and click Edit chat plugin.
  10. Customise your chat plugin and complete your setup.
Customers can now message you from your website, and your messages will be shown in your business Page Inbox.

ManyChat

  1. Log in to your ManyChat account.
  2. Click the Growth tools tab.
  3. Click + New growth tool.
  4. Choose Customer chat from the list of your widgets.
  5. Click Setup.
  6. Click Install Javascript Snippet.
  7. Make sure that your website domain address is included in the authorised list. If not, type out the domain and click Add.
  8. Click Install ManyChat snippet.
  9. Click Copy code to clipboard.
  10. Paste the code onto the website where you want the chat bot to appear.
Customers can now message you from your website, and your messages will be shown in your business Page Inbox.

Chatfuel

  1. Log in to your Chatfuel account.
  2. Go to the Grow tab from the Chatfuel bot dashboard.
  3. Click Enable on the chat plugin tool.
  4. Paste the code onto the website where you want the chat bot to appear.
Customers can now message you from your website, and your messages will be shown in your business Page Inbox.

Shopify

  1. Go to the Admin Panel.
  2. Go to Sales channels. Under Online shop, click Themes to open the theme page.
  3. Under the Current theme section, click Customise.
  4. You'll see the preview of your shop. Click Theme actions.
  5. In the pop-up menu, click Edit code.
  6. You'll see multiple ".liquid" files. Look for the main theme file, usually named theme.liquid. Main theme file content usually starts with <!doctype html>.
  7. Scroll through the code on the right-hand side and find the line starting with <body>. For example, it could start with <body class=“template-{{ request.page_type | handle }}">.
  8. On the line below the <body> code, paste the code from the Facebook chat plugin settings.
  9. Click Save at the top to complete.
Customers can now message you from your website, and your messages will be shown in your business Page Inbox.

Wix

  1. Click Settings in your Admin Panel.
    • Note: Depending on which page you're on, you may need to click Site on the top banner of the page before you go to settings.
  2. Under the Advanced section, click Custom code.
  3. Under the Head section, click Add code.
  4. Paste the code in the Paste the code snippet here section and insert an easily identifiable name (e.g. Messenger) under Add code to pages.
  5. Select All pages, and then Load code once.
  6. Under Place code in, make sure that Head is selected, and click Apply.
  7. Click Publish at the top of the page.
Customers can now message you from your website, and your messages will be shown in your business Page Inbox.

Squarespace

  1. Click Settings in your Admin Panel.
  2. Click Advanced.
  3. Click Code injection.
  4. Paste the code snippet in the Footer section.
  5. Click Save.
Customers can now message you from your website, and your messages will be shown in your business Page Inbox.

Webflow

  1. Navigate to Project settings.
  2. Click Custom code.
  3. Paste the code snippet in the Footer section.
  4. Click Save Changes.
Customers can now message you from your website, and your messages will be shown in your business Page Inbox.

Learn more

PermalinkShare
Was this information helpful?

PLACEMENTS |

Messenger

Back to Home