How to implement a floating widget on your site

Tip: Check out this training module for videos about touchpoint configuration.

The floating widget is an interactive window, which allows your customers to ask customer service questions and get instant answers, wherever they are on your website.

The widget is displayed constantly on your site, enabling customers to engage at any time. The widget is positioned at the bottom-left or right corner and shows answers that correspond to the question and how it is worded, immediately as a customer begins to type a question. The answers come from your Knowledge Base and guide the customers through the sales funnel, or other processes, according to the nature of the question asked.

The widget can be completely customized to reflect your brand colors and messaging.

  1. In the AI Console, go to Touchpoints > Widgets.
  2. Under Floating Widget, click GET THE CODE and select the appropriate options:
    • Enforce HTTPS - Enforce secure communication of widgets on unsecure web pages
    • Enforce widget configuration - Enforce the script to use a specific configuration base on the Domain API ID (By choosing this option the widget will ignore the widget URL and Knowledge Base)
    • Enforce KB - Set a specific Knowledge Base for the widget
    • Set initial context - Set a context Type and context Value for the widget
    • Get the legacy embedded code - To use the Arcade or Modern skins - please mark this option (legacy code)
  3. Copy the code and paste it in the selected pages on your site.

How to change the look and feel of the floating widget

  1. In the AI Console, go to Touchpoints > Widgets.
  2. Click Personalize under Floating Widget.
  3. If you have more than one Knowledge Base, select for which Knowledge Base you are making this change.
  4. The Settings page for your Widget is displayed. The Settings page is comprised of several tabs, within each of which you can configure your Widget and personalize the look and feel. Below is a table detailing what you can do in each tab.
    Tab Description
    Basic

    The main fields in which you can alter or modify the look and feel of your widget.

    Texts and Colors

    Various fields in which you can change the widget's color and texts, for example, the automatic question, the title and chat and email button texts.

    Position & Size

    Enables you to specify the size of the widget as displayed on your site, and specify its exact position. You can also configure how much it should expand, as well as when and for how long.

    Chat

    Various fields which allow you to completely customize all your chat settings.

    Advanced

    Enables you specify more advanced settings, such as adding a customized footer to all answers, using HTML coding and specifying an action to take place if an answer is escalated.

    FAQ

    You can specify the nature of the FAQs and how they are selected and displayed. You also have to option to add a separate and customized FAQ list to your Knowledge Base.

    Contact Form

    The contact forms allow your users to escalate their questions to your agents.

  5. Click the Save changes button that is displayed, and then click OK. The change is immediately shown in the widget on your website.
  6. Any changes you make are shown in the display of how your widget will look, in the right-hand section of the page. You always need to save your changes for them to take effect, but they will usually do so instantaneously.