Start a chat
Follow these steps to start a chat:
Listen to the lcw:ready event raised by a live chat to start using the live chat SDK methods. The live chat methods should be invoked after the lcw:ready event is raised. You can listen for this event by adding your own event listener on the window object.
After the lcw:ready event is raised, call the startChat method to start a chat.
To authenticate a customer when you start a chat, see Send authentication token.
To start a chat proactively depending on various customer scenarios in your organization, see Start a chat proactively.
Sample code
window.addEventListener("lcw:ready", function handleLivechatReadyEvent(){
// Handle LiveChat SDK ready event
// SDK methods are ready for use now
// Initiate a chat using startChat SDK
Microsoft.Omnichannel.LiveChatWidget.SDK.startChat();
});
window.addEventListener("lcw:error", function handleLivechatErrorEvent(errorEvent){
// Handle LiveChat error event
console.log(errorEvent);
});
Consider a scenario where the customer is on your portal page, and you want to start a chat after the customer has spent some time on the page. You can programmatically open the chat widget after the specified time has elapsed.
The following sample code shows how you can start a chat after the customer has been waiting for 5 minutes:
window.addEventListener("lcw:ready", function handleLivechatReadyEvent(){
// Open chat widget proactively after customer has been waiting for 5 minutes
setTimeout(function startProactiveChat() {
Microsoft.Omnichannel.LiveChatWidget.SDK.startChat();
}, 300000);
});
Use custom chat button
To use a custom chat button instead of the out-of-the-box chat button, add the attribute data-hide-chat-button
in the widget snippet and set its value to true
. Invoke the startChat method on click of the custom UI component to start the chat.
Sample code snippet to hide the standard chat button
<script id="Microsoft_Omnichannel_LCWidget" src="<valid-src>" data-app-id="<valid-app-id>" data-org-id="<valid-org-id>" data-org-url="<valid-org-url>" data-hide-chat-button="true"></script>
Related information
startChat
JavaScript API reference for Live Chat SDK
Customize chat widget
Start a chat proactively