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.
This article covers the steps needed to install a web widget on your website.
Before we start, let’s mention a few important terms:
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.
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.
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 APPS > Live Chat > and select your widget.
Click on the TRY WIDGET DEMO button to test your widget.
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
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.
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.
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.