Search... Close

Shared Components

Getting started

To get started with Live Chat, create your widget first. There are various ways how you can customize the widget and test it out on your website before launching it for your customers. During the testing phase, you will have the opportunity to try the demo app and simulate the experience as if it were your own app. You can set up the widget to be used only for the web or you can create one for mobile.

Web widget

This article covers the steps needed to install a web widget on your website.

Before we continue, let’s mention a few important terms that you will see pop up throughout the documentation:

Widget – A UI component on your website where your customers start a conversation. The Widget component includes API to manage your customer chat sessions. Messages sent through widgets can have the following statuses: Sent, Delivered, Seen, and f/ailed to send. If a message failed to be sent (for example, no internet connection), there is an option to retry.
Secret key – A unique private key to generate a personalization token according to JSON Web Token (JWT) technology.
Personalization token – A specially generated JSON Web Token (JWT) for authenticating customers and their identification in the widget. The personalization token is generated on your backend service. Find out more about the personalization token generator.

Installation

In this section, we explain how to create and install the web widget on your website.

DO YOU HAVE AN INFOBIP ACCOUNT

To use the Infobip platform, you need credentials. If you already have an Infobip account, log in to the web interface. Otherwise, create an account.

Log in to the Infobip web interface and navigate to the Channels and Numbers module located at the bottom left > Live Chat > CREATE WIDGET > Installation & Security.
Copy the snippet code from the Installation & Security section.
Locate the main HTML frame in your website source code and paste the script code in between <head> tags.
Save it and deploy your website application. The widget will be visible on your website immediately.

Example:


(function(I,n,f,o,b,i,p){
I[b]=I[b]||function(){(I[b].q=I[b].q||[]).push(arguments)};
I[b].t=1*new Date();i=n.createElement(f);i.async=1;i.src=o;
p=n.getElementsByTagName(f)[0];p.parentNode.insertBefore(i,p)})
(window,document,'script','https://livechat.infobip.com/widget.js','liveChat');

liveChat('init', '');

PRO TIP

If your web application is a single-page application (SPA), then it's sufficient to put the snippet in the main static HTML frame. Otherwise, any static HTML is preferred. The other option is to put the snippet into any HTML page where you want to use the snippet. However, bear in mind that only one HTML page with a snippet should be displayed to your visitors.

Depending on how you configured the widget, that’s how your website visitors will see it. For website visitors, you may need to configure and customize the chat session timeout. We recommend you set the session timeout to 24 hours.

Widget can be used on both HTTP and HTTPS websites, but we strongly recommend you use it on HTTPS websites only. Due to insecure nature of HTTP, the website content can be tampered with by a malicious attacker, making the widget unsafe to use for sensitive communications.

NOTE

If you do not configure customer authentication for the web widget, all website visitors will be flagged as leads by default.

Change language

You can use API to customize the language for a specific set of users who may be reaching out to your brand.

All widget APIs need to follow this structure:

liveChat(command [, input] [, output handler callback function]);

The callback parameter is optional for handling errors from the Live Chat widget (no connection, connection lost, bad request, etc). For all commands, input is always required.

To change the widget language to be different than the default language in the web interface, use the Widget API set_language method:

liveChat('set_language', '[desiredLanguage]');

e.g., Portuguese:

liveChat('set_language', 'pt-PT');

We currently support the following languages:

tr-TR (Turkish), ko-KR (Korean), ru-RU (Russian), ja-JP (Japanese), zh-TW (Chinese), es-ES (Spanish), es-LA (Spanish), pt-PT (Portuguese), pt-BR (Portuguese), pl-PL (Polish), ro-RO (Romanian), ar-AE (Arabic), bs-BA (Bosnian), hr-HR (Croatian), el-GR (Greek), sv-SE (Swedish), th-TH (Thai), lt-LT (Lithuanian), da-DK (Danish), lv-LV (Latvian), hu-HU (Hungarian), it-IT (Italian), fr-FR (French), sl-SI (Slovenian), uk-UA (Ukrainian)

NOTE

In case your desired language is not supported, then the language configured for the widget via the web interface is used.

Test

Test Live Chat scenarios without a single line of code. When you create a new widget or modify an existing one, check how it works in practice with the Live Chat demo functionality.

Start Widget Configuration

Open your widget configuration in the Channels and Numbers module located at the bottom left> Live Chat > and select your widget.

Click on the TRY WIDGET DEMO button to test your widget.

Showcase Page

The Showcase page allows you to test Live Chat with Conversations and Answers emulating the experience you would have if it were your own website.
During the demo, you can verify cases with your leads and authenticated customers.

Live Chat widget on the testing page allows you to control different visibility options:

Display the widget – Controls visibility of the widget on your website
Pages – Safelists domains and pages where your configured widget is visible to your customers
Scheduling - Schedule the timeframe for the widget to be visible to customers on your website

