{"id":3469,"date":"2021-10-25T22:42:00","date_gmt":"2021-10-25T22:42:00","guid":{"rendered":"https:\/\/pickyassist.com\/blog\/?p=3469"},"modified":"2021-10-26T10:02:23","modified_gmt":"2021-10-26T10:02:23","slug":"how-to-add-facebook-chat-widget-integration-into-your-website","status":"publish","type":"post","link":"https:\/\/pickyassist.com\/blog\/how-to-add-facebook-chat-widget-integration-into-your-website\/","title":{"rendered":"How to Add Facebook Chat Widget Integration into your Website"},"content":{"rendered":"\n

If you have website and blog then you might be familiar with Live chat system, when a live chat widget is added into your website or blog it become more interactive and your visitors are likely to engage 10x more than a website without Live Chat Integration. There are 100’s of live chat platform’s who offer free or paid services, however we are not going to discuss about the traditional live chats platforms here let’s discuss about the facebook chat widget integration into your Website.<\/p>\n\n\n\n

What is Facebook Chat Widget and How it Works?<\/h2>\n\n\n\n

Facebook chat widget helps business to integrate the same messenger capabilities extended to your website or blog i.e how people are messaging to your facebook page they will able to message right from your Website or Blog without visiting your facebook page.<\/p>\n\n\n\n

It works similar to any live chat systems so you need to do some basic setup in your facebook page admin platform then copy and paste a code snippet into your website or blog where you want the chat widget to appear. The chat widget will look like as shown below;<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

What are the advantages of Facebook Chat Widget ?<\/h2>\n\n\n\n

The noted advantage is that allows you to continue contacting your customers even after they exit from your website which is not possible to achieve using traditional live chat systems i.e when a visitor contacted you through the facebook chat widget from your website even if they closed your website still you can send them a message and continue the conversation.<\/p>\n\n\n\n

How to Setup Facebook Chat Widget into your Website? <\/h2>\n\n\n\n

You need to have a facebook page and you should be the admin to start this process, just login into your facebook page then navigate into Settings -> Click on Messaging<\/strong> then click on Get Started<\/strong> button under Add Messenger to your website<\/strong> menu as shown below;<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

You will then redirected to another page which looks as below where you need to whitelist your website domain after that click on the Setup<\/strong> button as shown below;<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

When you click on Setup<\/strong> a popup will open in which you need to Select Language, Add Domains, Copy the Code and then paste this into the header or footer of your website <\/p>\n\n\n\n

<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

How to Customise the Facebook Chat Widget Appearance ?<\/h2>\n\n\n\n

It’s possible to customise the look and feel of the facebook chat widget to make it match to your website theme, you need to click on the Customize Your Chat Plugin<\/strong> section as shown below to see the options <\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

How to Integrate the Facebook Chat Widget Code with Your Website or Blog?<\/h2>\n\n\n\n

You need to copy and paste a code into your website in order the widget to start appearing in your website, mostly you can add the code into the header or footer of your page.<\/p>\n\n\n\n

How to Integrate Facebook Chat Widget into a WordPress Site?<\/h2>\n\n\n\n

Note<\/strong>: Make sure you\u2019re logged in to Facebook on your browser and that you’re the administrator of your Facebook Page.<\/p>\n\n\n\n

  1. Go to your WordPress homepage<\/a> and go to WP admin.<\/strong><\/li>
  2. Go to the Plugins<\/strong> menu.<\/li>
  3. Click Add New.<\/strong><\/li>
  4. In the search field, type Facebook Chat Plugin<\/strong>.<\/li>
  5. Click Search Plugins.<\/strong><\/li>
  6. Select the Facebook Chat Plugin.<\/li>
  7. Click Install Now.<\/strong><\/li>
  8. Click Activate<\/strong>.<\/li>
  9. You should now see a tab that says Customer Chat.<\/strong> Go to the Getting Started <\/strong>section and click Edit Chat Plugin.<\/strong><\/li>
  10. Customize your Chat Plugin and complete your setup.<\/li><\/ol>\n\n\n\n

    How to Integrate Facebook Chat Widget into a Shopify Site?<\/h2>\n\n\n\n
    1. Go to the Admin Panel<\/strong>.<\/li>
    2. Go to Sales Channels<\/strong>. Under Online Store<\/strong>, click Themes<\/strong> to open the theme page.<\/li>
    3. Under the Current Theme<\/strong> section, click Customize<\/strong>.<\/li>
    4. You\u2019ll see the preview of your store. Click Theme actions.<\/strong><\/li>
    5. In the pop up menu, click Edit code<\/strong>.<\/li>
    6. You\u2019ll see multiple \u201c.liquid<\/strong>\u201d files. Look for the main theme file, usually named theme.liquid<\/strong>. Main theme file content usually starts with <!doctype html><\/code>.<\/li>
    7. Scroll through the code on the right side and find the line starting with <body>.<\/code> For example, it could start with <body class=\u201ctemplate-{{ request.page_type | handle }}\"><\/code>.<\/li>
    8. On the line below the <body> code, paste the code from the Facebook Chat Plugin Settings.<\/li>
    9. Click Save<\/strong> at the top to complete.<\/li><\/ol>\n\n\n\n

      How to Integrate Facebook Chat Widget into a Wix Site?<\/h2>\n\n\n\n
      1. Click Settings <\/strong>in your admin panel.