Launch Live Chat Application
Updated
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
Parameter | Description |
onDismiss | A callback function that handles closing of the messenger. |
launchOptions | Defines how the messenger should be launched. You can use launchOptions to open the messenger in response to events like notifications. |
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
Parameter | Description |
onDismiss | A callback function that handles closing of the messenger. |
launchOptions | Defines how the messenger should be launched. You can also use launchOptions to open the messenger in response to events like notifications. |
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.
Note: This configuration will open a new conversation every time, irrespective of whether the previous conversation was closed or not.
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
Parameter | Sub-Parameter | Description |
onDismiss |
| A callback function that handles the closing of the messenger. |
launchOptions |
| Defines how the messenger is launched. You can use launchOptions to open the messenger in response to events like notifications. |
chatInitialisationContext |
| An object that defines the initial screen displayed when the messenger is launched. |
| landingScreen | Specifies which screen the chat opens with. In this configuration, it is set to NEW_CONVERSATION to start a new conversation when the messenger is launched. |
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
Parameter | Sub-Parameter | Description |
onDismiss |
| A callback function that handles closing the messenger. |
launchOptions |
| Defines how the messenger is launched. You can use launchOptions to open the messenger in response to events like notifications. |
chatInitialisationContext |
| An object that defines the initial screen displayed when the messenger is launched. |
| landingScreen | Specifies which screen the chat opens with. In this configuration, it is set to LAST_CONVERSATION to open the last active conversation when the messenger is launched. |
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
Parameter | Sub-Parameter | Description |
onDismiss |
| A callback function that handles closing the messenger. |
launchOptions |
| Defines how the messenger is launched. You can use launchOptions to open the messenger in response to events like notifications. |
chatInitialisationContext |
| An object that defines the initial screen displayed when the messenger is launched. |
| landingScreen | Specifies which screen the chat opens with. In this configuration, it is set to KNOWLEDGE_BASE_LIST to open the knowledge base articles list when the messenger is launched. |
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
Parameter | Sub-Parameter | Description |
onDismiss |
| A callback function that handles closing the messenger. |
launchOptions |
| Defines how the messenger is launched. You can use launchOptions to open the messenger in response to events like notifications. |
chatInitialisationContext |
| An object that defines the initial screen displayed when the messenger is launched. |
| landingScreen | Specifies which screen the chat opens with. In this configuration, it is set to NEW_CONVERSATION to start a new conversation when the messenger is launched. |
| initialMessages | Contains a list of predefined messages that appear when the chat starts. For more information, see the Initial Messages table. |
Initial Messages
Parameter | Description | Possible Values |
message | The text of the message. |
|
isSentByUser | Defines whether the message was sent by the user or by the brand. | true, false
|
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
Parameter | Sub-Parameter | Description |
onDismiss |
| A callback function that handles closing the messenger. |
launchOptions |
| Defines how the messenger is launched. You can use launchOptions to open the messenger in response to events like notifications. |
chatInitialisationContext |
| An object that defines the initial screen displayed when the messenger is launched. |
| landingScreen | Specifies which screen the chat opens with. In this configuration, it is set to EXISTING_CONVERSATION to open an existing conversation. |
| params | Contains the parameters required for initializing the chat. For more information, see the Params table. |
Params
Parameter | Description |
conversationId | The unique ID of the conversation that you want to open. |
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
Parameter | Sub-Parameter | Description |
onDismiss |
| A callback function that handles closing the messenger. |
launchOptions |
| Defines how the messenger is launched. You can use launchOptions to open the messenger in response to events like notifications. |
chatInitialisationContext |
| An object that defines the initial screen displayed when the messenger is launched. |
| landingScreen | Specifies which screen the chat opens with. In this configuration, it is set to NEW_CONVERSATION to open a new conversation. |
| scope | Defines the scope of the chat. Value CONVERSATION indicates the messenger operates within the conversation scope. |
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
Parameter | Sub-Parameter | Description |
onDismiss |
| A callback function that handles closing the messenger. |
launchOptions |
| Defines how the messenger is launched. You can use launchOptions to open the messenger in response to events like notifications. |
chatInitialisationContext |
| An object that defines the initial screen displayed when the messenger is launched. |
| landingScreen | Specifies which screen the chat opens with. In this configuration, it is set to LAST_CONVERSATION to open the last active conversation when the messenger is launched. |
| scope | Defines the scope of the chat. Value CONVERSATION indicates the messenger operates within the conversation scope. |
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.
Note: If a welcome message is enabled in Live Chat with this view, the welcome message will not be displayed. Instead, the custom brand message is displayed.
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
Parameter | Sub-Parameter | Description |
onDismiss |
| A callback function that handles closing the messenger. |
launchOptions |
| Defines how the messenger is launched. You can use launchOptions to open the messenger in response to events like notifications. |
chatInitialisationContext |
| An object that defines the initial screen displayed when the messenger is launched. |
| landingScreen | Specifies which screen the chat opens with. In this configuration, it is set to NEW_CONVERSATION to start a new conversation when the messenger is launched. |
| scope | Defines the scope of the chat. Value CONVERSATION indicates the messenger operates within the conversation scope. |
| initialMessages | Contains a list of predefined messages that appear when the chat starts. For more information, see the Initial Messages table. |
Initial Messages
Parameter | Description | Possible Values |
message | The text of the message. |
|
isSentByUser | Defines whether the message was sent by the user or by the brand. | true | false
|
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
Parameter | Sub-Parameter | Description |
onDismiss |
| A callback function that handles closing the messenger. |
launchOptions |
| Defines how the messenger is launched. You can use launchOptions to open the messenger in response to events like notifications. |
chatInitialisationContext |
| An object that defines the initial screen displayed when the messenger is launched. |
| landingScreen | Specifies which screen the chat opens with. In this configuration, it is set to EXISTING_CONVERSATION to open an existing conversation. |
| scope | Defines the scope of the chat. Value CONVERSATION indicates the messenger operates within the conversation scope. |
| params | Contains the parameters required for initializing the chat. For more information, see the Params table. |
Params
Parameter | Description |
conversationId | The unique ID of the conversation that you want to open. |
Close Messenger
To close the messenger, use the MessengerClient.closeMessenger() function.
import MessengerClient from '@sprinklrjs/chat-native-client';
MessengerClient.closeMessenger();
Next Step
Additional Resources