Customize widgets

In this article, we are going to go over the steps on how to create and customize your widget. To configure the widget, navigate to Channels and Numbers located at the bottom left → Live Chat → Create Widget.

Each Live Chat widget configuration can support both web and mobile in-app widgets and you can organize different configurations for different purposes. For example, you can have two configurations (production and testing) that are linked to different domains and mobile app profiles. Or you can have separate production widgets for different purposes such as for mobile app or website.

Every widget is an entity where conversations are associated with customers and can be routed to the Agent Queue using the Routing option.

Filter parameters:

• Status – Each widget configuration can be Active orInactive. Use the option to filer widgets by status in case you have more widgets.
• Type – Each widget configuration can be associated both for mobile applications and websites or separately. Filter by widget type to quickly find required widgets.

Settings

With widget configuration, you can define how your widget will look like and work, as well as set up security options. When creating the widget, the only mandatory field is the widget name, and you can also set up the following features:

• Name - Widget name which will be used in routing and conversations to identify where your customers’ messages come from.

• Widget ID - Unique widget configuration ID.

• Display the widget - The trigger that enables widget configuration. The default state is disabled but you can enable or disable it at any point. e.g., if you want to enforce turning off the widget on your website, move the toggle to disable state and the widget will disappear for your website customers.

• Multiple threads - End users will be able to start simultaneous chat conversations with multiple agents. Multiple message threads will be used to archive all chats. This cannot be turned off once enabled.

• Widget language - Select the language to be applied to widget phrases.

• Try Widget Demo button - Check out how your widget configuration works in practice.

• Calls - If you have a WebRTC channel and Live Chat provisioned, as well as Live Chat Calls turned on in the widget configuration, you can have calls and screen sharing for mobile in your widget.

''Send a message''	Input widget field
''{Agent Name} joins the conversation''	Automatic event when an agent is assigned to the conversation
''Conversation is closed''	Automatic event when a conversation is closed
''Upload failed. Max file size is 10MB.''	Validation message in the input field when an attachment exceeds allowed size

All widget styling will be automatically available on your website when you click the Save Widget button.

Calls

EARLY-ACCESS

Instead of sending messages, agents can use calls and screen sharing in Live Chat mobile to quickly resolve more complex customer issues without having to leave the chat or application. Customers are able to share the screen, which makes it much simpler and quicker for them to receive the guidance and answers they require. To have Calls in mobile, you need to have:

• APP to APP type of the WebRTC application set up
• Live Chat enabled
• Calls turned on in the Live Chat widget configuration

Besides this, the following code work for Mobile SDK indicators needs to be applied:

• Android (opens in a new tab)

• iOS (opens in a new tab)

Once the call/video is ended, the supervisor can check the linked recording that also appears in the Recordings tab.

Theme

Here you can define the widget layout and appearance on your website.

• Widget Title - Widget header title can uniquely identify your widget purpose for customers or represent your brand name.
• Logo - Upload your brand logo which will be displayed on the widget header. Recommended size 300x300px.
• Primary color - Widget header, customer messages bubbles, and send button color. Select an existing color or enter a HEX code from your brand book.
• Primary text color - Customers’ text message color.
• Background color - Messages background color.
• Widget Icon - Upload your widget icon and set up how the widget will be displayed in a collapsed view on a website. Primary color settings are applied for default icons. Recommended size 300x300px.
• Widget position - Define where you would like to place the widget icon on the website. The bottom right corner is the default placement.
• Display the watermark - Allow to show the Infobip watermark section in your widget

Agent and Avatar settings

Default agent and bot avatars feature allows for more flexibility in your widget layout configuration. This is where you can configure your default avatar which will override the agent avatar with a unified brand icon.

Also, businesses may sometimes have strict security policies that do not allow them to expose agents' names to the end user. Now you can use the Hide agent identity option to configure a default public name for all agents, e.g., “Consultant” or “Support”.

Click Save Widget to apply changes.

Advanced customization

For more information about Advanced customization, visit this page.

Audience and availability

In this section, you can configure the widget audience, and safelist domains, and define working hours when your widget is available.

Widget visibility

