Documentation


1. Install app

Directly go to this link Facebook Messenger - Live Chat to install the app 

Step 1: Log in your Shopify account in App Store. Click the ADD APP button

install-app

 Step 2: You will then be redirected to your admin page and start installing

install

Step 3: After installing, the app will be ready right away for you to use in Apps section

app-section

2. App Configuration 

After installing Facebook Messenger - Live Chat  app, you will be directed to the app admin.

 2.1 App Status and connect Facebook page 

Choose to Enable/Disable app  in the Enable App section. If you choose to disable app, all created settings will be paused until you enable the app again. 

enable-app

2.2. Facebook page 

Login to your Facebook account, you must be the administrator of your Facebook business page or Fanpage

login-facebook

Select pages you would like to connect to and click Next:

select-facebook-page

Give the page access and click Done

give-access

Note: If you choose a page that you are not an admin, the app could not get permission to import messages from your Shopify store to your Facebook page inbox. 

After having connected, it will bring you back to the admin page and continue settings. You can also disconnect/ switch to another page. 

switch-page

2.3 Settings

There are a wide range of options available for you to display your Facebook chat in your Shopify store. 

settingssettings-cont

  • Widget position: adjust the horizontal position of the chat 
  • Margin bottom: adjust the vertical position of the chat
  • Language: A large number of languages are supported in the app to display text on the message box
  • Greeting message: The content you want to put in the pop-up message box
  • Customize tab: these changes only apply on the Desktop version. 

          This option allows you to select icon, text on button, tab size 

           Auto display welcome message box will avoid the issue of double clicks on the chat icon from Facebook default settings. 

  • Advanced custom CSS: allows you to custom button, color, text… by adding CSS code 

Here are some identified classes for you:

- Button: .otFacbookChat .ot-fb-logo.facebook-chat-button

- Message box: As the Message box is loaded directly from Facebook to an iframe, you can not add CSS to Message box. You can only customize with .otFacbookChat .fb-customerchat.fb_invisible_flow.fb_iframe_widget iframe.

As you can see, this method requires knowledge about coding, therefore, if you are not acquainted with codes, we suggest you contact us for further support. 

  • Custom Color: customize the color of your chat to be compatible with your store
  • Mobile chat type: select either live chat or redirect to the Messenger page 
  • Display option

display-option-messenger-chat

 

- Select a specific working dates & time and timezone to show the chat in your store
- Select a device to show the chat icon

- Select specific pages to show the chat icon

Remember to click Save button if you make any changes

3. 6 common errors and how to fix

If you have followed how to add Facebook Customer Chat Plugin to your website and still get the error, there are some possible reasons and quick solutions for them. 

3.1. You have not connected your Facebook page with the app 

Please make sure that you are the admin of your Facebook page and connect to your Facebook page. 

3.2. Your page is under restrictions

When your page sets age or country restrictions, only people who meet your requirement can see the chat on the website, in this case, please check whether your page is set to be published and visible to everyone or not. If not, follow the steps to change. 

page-setting-to-everyone

3.3 You have not whitelisted your domain

Whitelist your domain to connect Facebook to your website, if you haven’t done this, the app could not work correctly. It can not be shown on your store or remained unclickable. Make sure that you have whitelisted your store URL, checking these steps. Please note that you must be the admin of your Facebook page. 

Simply go to your Facebook page -> Select Settings at the bottom -> Advanced Messaging -> Whitelisted domains and paste your store URL

3.4. Your theme conflict or haven’t installed Facebook’s SDK 

It’s not commonly happened but some specific themes that prevent the appearance of Facebook Chat icon, if you encounter these problem, you could simply contact the app developer or you could simply check whether your website include this with the instruction here 

