Installation

<aside> 💡

Important! Get your CLIENT_ID and a code snippet for integration into your website from the Notch dashboard

</aside>

Copy the code below and paste it into your website's HTML, just before the closing </body> tag.

<script type="module"
    src="<https://chat.getnotch.com/embed.js>"
    data-notch-client-id="CLIENT_ID"
    crossorigin="anonymous">
</script>

The Notch Chat SDK will be available globally on the window object as NotchChat once the widget loads.

Configuration

In the Notch dashboard, you may configure the following:

• Enable Chat Widget - If this toggle is off, the Chat Widget will not be loaded. This is a fail safe that turns off the chat globally for all of your websites.
• Hide Chat WIdget - If this toggle is turned on, the Chat Widget is loaded on to your website but starts in “invisible” mode. You must use the Chat Widget SDK to make the widget visible.
• Initial message - This is the initial message the customer will see when starting a new conversation. This may be changed for specific use cases by using the Chat Widget SDK.
• Suggested messages - Optional initial user responses that are offered to the user for quick selection. For example, you may offer the user a selection between “Payment questions”, “General questions” etc.
• Theme Color - Select the main color for the Chat Widget.

SDK Usage

The Notch Chat SDK allows you to programmatically control the chat widget and provide contextual information to enhance AI-powered support interactions. This enables proactive customer support, contextual conversations, and seamless integration with your application's user experience.

Getting Started

Quick Start

// Wait for widget to be ready. This is necessary since the NotchChat has
// an initial load time even after the script finished running.
NotchChat.on('ready', () => {
  console.log('NotchChat API is ready to use');

  // Update user information
  NotchChat.updateUserDetails({
    id: 'user-123',
    email: '[email protected]',
    name: 'John Doe'
  });
});

// Start a conversation with a specific inital message shown to the customer and some
// contextual data that the AI agent will be aware of
NotchChat.startConversation({
  agentMessage: "Hi! I see you're having trouble with your checkout. Let me help!",
  eventParams: {
    USER_ISSUE: "Checkout Error",
    CART_VALUE: "$99.99",
    ERROR_CODE: "PAYMENT_DECLINED"
  }
});

SDK Reference

User Management with JWT verification