Visitors and authenticated customers – Widget will be visible for your website visitors (non-authorized customers) and customers who logged in on your website. Learn more about visitors and authenticated customers.

Authenticated customers only – Widget will be visible to the customers who logged in to your website. Read more about widget customer authentication.

Web pages and applications

Pages

Use these options to safelist domains where the widget will be implemented or define specific pages on which the widget will be visible. 
The field supports multiple entries with “,” using a comma as a divider. Domains should start with a full name, e.g.: “https://domain.com (opens in a new tab)".

Mobile Applications

Define the mobile application profile to connect the Live Chat configuration for your in-app chat. Only one mobile application profile can be linked to a particular Live Chat widget configuration.

For test purposes, you can check how in-app chat works in practice by connecting the Demo application (opens in a new tab) mobile profile.

Scheduling

Based on your time zone, you can define working hours and agent shifts if you do not have 24/7 availability.

When you define the working hours, the widget will not be visible on your website outside those working hours.

Pre-chat forms

Pre-chat forms are those forms displayed to customers before they even get to chatting in LiveChat. Consider this to be a prerequisite to even start the chat.

These forms collect information about the end user based on the list of questions you have added to the pre-chat form.

The main values Infobip brings here are:

• Increase the creation of the leads (have chats with known users that you have basic information about, and continuously enrich the profiling data).
• Obtain important business information (name, email address, phone number, interest).
• Decrease spamming or irrelevant conversations that are hindering agents' capacity or bot sessions.
• Allows you to hide your email address to avoid spam. Have your visitors contact you only via LiveChat and start gathering basic information.
• Qualification based on the type of the request before escalating to available agents (this way, you have a structured customer experience to collect certain data before the request is routed to available agents).

Within the Live Chat widget, you can set different pre-chat forms for:

• Leads - This is an anonymous user, and not trusted yet.
• Customer - A known user, and considered as trusted based on the received Personalization token.

For more information about Pre-chat forms, click here.

Welcome message

First impressions matter. Use this option to compose a message to greet your customers or suggest how to start over a conversation again after the previous conversation was over.

When configuring the Welcome Message, you will see two main parts:

1. Welcome message - The first message your customers see when they join the chat for the first time.

2. Repetitive message - The suggestion that is triggered automatically in the chat widget after the previous conversation has been closed. You can use the same content for both the repetitive and welcome messages or you can create a custom one.

You can enrich each message with certain elements that can help you make your greeting more recognizable and ease into a conversation for your users:

• Image - Add an image that will grab your users' attention
• Text - You can use rich text formatting to highlight important content or add emoticons for additional message engagement
• Card buttons - Specify additional action with URL or custom button payload for your chatbot
• Quick Replies buttons - Predefined answers that are a great resource to be used in routing to a specific queue of your agents or as keywords in Answers chatbots

Quick replies

Make a conversation seamless and natural by adding quick replies buttons.

Each label serves as an automatic postback message when the end user clicks on one of the quick replies.

Predefined answers are a great resource to be used in routing to a specific queue of your agents or as an intent in Answers chatbots to automate the first touchpoints with your end users.

You can arrange the order of your quick replies by a simple drag-and-drop and use the preview option to get a sense of the experience your end users have while chatting.

Multiple languages in automatic messages

The language on the web and in the app can be customized by the end-user to suit their needs. This feature enables setting up multiple languages strategy on one live chat widget through multilingual automated messages such as:

• Welcome messages
• Repetitive messages
• Quick replies
• Buttons
• Eye Catcher messages

In the Welcome message option you can set up the multiple languages strategy for:

• Welcome text
• Cards Buttons (optional)
• Quick Replies (optional)

Choose the Translation tab and turn on the translations by clicking the switch and the Activate Translation button in the module (alternatively, you can add the translations first by following the instructions listed below; after adding all translations, enable the Activate translations switch and save the widget).

Once the translations are activated, select the language(s) to translate the welcome and repetitive messages by clicking the Add Translation button that opens the Translation page with the following features:

• Inactive/Active slider
• Add Language button
• Remove All Languages button
• possibility to add translations for:
• Welcome message
  • Welcome text
  • Card buttons
  • Quick replies