Simulation Settings

By default, the showcase page starts with a Lead. This case simulates a situation where a visitor is browsing on your website.
To simulate an authenticated customer session click LOG IN. The authenticated customer would be the one who logs in to your website.

The Showcase page uses your email address as a username for the authenticated customer session. To reset your Live Chat session back to visitor, click the LOG OUT.

Test Agent Experience

Once you have sent the first message in the Live Chat widget, click the TEST AGENT EXPERIENCE button to open the agent panel with the conversation you initiated from the showcase page.

If you closed the conversation from the agent side, just send a new message from Live Chat to open a new conversation and the button will be active.

Start Conversations as a Visitor

This case emulates a situation where the end user comes to your website and asks a general question. At this moment, you do not know their identity, and they are just a visitor on your website.

Send your first message from the showcase demo page chat.
Click the TEST AGENT EXPERIENCE button to open the dialogue in the Agent panel.

Live Chat - Agent experience with visitor in agent panel

Upgrade Conversation From Lead to Authenticated Customer

One of the most common cases is when you need a trustful session to verify the end user asking for support. However, users may start a conversation even before they are logged in to your website.

We handle this in a way that once your end user proceeds with signing in on your website, the widget will show the previous conversation and the agent will then see the identity of the user who logged in. The end result here is that the incipient conversation will be preserved and upgraded to the authenticated customer conversation.

Click LOG IN in the Simulation settings ongoing conversation on the showcase page and your chat session will automatically be upgraded to a chat with an authenticated customer.

If you've had previous conversations as an authenticated customer, the widget will show the history above your current conversation messages.

Reset Authenticated Session

Once the end user logs out from the website, they are treated as untrusted and the authenticated session will be reset to the visitor session once again.

Click the LOG OUT button to simulate an authenticated customer logging out from your website.

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

NOTE

Pre-chat forms are available only for the Live-Chat web widget.

Configuration

NOTE

If you are interested to try out Pre-chat forms during the Early Access phase, contact your Account Manager.

Once set up, you'll see the Pre-chat forms appear in your Widget configuration.

Here you'll see 2 different settings options:

Customers pre-chat forms (intended for authenticated customers on your web page)
Leads pre-chat forms (intended for possible leads/new customers coming to your web page)

If this is your first time creating a new form, the list will be empty (once you have created forms, all will be visible on the list). So, proceed by clicking the Create new form button.

Then you're redirected to the Form builder. While building your form, you can add any component and set any form attributes you may need (field name, drop-down menu options, etc.).

Clicking on the dragged element in the builder shows different configuration options on the right-hand menu.

Here you can set element names, mandatory and optional questions, etc.

IMPORTANT

In this first Early Access phase, attribute mapping in People will not work and data from these forms is not automatically stored in the People module.

Once you have set all your preferred form data, click on the Activate button and you will be redirected to the widget configuration.

The form you had just created will be preset and you can see it on the widget preview on the left side of the widget configuration.

To be able to use your saved forms, all you need to do is click on the Save Widget button to confirm the changes.

Leads and Customer Behavior With Pre-chat Forms

The flow goes like this: Customer opens the chat > Pre-chat form is displayed > Customer submits the form > Welcome message is displayed > Chat can start.

Your leads and customers will see the pre-chat form for every new open conversation.

Agents will see the data the users have entered in the form as part of specific messages in the agent panel.

Customer Experience

This is what the pre-chat form looks like on the customer's screen.

Agent Experience

This is what the pre-chat form looks like in the agent panel in Conversations.

Multithreading

Live Chat supports multiple chat sessions being opened at the same time. This way the end users can use multiple chats to resolve different issues they may have.

Previous sessions started by the same end user are also preserved so the agents can have a better overview of the current issues the end user is experiencing.

To use Multithreading in Live Chat, you need to enable it first. Navigate to your Live Chat web widget → and among the options available at the top you can see Multithread → simply click the toggle to turn it ON.

Multichannel conversations

Once you enable the Multiple threads, the Multichannel conversations option displays as well. This option allows you to continue the conversation if the agent changes the channel from Live Chat to multichannel.

If you enable multichannel, the end user is allowed to continue chatting on any channel switch. The channel switch icon on the thread card appears only if the last message indicates the channel switch. If the end user or agent continue the chat via Live Chat, the icon disappears.

However, if you disable multichannel, and the agent or the end user switch the channel, the thread card reflects this change. The user sees a switch and lock icon implying that they cannot continue the conversation.

If the end user clicks and opens the locked thread, they see a message informing them that they cannot continue the conversations because of the channel switch.

Mobile in-app chat

In this section, we will explain how to configure the in-app chat in your mobile application which is available on both iOS and Android mobile platforms.

You can try out the mobile in-app chat in practice without any development effort following our guide.

