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.

2.2. Facebook page

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

You can switch account by Change Account option

Give the page access and click Done

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.

If you do not see the Chat Bubble showing up on your website, please check this article: Why Facebook Chat doesn't appear on your store

2.3 Settings

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

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 of the welcome message will avoid the issue of double clicking 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
Behaviour tab

- 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
Was this article helpful?
Thank you!