Main Screen

Updated

16 days ago

The Main screen is the screen that opens when you click the Live Chat icon. You can use the different configuration options to customize the main screen of Live Chat according to your requirements.

Persona Configuration

Within the Live Chat Builder's "Personalize Your Live Chat" section, you can customize the avatars and names of senders in chat interfaces, depending on whether the reply comes from a bot or an agent.

Enable persona avatars: Bot and agent avatars will be visible in the chat. You have the option to select the agent avatar as either Name Initials, Agent Profile Image, or Brand Account Image. Additionally, you can add the desired image for the bot.

Enable persona names: Bot and agent names will be visible in the chat. You can choose to display the agent's name as either the Brand Account Display Name or the Agent Profile Display Name. Additionally, you can input the desired name for the bot.

Enable conditional persona: It allows for the assignment of different agent avatars and names for different users and user groups. This means that for different sets of agents or agent groups, different avatars (profile pictures) and names will be displayed to customers.

Hide persona names in conversation screen: Bot and agent names will be hidden in the conversation screen.

Message Background Color

You can customize the color settings for messages to align with your brand.

Message Background: Set a solid color or gradient as the background for message bubbles.
Text Color: The font color of the text will change based on the color set. Refer to the WCAG Compliance section for accessibility requirements.
Link Color: Define a custom color for URLs within messages.
Bubble Border Radius: Customize the corner roundness of message bubbles for both brand and customer messages to achieve your desired visual style.This means you can adjust the curvature or roundness of the corners of the message bubbles to achieve different visual effects or match your brand's style.

Note: To enable this feature, reach out to Sprinklr Support at tickets@sprinklr.com. Include your appId and the hex code of the desired color in the request.

Conversation Background/Wallpaper

In the Styling section under background pattern, you can choose from a predefined list of chat wallpapers. You can also choose asolid background or grandient . In order to choose a color, please raise a support ticket with the appID and the hex code of the color required

Agent Assignment/Unassignment Visibility

On the conversation screen of the live chat widget, you have the option to display agent assignments and unassignments as inline events. This feature enhances the visibility of when an agent is assigned or unassigned during the course of the conversation. To get this capability enabled, please reach out to support at tickets@sprinklr.com.

Open Links in Modal View

On the conversation screen of the live chat widget, you have the option to configure links so that they open in a modal view for customers. This provides a more user-friendly and streamlined experience, allowing customers to access linked content without leaving the conversation interface. To get this capability enabled, please reach out to support at tickets@sprinklr.com.

Message Streaming

Message streaming support refers to the capability that allows bot messages to be rendered and displayed in real-time within a live chat interface. This means that as the bot generates responses or messages during a chat session, these messages are immediately visible to the user without delay. It enhances the user experience by making the conversation feel more fluid and responsive.

To get this capability enabled, please raise a support ticket by contacting tickets@sprinklr.com.

Typing Indicator

The Typing Indicator provides a visual signal that the bot is composing a response. This indicator can be accompanied by a customized message that informs the user a reply is on the way, enhancing the clarity and responsiveness of the interaction.

Note: This feature requires backend configuration. To enable this feature in your environment, contact Sprinklr Support at tickets@sprinklr.com.

Message Transitions and Animations

Implementing animations and transitions for messages in the Live Chat interface enhances the visual experience by adding dynamic effects to how messages appear, disappear, or move within the chat window. These effects include animations like sliding from the bottom of the screen, scaling in or out of view, and bouncing in or out of visibility. These visual enhancements not only make the chat interface more engaging but also help users track the flow of conversation more intuitively.

Disclaimer Card

You can display a disclaimer card at the bottom of the conversation main screen to inform users about important guidelines or terms before they continue interacting. This helps brands set expectations, communicate compliance policies, or share safety instructions directly within the chat experience.

You can choose to make the disclaimer card dismissible, meaning it will have a close (×) icon, allowing users to remove it if they wish, or you can make it sticky so it remains visible.

To do this, follow these steps in the Personalize Your Live Chat section of the Live Chat Builder:

Expand the Conversation Screen section.
Under Conversation Banner, toggle the Enable Banner button.
In the Banner Type dropdown, select Disclaimer Card.
In Disclaimer Text, enter the disclaimer text you want to display.
Toggle the Allow card to be dismissed button if you want users to be able to close the disclaimer.

Share and Preview Media

You can share multiple images and videos within a Live Chat conversation. These media files are displayed in a grid format, making it easy for users to view all shared content at a glance.

When a user clicks on an image or video, it opens in a full-screen modal view directly within the conversation screen. This allows users to browse media without leaving the chat context.

In the full-screen modal view, users can:

Navigate between media files using left and right arrows
Quickly preview and select media using the carousel located in the modal footer

Auto-Scroll Feature in Live Chat

The Auto-Scroll feature in Live Chat enhances the user experience by automatically adjusting the chat window to display the latest user message at the top of the visible conversation area. This behavior provides better context for ongoing interactions and ensures that user inputs are immediately visible and acknowledged.