• Repetitive message
  • Welcome text
  • Card buttons
  • Quick replies
• Cancel
• Save Translation

Clicking the Add Language button opens the language menu where you can search for and select the wanted language(s) by clicking the Add Language button. Once you add the language(s), they are displayed in the Languages module. After adding the translation(s) and editing the necessary details, click the Save Translation button.

Once you save the translation(s), you are taken back to the widget editing page where you need to Save/Create the widget by clicking the appropriate button and you can edit the translation(s) as needed by clicking the Edit Translation button.

Additionally, in order for the feature to work properly, it needs to be combined with the Language Web API (opens in a new tab), followed by a platform-specific plugin (e.g., Android). By doing this, the client is informing us about the language preference made by the user on the website or mobile application. Having this information allows us to display the correctly configured language variation as opposed to a random configuration.

Installation and security

This section contains the snippet code, widget installation referrals to your website, and security settings.

For detailed information on how to install a web widget, refer to the Web Widget Installation section.

Secret keys

Infobip applies high-security standards to encrypt widget conversations and your customers' identification. All authenticated customer sessions are encrypted with security keys, otherwise, they won’t be authorized as customers within the Conversations session.

For more information about authorized customers, refer to the authenticated customer (opens in a new tab) section.

Chat visitor session timeout

In this section, you can adjust how long the chat session will be active once the customer interacts with it.

This chat session timeout is a session limitation mechanism, called Idle Time To Live (ITTL) and it controls the timeout period and defines when a session will expire. The session starts when the visitor sends their first message and it expires after a certain period which you’ve defined when configuring your widget. The timeout starts the countdown when the visitor leaves your website.

Let’s say a visitor landed on your website, initiated a conversation, got the answers they needed, and then left. In case the visitor comes back, they will be able to see their previous conversation.

Mobile customization

To help our clients effortlessly represent their brand's visual identity and voice, even more mobile customization possibilities are offered for the Live Chat widget. Providing this option through an SDK solution enables you to adhere to the brand's visual identity. The client is able to customize their mobile Live Chat experience with the following options:

• Customizable native message composer:
  • Attachment icon and behavior
  • Sent message icon and behavior
  • Message composer's colors, padding, shapes, background, shadowing, etc.
• Possibility to replace the message composer with a native composer

To find out more about customizing the in-app chat, see the links below:

• iOS (opens in a new tab)
• Android (opens in a new tab)

Features

A variety of Live Chat widget features set you off on a unique user experience that your customers will enjoy and benefit from.

• Message statuses - All sent messages are indicated with a status (sending, delivered, seen), so the end user can see if their message has actually reached the intended customer representative
• Conversation real-time events - End user can see in real time when an agent joins the conversation, when they are typing and also when the conversation has been solved
• Conversation history:
  • Leads chat history is shared automatically across multiple tabs of the same browser.
  • Leads' conversation history retention is controlled by the ''leads chat session timeout'' parameter.
  • The widget stores the leads session and its history for 24 hours by default.
• Authenticated customer history supports seamless sharing across all sessions of the authenticated customer. e.g., customers can be logged in to the mobile app and have a session on the website - and all messages are synced in real time.
• Interactive card buttons - Functional actions are ''open URL'' or ''postback reply'' with a button keyword. Limited to 3 interactive buttons per message. Interactive buttons are available in interactions over Answers (opens in a new tab).
• Attachments - Images, video, and pdf attachments are rendered in the widget preview. Other types of attachments are available for download only. Note that file size limit is 10MB. You can send attachments inside the in-app chat from your media gallery or captured from your camera device
• Widget icon (launcher) - Indicates received and unread messages. You can customize the widget icon to an animated gif to focus additional attention on chat indication.

• Widget surveys - Serve for analyzing customer feedback for a particular conversation. According to the configured Conversation Surveys, the widget triggers an interactive bottom banner - which the end user can dismiss anytime. Besides a quick rating on the conversation experience (e.g., happy / not happy), the end user can write additional comments. A push notification is triggered to transfer the end user to the in-app chat survey if they have a mobile app with the in-app chat. The feedback window is available for 1 minute (default) and if the end user is inactive during that period, the survey will not show up out of context of the ongoing conversation.