Getting Started with WhatsApp 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 WhatsApp Chat widget starts with adding the needed info on the Content tab. 

First of all, you need to add your WhatsApp phone number:
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 set a picture of the person in chat (Upload from Computer or Choose from Library). Then, you're able to type the name of the receiver: 

    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 WhatsApp 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
  • 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
      You can activate multiple triggers simultaneously. In this case, the trigger which activates first will be prioritized.
      For example, if you set both the Time on Site trigger for 5 minutes and the Scroll Position trigger for 80%, the chat window will open based on whichever condition is met first. If visitors scroll quickly, the window opens due to the Scroll Position trigger. If there's no scrolling, it waits for 5 minutes before opening.

    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 article answer your question? Share your feedback: Thanks for sharing your feedback. It helps us grow! There was a problem submitting your feedback. Please try again later.

    Still looking for assistance? Contact Us Contact Us