After you install and setup Live Chat messenger, the next step is to define how the messenger is launched and displayed.

Present Messenger View

The messenger view can be displayed using any of the UI controls such as Floating Action Button (FAB), Messenger Icon, Tab Bar Icon according to your application requirements.

To present the messenger view, create a full-page messenger view as shown in the following example. You can define the full-page messenger view as a scene in your navigator and present as per your use case:

import { MessengerView } from '@sprinklrjs/chat-native-client';  function SPRMessengerView(launchOptions = {}, onDismiss) {  return (    <MessengerView launchOptions={launchOptions} onDismiss={onDismiss} /> // onDismiss should be provided to dismiss the messenger when user close the messenger. For e.g. onDismiss: navigation.pop  ); } 

Parameters

Customize Live Chat Messenger View

Sprinklr Live Chat comprises of two screens: Home and Conversation screen. By default, Live Chat opens with a home page that displays all conversations. However, you can customize this behavior and launch MessengerView with a single conversation view.

Default view

The default view opens with a home page that displays all conversations. The following are the various ways you can configure the default view based on your use case:

Open Live Chat in Default View

By default, Live Chat opens with both the home screen and the conversation screen. The following code is for the default view:

import { MessengerView } from '@sprinklrjs/chat-native-client'; function SPRMessenger(launchOptions = {}, onDismiss) { ​return ( ​<MessengerView ​launchOptions={launchOptions} ​onDismiss={onDismiss} ​/> ​); ​} 

Parameters

Open Live Chat in Default View with a New Conversation

Use the following code to open the default view with a new conversation. This configuration will initiate a new conversation on behalf of the user that starts with the welcome messages set in the application builder. To continue any existing conversations, users must return to the home screen.

import { MessengerView } from '@sprinklrjs/chat-native-client';​function SPRMessenger(launchOptions = {}, onDismiss) {    const chatInitialisationContext = {        landingScreen: 'NEW_CONVERSATION',    };​    return (        <MessengerView            launchOptions={launchOptions}            onDismiss={onDismiss}            chatInitialisationContext={chatInitialisationContext}        />    );}

Parameters

Open Live Chat in Default View with the Last Conversation

Use the following code to open the default view with the last conversation. This configuration will open the last conversation that is still active. If there are no open conversations, Live Chat will initiate a new conversation on behalf of the user that starts with the welcome messages set in the application builder.

import { MessengerView } from '@sprinklrjs/chat-native-client';​function SPRMessenger(launchOptions = {}, onDismiss) {    const chatInitialisationContext = {        landingScreen: 'LAST_CONVERSATION',    };​    return (        <MessengerView            launchOptions={launchOptions}            onDismiss={onDismiss}            chatInitialisationContext={chatInitialisationContext}        />    );}

Parameters

Open Live Chat in Default View with the Knowledge Base List

Use the following code to open the Knowledge Base list view in the Sprinklr Live Chat widget. This will launch Live Chat with the Knowledge Base list view, enabling users to browse relevant articles before starting a conversation.

import { MessengerView } from '@sprinklrjs/chat-native-client';​function SPRMessenger(launchOptions = {}, onDismiss) {    const chatInitialisationContext = {        landingScreen: 'KNOWLEDGE_BASE_LIST',    };​    return (        <MessengerView            launchOptions={launchOptions}            onDismiss={onDismiss}            chatInitialisationContext={chatInitialisationContext}        />    );}

Parameters

Open Live Chat in Default View with Custom Brand/User Message

Use the following code to open the default view with a new conversation that starts with custom brand/user messages. To continue any existing conversations, users must return to the home screen.

import { MessengerView } from '@sprinklrjs/chat-native-client';​function SPRMessenger(launchOptions = {}, onDismiss) {    const chatInitialisationContext = {        landingScreen: 'NEW_CONVERSATION',        initialMessages: [            {                message: 'This is a brand message',                isSentByUser: false,            },            'This is another brand message',            {                message: 'This is a user message',                isSentByUser: true,            },        ],    };​    return (        <MessengerView            launchOptions={launchOptions}            onDismiss={onDismiss}            chatInitialisationContext={chatInitialisationContext}        />    );}

Parameters

Initial Messages

Open Live Chat in Default View with a Particular Conversation ID

Use the following code to open a specific conversation using its conversation ID. Ensure that the conversation you want to open is not deleted and has the most recently published message.

To open a specific conversation, you need its conversation ID. You can capture the conversation ID by listening to events indicating the ongoing conversation.

import { MessengerView } from '@sprinklrjs/chat-native-client';​function SPRMessenger(launchOptions = {}, onDismiss) {    const chatInitialisationContext = {        landingScreen: 'EXISTING_CONVERSATION',        params: {            conversationId: 'id_of_conversation',        },    };​    return (        <MessengerView            launchOptions={launchOptions}            onDismiss={onDismiss}            chatInitialisationContext={chatInitialisationContext}        />    );}

Parameters

Params 

Single Conversation View

You can choose to display only the conversation screen and hide the home screen completely.

The following are the various ways you can configure the single conversation view based on your use case:

Open Live Chat in Single Conversation View with a New Conversation

When Live Chat is set to a single conversation view with NEW_CONVERSATION, it initiates a new conversation on behalf of the user. This conversation starts with the welcome messages set in the application builder.

This configuration will always open a conversation view by initiating a new conversation and will not show any previous conversations that are currently open.

import { MessengerView } from '@sprinklrjs/chat-native-client';​function SPRMessenger(launchOptions = {}, onDismiss) {    const chatInitialisationContext = {        scope: 'CONVERSATION',        landingScreen: 'NEW_CONVERSATION',    };​    return (        <MessengerView            launchOptions={launchOptions}            onDismiss={onDismiss}            chatInitialisationContext={chatInitialisationContext}        />    );}

Parameters

Open Live Chat in Single Conversation View with the Last Conversation

When Live Chat is set to single conversation view with LAST_CONVERSATION, it opens the last conversation of the user that is still open. If there are no open conversations, it initiates a new conversation on behalf of the user that starts with the welcome messages set in the application builder.

import { MessengerView } from '@sprinklrjs/chat-native-client';​function SPRMessenger(launchOptions = {}, onDismiss) {    const chatInitialisationContext = {        scope: 'CONVERSATION',        landingScreen: 'LAST_CONVERSATION',    };​    return (        <MessengerView            launchOptions={launchOptions}            onDismiss={onDismiss}            chatInitialisationContext={chatInitialisationContext}        />    );}

Parameters

Open Live Chat in Single Conversation View with Custom Brand Message

Use the following code to open a single conversation view with a new conversation that starts with a custom message from your brand or user.

import { MessengerView } from '@sprinklrjs/chat-native-client';​function SPRMessenger(launchOptions = {}, onDismiss) {    const chatInitialisationContext = {        scope: 'CONVERSATION',        landingScreen: 'NEW_CONVERSATION',        initialMessages: [            {                message: 'This is a brand message',                isSentByUser: false,            },            'This is another brand message',            {                message: 'This is a user message',                isSentByUser: true,            },        ],    };​    return (        <MessengerView            launchOptions={launchOptions}            onDismiss={onDismiss}            chatInitialisationContext={chatInitialisationContext}        />    );}​

Parameters

Initial Messages 

Open Live Chat in Single Conversation View with a Conversation ID

Use the following code to open a specific conversation without the home page. Ensure that the conversation you want to open is not deleted and has the most recently published message.

To open a specific conversation, you need its conversation ID. You can capture the conversation ID by listening to events indicating the ongoing conversation.

import { MessengerView } from '@sprinklrjs/chat-native-client';​function SPRMessenger(launchOptions = {}, onDismiss) {    const chatInitialisationContext = {        scope: 'CONVERSATION',        landingScreen: 'EXISTING_CONVERSATION',        params: {            conversationId: 'id_of_conversation',        },    };​    return (        <MessengerView            launchOptions={launchOptions}            onDismiss={onDismiss}            chatInitialisationContext={chatInitialisationContext}        />    );}

Parameters

Params

Close Messenger

To close the messenger, use the MessengerClient.closeMessenger() function.

import MessengerClient from '@sprinklrjs/chat-native-client'; ​MessengerClient.closeMessenger(); 

Next Step

Configure Live Chat Messenger

Additional Resources

See All Integration Steps