Installation
An installation guide to help you get started with the Kustomer Chat 2.0 Web SDK
This guide shows you how to get started with the Kustomer Chat 2.0 Web SDK.
Prerequisites
See Requirements.
Quick start
Initialize chat
Auto-generate a Web SDK code snippet
Kustomer lets you auto-generate a Web SDK code snippet with an API key and the brand ID of your selected brand. To learn more, see Chat Management: SDK in the Kustomer Help Center.
To get started with Kustomer Chat, you can copy the following code snippet and insert the script before the closing body </body> tag in the HTML file for the web page:
Using Google Tag Manager? Load chat asynchronously to initialize chat.
Load chat asynchronously to embed Kustomer Chat on sites that use Google Tag Manager. See Load chat asynchronously.
<!--Loads Kustomer Chat -->
<script
src="https://cdn.kustomerapp.com/chat-web/widget.js"
data-kustomer-api-key='YOUR_API_KEY'
></script>
<!--Initializes chat for a specific brand under your Kustomer organization-->
<script>
Kustomer.start({
brandId: 'Your Brand ID'
});
</script>
Once you save your page with the updated HTML, the page will display the chat icon for the Kustomer Chat widget on the lower right-hand corner of the page.
Admins in your Kustomer organization can configure basic chat settings directly in Kustomer. To learn more, see Introduction to Kustomer Chat in the Kustomer Help Center.
To learn how to configure Kustomer Chat with the Web SDK, see Overview: Web SDK.
Use the Kustomer.login() method to add authentication to your chat widget to sync conversations for a customer across their devices and to require customers to sign in to access chat support.
Add listeners
Use the Kustomer.addListener() method to listen for specific events in the chat widget.
Describe a customer or conversation
Use the Kustomer.describeCustomer() method to update Customer object data through the chat widget.
Use the Kustomer.describeConversation() method to update Conversation object data through the chat widget.
Learn more about the standard Customer object and standard Conversation object in the Kustomer Data Model in the Kustomer Help Center.
Prevent viewport zooming on mobile devices
Update or add a viewport meta tag in the
<head>tag of your HTML to prevent viewport zooming on mobile devices.To learn more, see Troubleshooting: Prevent viewport zooming on mobile devices.
Updated over 3 years ago