# Facebook Chat Plugin ## HOW TO CONNECT FACEBOOK MESSENGER VIDEO {% embed url="" %} The Facebook Customer Chat Plugin allows customers to chat through Facebook Messenger on your website. If your website visitors already have a conversation history with your Facebook page, the history will be visible on Facebook Chat Plugin. ![The Facebook Chat Plugin](https://3780664695-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8Z5HZZj-22LRZMRULF%2F-M97dXffFJa78dNgWPuv%2F-M9G_u2Dqruoxlo4oss7%2FThe%20Facebook%20Chat%20Plugin.png?alt=media\&token=ab5ad213-8eb5-4ed1-8972-f06dfc42aeec) This helps create a single experience for your Contacts, and enables you to continue the conversation even after they have left your webpage. However, it requires website visitors to be logged in to their Facebook account to chat. Visitors that are not logged in will be prompted to do so. ## Creating a Facebook Chat Plugin Script **1. Navigate** to ***Settings*** > Channel Settings. **2. Find** the Facebook Messenger channel. ![](https://3780664695-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8Z5HZZj-22LRZMRULF%2F-M97dXffFJa78dNgWPuv%2F-M9GaXznEJV8IZyxFVpk%2FChannel%20Settings%20fb%202.png?alt=media\&token=177f790d-e73e-4fcd-ae83-a9f95a688e3d) **3. Press** the Chat Plugin button. **4. Add** the domain of the website you want to add the Chat Plugin on. **5. Select** a theme colour. ![Facebook Chat Plugin](https://3780664695-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8Z5HZZj-22LRZMRULF%2F-M97dXffFJa78dNgWPuv%2F-M9GbBt8lNbSUVUFr9L8%2FFacebook%20Chat%20Plugin.png?alt=media\&token=97594ec2-4da1-489c-825b-c5cdfd3db463) **6. Press** Next. **8. Add** the script provided into your website. ![Script for Chat Plugin](https://3780664695-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8Z5HZZj-22LRZMRULF%2F-M97dXffFJa78dNgWPuv%2F-M9GbK14GkWLCRPkuORS%2FScript%20for%20Chat%20Plugin.png?alt=media\&token=b957c363-0c1c-4b86-84a2-ddc7634b2f47) {% hint style="success" %} Alternatively, you can send the instructions to someone else, or read our documentation. {% endhint %} {% hint style="info" %} There is a [guide to adding the script to a website below.](https://carliff-1.gitbook.io/yeshellold/facebook-messenger/facebook-chat-plugin) {% endhint %} ### Configuring Advanced Settings {% hint style="info" %} The Script added to your website does not need to be updated if Advanced Settings are adjusted later {% endhint %} In Advanced Settings Facebook Chat Plugin Behaviour can be adjusted. To adjust Facebook chat plugin behaviour: **1. Navigate** to ***Settings*** > Channel Settings. **2. Find** the Facebook Messenger channel. **3. Press** the Chat Plugin button. **4. Press** Advanced Settings**.** ![Advanced Settings](https://3780664695-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8Z5HZZj-22LRZMRULF%2F-M97dXffFJa78dNgWPuv%2F-M9GbQGnAR7YMFMoAuho%2FAdvanced%20Settings.png?alt=media\&token=ff734e2a-0c61-4d5b-909f-9a1fdb788a19) The parameters you can adjust are outlined below. #### Display Greeting Dialog The widget can be set in three modes: * Show: greeting pops open after a set delay * Hide: only the messenger logo will be shown until user clicks * Fade: greeting pops up after set delay then fades away #### Greeting Dialog Controls The following Greeting Dialog controls can also be adjusted: * Greeting Dialog Delay: set the time to pop up in seconds * Greeting message for logged in user: greeting message for users whose browser is already logged into Facebook * Greeting message for logged out user: greeting message for users whose browser is not logged into Facebook #### Add Reference Code A reference code can be added to Contacts who chat with you through the chat plugin. {% hint style="info" %} Reference codes are useful for identifying where a specific contact came from and is great for starting [Automations](https://carliff-1.gitbook.io/yeshellold/automation). {% endhint %} {% hint style="success" %} When finished customizing press the Next then Done for the changes to take effect {% endhint %} ## Installing the Chat Plugin After you are finished customizing the chat plugin, a script for the plugin will be generated. ![Script for Chat Plugin](https://3780664695-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8Z5HZZj-22LRZMRULF%2F-M97dXffFJa78dNgWPuv%2F-M9GbXsnLWf68cRA5EUr%2FScript%20for%20Chat%20Plugin%202.png?alt=media\&token=31c43266-d4ec-4990-82a3-a3bb7fa0cb19) You will have to copy and paste the code in the `` section of your website. Depending on what system you use to create and manage your website, we have created step by step guides to walk you through installing a Chat Widget onto your website. {% content-ref url="../website-chat-widget/install-on-wordpress" %} [install-on-wordpress](https://carliff-1.gitbook.io/yeshellold/website-chat-widget/install-on-wordpress) {% endcontent-ref %} {% content-ref url="../website-chat-widget/install-on-shopify" %} [install-on-shopify](https://carliff-1.gitbook.io/yeshellold/website-chat-widget/install-on-shopify) {% endcontent-ref %} {% content-ref url="../website-chat-widget/install-on-wix" %} [install-on-wix](https://carliff-1.gitbook.io/yeshellold/website-chat-widget/install-on-wix) {% endcontent-ref %} {% content-ref url="../website-chat-widget/install-on-squarespace" %} [install-on-squarespace](https://carliff-1.gitbook.io/yeshellold/website-chat-widget/install-on-squarespace) {% endcontent-ref %} If you wish, you can also simply forward the code snippet along with installation instructions to your website administrator. Select the respective checkbox and enter the email address of someone who can help you install the chat plugin. Once you have copied the code or filled out the email address, press the blue Done button to close the menu. {% hint style="success" %} The Facebook Chat widget will appear on your site once the script has been successfully installed. {% endhint %} ## Troubleshooting ### Chat Plugin Not Showing/Loading **1. Check** if the web page URL starts with HTTPS, Facebook Chat Plugin may not work on websites without SSL certificates. **2. Check** the domain is whitelisted correctly in Facebook Chat Plugin Settings. {% hint style="success" %} Still having trouble? Contact us [here](https://www.yeshello.chat/contact-us)! {% endhint %} ### Chat Plugin Not Showing/Loading (Installed With Wix) **1. Move** the Facebook Chat Plugin to top of the Tracking Tools & Analytics list. ![](https://3780664695-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8Z5HZZj-22LRZMRULF%2F-M97dXffFJa78dNgWPuv%2F-M9GbncailEAf2XsgLjx%2FChat%20Plugin%20Not%20Showing%3ALoading%20\(Installed%20With%20Wix\).png?alt=media\&token=949a3021-ef69-4aa8-a028-3a3b22bd0904) {% hint style="success" %} Still having trouble? Contact us [here](https://www.yeshello.chat/contact-us)! {% endhint %}