Launch Chat in Enhanced Web Chat

Call Launch Chat API to programmatically launch the web chat client, which loads all the necessary dependencies and bootstraps. The API is a JavaScript API for the Enhanced Web Chat client. You can replace the default chat button with a custom chat button or your own web experience that calls the Launch Chat API to launch the chat client.

When Launch Chat API launches the chat client, the client opens as a maximized window in its initial state. For example, the client opens as a pre-chat dialog if prechat is configured in setup or a chat state otherwise. The initial state depends on how you configured the messaging deployment. If you minimized the window and called the API again, the API again maximizes the messaging conversation window.

To call this API, add an event listener for the onEmbeddedMessagingButtonCreated event and use the utilAPI.launchChat() method. Here’s an example code for an Enhanced Web Chat client. To find out how to get to the Code Snippet page that contains the code to initialize the Enhanced Web Chat client, see Introduction.

1// Get this code from the Code Snippet page of an Embedded Messaging deployment.
2// Without this code, the Enhanced Web Chat client doesn’t load.
3<script type='text/javascript'>
4    function initEmbeddedMessaging() {
5        ...
6    };
7</script>
8<script type='text/javascript' src='../bootstrap.min.js' onload='initEmbeddedMessaging()'></script>
9
10// Create a custom button or invitation to launch the web chat client.
11<button id="launchChatButton" onclick="launchChat()">Click to contact support</button>
12
13// Call Launch Chat API.
14<script>
15    function launchChat() {
16        embeddedservice_bootstrap.utilAPI.launchChat()
17            .then(() => {
18                // Success handler used to perform actions
19                // when the chat client launches successfully.
20                // For example, create a method that disables the launch chat button.
21                disableLaunchChatButton();
22            }).catch(() => {
23                // Error handler used to perform actions
24                // if the chat client fails to launch.
25                // For example, create a method that hides the launch chat button.
26                hideLaunchChatButton();
27            }).finally(() => {
28                // Finally handler used to perform any clean-up actions
29                // regardless of whether the chat client launches successfully or not.
30                // For example, create a method that logs the user’s attempt to chat.
31                logEndUserAttemptToChat();
32            });
33    }
34</script>

Use the event handlers in the utilAPI.launchChat() method to perform actions after the chat launches.

then event handler—If the client launches successfully, you can use this handler to, for example, hide the chat invitation or custom button.
catch event handler—If there’s an error launching the client, you can use this handler to, for example, display an error message.
finally event handler—The method runs this handler after the client launches successfully or not. Use this handler to run any clean-up actions.

Start a New Conversation After the Previous Conversation Ends

In Enhanced Web Chat v2 deployments, you can pass an optional shouldStartNewConversation parameter to launchChat. Set this parameter to true to start a new conversation when the current conversation has ended. If the current conversation is still open, launchChat ignores the parameter.

1embeddedservice_bootstrap.utilAPI.launchChat({ shouldStartNewConversation: true });

For more details, see the Enhanced Web Chat Reference Documentation.