3.5. You set up the working time for your chat 

    On the setting of the app, you choose the working hours and timezone for the app, please test the app within the working hours so you can see it probably. 

    3.6. Your customers cannot send message to your page 

      If you see the chat is totally blank without your settings and you cannot send the message. The reason is your Facebook page setting. Make sure you set your page published and allow people to contact you privately. 

      setting-facebook-message

      All of these common reasons and solutions are able to help you out in most cases, however, if you’re still experiencing the issues, contact us here for further support. 

       

      4. How to check the error why Facebook  chat doesn’t appear on your store

      4.1 Not connect to Facebook page 

      Access your store URL, on the page you set to show the chat icon, press F12 or right click then select Inspect 

      Then click the Network section, look for XHR and click on it. 

      Choose data.json file, if you app_status shows “0”, you haven’t connected your Facebook page to the app yet. If status shows "1", you haven't selected the Facebook page yet. The correct form should show “2” 

      app-not-connect-facebook-page

       

      4.2 Whitelist domain

      Access your store URL, on the page you set to show the chat icon, press F12 or right click then select Inspect. 

      In the Console section, if you see the red line: 

      Refused to frame 'https://www.facebook.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://www.facebook.com".

      This mean that you haven’t whitelisted the domain on your Facebook page. 

      whitelist-domain

      4.3 Working time 

      Access your store URL, on the page you set to show the chat icon, press F12 or right click then select Inspect 

      Then click the Network section, look for XHR and click on it. 

      Choose data.json file, if you choose the working time, the status will show “1”, make sure that you’re checking the chat icon during that time. 

      working-time

      4.4 Conflict theme

      Access your store URL, on the page you set to show the chat icon, press F12 or right click then select Inspect 

      In the Console section, if it shows the red line below, it occurs the conflict or your theme does not include Facebook’s SDK 

      conflict-theme

      5. Messenger icon appears on desktop but not mobile 

      Make sure that you check again the device target on the Setting from the admin page. 

      device-target

      The live chat function on mobile in the app is loading directly from Facebook and totally depends on Facebook itself that the app could not interfere with. Therefore, when Facebook updates API or makes any changes, we could not handle fixing it. As a result, the live chat icon on mobile runs unstably. 

      To make sure it runs smoothly on mobile as well, please choose the Redirect to messenger page option. 

      6. The chat window position is incorrectly displaying the desired location

      Example: "Your chat window is shown on the left side in your front page. How can adjust it to the right side above chat with us button?"

      -  You can fix it in Online store -> Themes -> Action-> Edit code

      - Then you comment the code in the css file as shown below (Assets -> stylesheet.css.liquid):

      7. FAQs

      7.1. When I click on the chat icon, nothing pops up. How do I fix the issue? 

      The messenger box can not be shown on your website due to page's privacy issue below: 

      • You may not be an administrator
      • Age restrictions
      • Private page 
      • Country restrictions

                 Please check and change the setting on your Facebook page

      7.2. The live chat is not working in the mobile version of our website. Is there any problem? 
      • Please check whether you are choosing only desktop display on your page
      • In addition,  the Chat Plugin supports modern popular desktop and mobile browsers except Messenger in-app browsers and Internet Explorer. 
      7.3. Why is the live chat not working in the PC version of our website?
      • Please check whether you are choosing only PC display on your page
      7.4. Can I  change the size of the chat box on my website? 
      • Unfortunately, you can’t change because it is the default setting of Facebook
      7.5. How do I customize the options that my customers will get with the live chat function?
      • You can customize in the part Settings of your Facebook page
      7.6. I changed the language to our language and on my page it is still in English, what should I do? 
      • The problem may be cached on the browser, go to admin to save the settings, then RELOAD to check the page.
      7.7. Can I hide the welcome message? 
      • You can. But sometimes, due to an error on Facebook, you could not be able to hide. 
      7.8. How do I get alerted if someone sends me a message?
      • It might be because you haven’t turned on the notification on your page. Please turn on your notification on your setting page then you will be alerted when your customers message you. 

      Should you need help with the configuration process, please don't hesitate to contact our support center at contact@omegatheme.com.