Dec 27, 2023 - by Md Balayet Hoshen

Adding Facebook Customer Chat to your website

Adding Facebook Customer Chat to your website

Adding Facebook Customer Chat to your website

Adding Facebook Customer Chat to your website is a great way to provide real-time customer support and engage with your website visitors using Facebook Messenger. Here's a step-by-step guide to help you add Facebook Customer Chat to your website:

Prerequisites:

  • You need to have a Facebook Page associated with your website.
  • You should be able to access and modify your website's HTML code.

Step 1: Create or Access Your Facebook Page

  • Log in to your Facebook account.
  • If you already have a Facebook Page for your website, navigate to it. If not, create a new Facebook Page by following Facebook's instructions.

Step 2: Get Your Facebook Page ID

  • On your Facebook Page, click on "Settings."
  • In the left sidebar, click on "About."
  • Find the "Page ID" or "Page Name" in the "General" section. You'll need this later.

Step 3: Get Your Facebook Page Access Token

  • Go to the Facebook Graph API Explorer: https://developers.facebook.com/tools/explorer/
  • In the top-right corner, select your website's Facebook Page from the dropdown menu.
  • Click on "Generate Access Token."
  • In the permissions window that pops up, select the permissions you need (e.g., "pages_messaging" and "pages_read_user_content"). Click "Continue" and grant the permissions.
  • Copy the Access Token provided.

Step 4: Add the HTML Code to Your Website

  • Edit your website's HTML where you want the Facebook Customer Chat plugin to appear. You can add it to your website's header, footer, or any specific page.
  • Insert the following HTML code snippet:

<div class="fb-customerchat" attribution=setup_tool page_id="YOUR_PAGE_ID"theme_color="#YOUR_THEME_COLOR" logged_in_greeting="YOUR_LOGGED_IN_GREETING"logged_out_greeting="YOUR_LOGGED_OUT_GREETING"> </div>

Replace the placeholders with your information:

  • YOUR_PAGE_ID with your Facebook Page ID.
  • YOUR_THEME_COLOR with the color you want for the chat plugin.
  • YOUR_LOGGED_IN_GREETING with the greeting message when a user is logged in to Facebook.
  • YOUR_LOGGED_OUT_GREETING with the greeting message when a user is not logged in.

Step 5: Save and Publish

  • Save your HTML changes and publish your website.

Once you've completed these steps, the Facebook Customer Chat plugin will appear on your website, allowing visitors to initiate conversations with you via Facebook Messenger.

Please note that Facebook's policies and interface may change over time, so make sure to refer to their official documentation or support for any updates or additional features related to the Customer Chat plugin.

To add Toastr notifications in a Laravel application