Chat Widget Design

Modified on Tue, 8 Apr at 6:37 PM

Who can use this feature?

The instructions take you through all the sections of the chat widget editor.

You must be an 'Account Holder' to access this area of the platform

This video shows a general overview of chat widgets, where you can find the Talkative HTML import code which you will use to add Talkative to your websites and how to version control your new widget.
For more information on this please see the below articles:
Widget Versioning for Customer Scripts
Adding Talkative Scripts To A Website
Updating your Chat Script Versions

This video shows how a chat widget can be made live by publishing a draft, how you can configure multiple different widget types and how to make chat widgets show on certain pages on your website.

This video tells you how you can access the widget editor on the Talkative platform, the first steps in designing your widget. This video will also guide you on how to name the new widget, and update the widget to the latest software version (This is useful for when Talkative updates the widget editor with new features). This also shows how you can preview and test a new widget.
For more information on this please see the below articles:
Updating your Chat Script Versions
Ability to share Widget previews with other colleagues

This video is focused on the design elements of the widget, this includes aspects such as the colour theme, widget location on your website, custom images and avatars.
For more information on this please see the below articles:
User & Chatbot Avatar Images / Profile Photos
Adjust chat widget dimensions, positioning & full screen mode

A language string is a piece of text that displays on the talkative application. Some examples are messages that will display when a customer is in a queue, or the message that displays when an agent requests a video call. This video demonstrates how these can be edited and applied to the chat widget.
For more information on this please see the below articles:
Configuring Widget Language Strings

The chat button is the icon that can appear at the bottom of your website that allows customers to open the widget. This video shows how you can edit the theme of the button, how to add custom images, how to change the shape, add text and change the positioning. The video also shows how an additional chat button can be configured to display under prerequisites that you can set. This is useful when you want a new button to display on a mobile phone browser for example.

This video shows how to configure settings relating to privacy such as setting a URL to your privacy policy that customers can click, if you wish to log which URL's your customers visit before starting a chat or if agents can see a preview of messages that customers are typing.
For more information on this please see the below articles:
How to Update the Privacy Policy on the Talkative Chat Widget Editor

A card is an element of the chat widget that displays when the widget is open. These elements include buttons that can open a URL or start a chat, queue status messages, images and video's/gifs. This video shows how these can be set up and configured to do a number of actions. For a card to display, a standby phase needs to be configured (Part 9).
For more information on this please see the below articles:
Displaying Average Wait, Open, & Close Times
In-Queue Wait Messages
Creating an Offline Email Card
Displaying and Triggering Email Forms Within Chat Widgets

The standby phase is similar to setting up visibility rules to cards that you have created. This video shows how you can set what design cards are displayed based on rules that you can configure. The standby phase also contains settings to control certain behaviour aspects of the widget when a chat is not active.
For more information on this please see the below articles:
How to Auto Start an Interaction when Chat Button is Pressed

This video shows how you can configure various settings relating to the live chat, live video and analytics capture from within the widget. The chat section allows you to configure aspects such as translations, file uploads, fullscreen settings and if a user can request a transcript. The video section lets you configure additional full screen settings, what aspects of a video call is enabled (Camera, microphone and screenshare), if the customers audio and video should auto start and the quality of service. The Analytics section controls aspects such as enabling Google Analytics tracking or adding a custom tracker.

Data collection forms are a series of questions that the widget can ask a customer before a chat commences, which are then stored in the interaction data. Common questions are names, emails and phone numbers. The data stored can then be referenced later on using canned messages or the chatbot. This video shows how these can be configured and edited.
For more information on this please see the below articles:
Pre-Interaction Data Collection

Wait messages are messages that can be sent to a customer while they are waiting for an agent to accept their interaction when waiting in a queue. The video shows how messages to customers can be sent as they wait in the queue, and how to set a data collection form if the queue goes offline when customers are waiting.

Feedback forms are special forms that customers can fill out to share how they found the chat experience. This video shows how they can be enabled, how custom forms can be created and used and when the forms are able to be filled out.
For more information on this please see the below articles:
Post-Chat CSAT Feedback Surveys & Reporting
How to Enable/Disable Header Feedback Buttons

The screen settings control how the widget behaves when a customer with a certain screen size starts a live chat. Using this you can configure when the widget goes full screen automatically. The video also explains some of the basics when using API's and Programatic Actionables. The video also delves into the advanced setting section which contains some miscellaneous settings such as hiding the widget button, disabling the fullscreen button, font families or where data is stored.
For more information on this please see the below articles:
Using Programmatic Actions