DO YOU HAVE AN INFOBIP ACCOUNT

To use the Infobip platform, you need credentials. If you already have an Infobip account, log in to the web interface. Otherwise, create an account.

Installation

Configure your mobile application profile on the Infobip platform.
In your MM SDK configuration add the in-app chat component:

Link the mobile application profile to the widget configuration: Channels and Numbers module located at the bottom left> Live Chat > YOUR WIDGET > Audience & Availability > Mobile Application.

Test

Test the experience of the in-app chat with our mobile showcase Demo application by following these steps:

Download the showcase Demo application
Link the showcase application to your widget configuration
Start a conversation in the Demo app
Reply to a message in Conversations

Download Showcase Demo Application

If you have already installed your showcase application with the Demo App Guide, simply proceed to “Link showcase application to your widget configuration”. The following section assumes that you have not already created a demo app. If you have already created a demo app then you will be passed straight to the mobile app dashboard after step 1. The mobile app dashboard will show the demo application and other applications that you have created for your account.

Log in to the web interface using your credentials and navigate to the Channels and Numbers module located at the bottom left > Mobile App Messaging.
Under the Profiles tab click on the GET STARTED button in the Try Demo App widget.
Enter recipients to send out invitations to join the Demo app. Once you receive the invite, open the invitation on a mobile phone and download the Infobip Push app.

Link Showcase Application to Your Widget Configuration

Go to your widget configuration inside the Channels and Numbers module located at the bottom left> Live Chat > “Your widget name” > Audience & Availability and select Mobile Application from the list.

Click the SAVE WIDGET button to confirm the mobile application profile link to the widget configuration.

NOTE

You can link only one mobile application profile to the widget configuration.

Start a Conversation in the Demo App

After you have linked your demo application, you should see a successful confirmation. Then, after launching the showcase application, the chat option will appear.

iOS: Tap on the chat icon in the lower right corner to start a conversation
Android: Tap on the top-left navigation menu, and select Chat to start a conversation

Live Chat - Start a conversation on iOS and Android

Color styles in the chat are applied automatically from your widget configuration.

Reply to a Message in Conversations

All widgets are connected with Conversations so that you can easily emulate your in-app chat conversation during this test without any development effort as if it was implemented in your own app.

In the event the showcase application is not running on your device screen, you will automatically receive a push notification with a message.

Multithreading

Already available in the web widget, you can now use this function on mobile chat as well.

Live Chat supports multiple chat sessions being opened at the same time. This way the end users can use multiple chats to resolve different issues they may have.

Previous sessions started by the same end user are also preserved so the agents can have a better overview of the current issues the end user is experiencing.

To use Multithreading in Live Chat mobile, you need to enable it first via the web widget. In case you have already done so, you are good to go.

If not, then navigate to your Live Chat web widget > and among the options available at the top you can see Multiple threads > simply click the toggle to turn it ON.

When the above is enabled, the mobile chat will automatically offer:

A list (initially empty) of all unsolved conversations the end user has opened.
A button to "Start new chat" thread.
Navigation to each specific conversation. To open a particular chat, just tap on any conversation thread on the list.

Mobile chat uses SDK in the background. If you want to know more, read the Multiple chat threads SDK article.

Connect Google Tag Manager

Use the Google Tag Manager to manage your website tags without the need to edit code. This is a simple and easy tag management solution that can now be used over Infobip Live Chat.

If you're already using Google Tag Manager on your web pages for other purposes, you can use it in Live Chat with zero downtime.

If you already have a Google Tag Manager account

Log in to the Infobip web interface and navigate to the Channels and Numbers module located at the bottom left > Live Chat > CREATE WIDGET > Installation & Security.
Click on Google Tag Manager and copy the snippet code.

Now, click on the Open GTM button below the snippet code where you can log in to Google Tag Manager associated with your Google account.
Under Tags, click the New button in the top right corner to add a new tag.

Click the Tag Configuration panel and select the Custom HTML tag type.

Paste the copied snippet code from Step 2 in the HTML textbox.

Configure the Tag Firing to run whenever you'd like on your website.

Configure the Triggering.
Save the created tag.

Publish the new tag (select the Publish and Create Version option - to push changes to your sites).

If you don't have a Google Tag Manager account

Create a Google Tag Manager account.

Log in to your existing Google account or create a new account.
Navigate to Google Tag Manager.
Click Create account located on the right side.
Enter the name of your account, country, container name, and platform.
Confirm your setup by clicking the Create button.
Read through and accept the Google Tag Manager Terms of Service Agreement.
Continue with the GTM installation on your website by following the instructions on Google Tag Manager.
For more information, read the GTM Quickstart documentation.

You have now successfully installed the Google Tag Manager in your application and you can continue with the steps at the beginning of this article (If you already have a Google Tag Manager account).

User types