Adding Facebook Messenger to Your Website

Let people start a conversation on your website and continue it on Messenger with a customer chat widget.

Notes:

  • It's best to do this on your computer, as your Facebook mobile app may not have the same features
  • You'll need to add administration/editor access to your organisation's page first. If you don't ask someone who does to complete these steps
  • For the widget to appear on your website, you need to do the following:
    • Complete the below steps
    • Make sure you enter an ID NUMBER (not a username) into the "Messenger Page ID" box. (The "Facebook Page Username or ID" box can still contain your page's username).
    • Tick the "Show Messenger Widget on my website?" box.

To create the widget:

  1. Visit your organisation's Facebook page and go to "Settings";
  2. Go to the "Messaging" setting;
  3. Scroll down to "Add Messenger to your website" and click the "Get Started" button
  4. Follow the steps on-screen to setup your greeting message and appearance (note that your widget will always match the colour scheme of your website, regardless of the options you choose during this process)
  5. In the last step, add your website's domain name (i.e. "http://sportz.digital") and then press "Save".
  6. A "Code Snippet" will be generated on the right, which contains some information that we need:
    1. Scroll down to the bottom of the Code Snippet window and find the line that says "<!-- Your customer chat code -->"
    2. Look for the line below which says "page_id=" and then contains a series of numbers - these numbers are your Facebook Page's ID, and we will need them!
      • If you click on the Code Snippet window it will copy it's contents to your clipboard, so you can paste them into a notepad or Word document (or the textarea below) and then extract the numbers. 

    1. Click "Finish" on the Facebook window to save and close the widget.
  1. Back in the SportzDigital Social Media module, paste the Page ID numbers into the "Messenger Page ID" box.
  2. Save your changes!

Did you find this article useful?