About Kustomer Chat SDKsWeb SDKiOS SDKAndroid SDKReact Native SDK
GuidesRecipesChangelog
About Kustomer Chat SDKsWeb SDKiOS SDKAndroid SDKReact Native SDKLog InSupport Portal
Support Portal

Installation

An installation guide to help you get started with the Kustomer Chat 2.0 Web SDK

Suggest Edits

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:

  • Replace YOUR_API_KEY with your API Key.
  • Replace Your Brand ID with your brandId.

👍

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.

Add authentication

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 about 3 years ago