Getting Started with Facebook Chat

In this article

  1. Adding the content
  2. Triggers and Display settings
  3. Appearance of the widget

1. Adding the content

The process of creating your Facebook Chat starts with adding the needed info on the Content tab.

First of all, you need to connect your widget to Facebook:

Choose the Facebook page you would like to connect to the widget:

Then move to the next sections such as Chat Bubble, Chat Header, Welcome Message, and Start Chat Button.

  • Chat Bubble
    • In this section, you can choose the bubble icon and type the text for the bubble if needed:

  • Chat Header
    • Here you can choose to show info from your Facebook page or set a custom name and picture of the person in chat (Upload from Computer or Choose from Library): 

    The Caption section will let you choose the most appropriate Reply Time text in the menu or add your Custom text to display below the username:

  • Welcome Message
    • Here you can change the message in the chat window:

  • Start Chat Button
    • This section allows you to change the button text and turn on/of button icon:

    2. Triggers and Display settings

    On the next tab of your Facebook Chat widget you can adjust display settings using 4 sections - Position (1), Chat Display Settings (2), Open Chat Triggers (3), and Notifications (4): The Position section allows you to change your widget's position and alignment:

    In the Chat Display Settings section, you will have the opportunity to:

  • Set the Pages where your widget will be displayed:
    1. All Pages – with the help of this option the widget will be displayed on every page of your website
    2. Excluded Pages– if you choose this option, the widget will be displayed everywhere except for these pages
    3. Specific Pages – you can select this option to display the widget only on particular pages of your website

    If you'd like to display the widget on the homepage or hide it from your homepage, this article will help you - How to display Facebook Chat only on homepage or exclude it from homepage

  • Choose Devices where you want to see the widget:
  • Select the category of Visitors you want to display the chat for:
    1. All visitors – all your visitors
    2. New visitors – visitors who have come to your website for the first time
    3. Returning visitors – visitors who had been on your website before
  • Set Date and Time where you can tick the days you need your chat widget to be active on your website (1). Also, you're welcome to set the start & end time and the preferred time zone if necessary (2).
  • The third section in display settings is Open Chat Triggers. Here you can choose the type of your website's visitor behavior that will automatically open the chat window:
    1. Time on Page – set the time in seconds a website's visitor has to spend on the page to open the chat
    2. Time on Site – set the time in seconds a website's visitor has to spend on the website to open the chat
    3. Scroll Position – set the scrolled page percentage for the window chat to open automatically
    4. Exit Intent – enable this setting to open the chat window automatically every time a visitor intends to leave the website or close the browser tab

      Important

      Please keep in mind that you're able to use only one trigger at a time. In case you set up multiple triggers at the same time - none of them will work.

    The Notifications section will let you keep or remove the red badge to draw visitors attention to the chat window and make the notification about one new message display in the browser tab once the chat window opens:

    3. Appearance of the widget

    When you end up with the display settings of your widget, you can move forward. With the help of the Appearance tab, you can adjust how your widget will look using these 4 sections - Colors (1), Bubble Animation (2), Start Chat Button (3), Custom CSS (4):

    And here’s what you can do:

  • Choose your Colors. You're welcome to change Bubble Background Color, Bubble Icon Color, Button Color, and Header Background Color:
  • Turn off/on your Bubble Animation and set animation interval in seconds:
  • Choose Button Corner Radius:
  • Add a CSS Code. This section will let you add the CSS code for your widget customization:

    • In case you faced difficulties using the widget or if you still have some questions about its functionality, please contact our Support Team, we will be delighted to help you!

    If you think that our widget is missing any features, you're always welcome to leave your feature request in our wishlist tool. We will be happy to consider all the suggestions for their realization in future app updates.

    Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

    Still need help? Contact Us Contact Us