The NLX Touchpoint widget provides a customizable chat interface that you can embed in your web applications. This widget allows users to interact with your application and provides a seamless conversational experience.

Quick Start

Add the following code to your HTML file:

1<!-- Touchpoint sample HTML -->
2<!-- Downloaded from https://developers.nlx.ai -->
3<html lang="en">
4  <head>
5    <title>Touchpoint Sample HTML</title>
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7  </head>
8  <body>
9    <script defer src="https://unpkg.com/@nlxai/touchpoint-ui/lib/index.umd.js"></script>
10    <script>
11      const contentLoaded = () => {
12        if (document.readyState === "loading") {
13          return new Promise((resolve) => {
14            window.addEventListener("DOMContentLoaded", () => {
15              resolve();
16            });
17          });
18        } else {
19          return Promise.resolve();
20        }
21      };
22      contentLoaded().then(() => {
23        return nlxai.touchpointUi.create({
24          config: {
25            applicationUrl: "REPLACE_WITH_APPLICATION_URL",
26            headers: {
27              "nlx-api-key": "REPLACE_WITH_API_KEY"
28            },
29            languageCode: "en-US"
30          },
31        })
32      }); 
33    </script>
34  </body>
35</html>

Configuration Options

Required Fields

Field	Type	Description
`config.applicationUrl`	string	The URL endpoint for your NLX bot
`config.headers["nlx-api-key"]`	string	Your NLX API key

Core Optional Fields

Field	Type	Default	Description
`config.languageCode`	string	"en-US"	The language code for the chat interface
`windowSize`	"half" \| "full"	"half"	Controls whether the chat window takes up half or full screen
`colorMode`	"light" \| "dark"	"dark"	Sets the color theme of the widget
`brandIcon`	string	undefined	URL for your brand icon in the chat header
`launchIcon`	string	undefined	URL for the icon shown on the launch button
`theme`	Theme	See Theming	Custom theme configuration

Component Configuration

The customModalities field connects your custom components to specific bot responses. Each key in this object maps to a component that handles that modality type.

Field	Description
`customModalities`	Maps modality types to their handling components

HTML Template Syntax

You can use the provided html function to create components in a more readable syntax. This function supports all available components listed below:

1import { html } from "@nlxai/touchpoint";
2
3const MyComponent = () => {
4  return html` <BaseText>Hello World</BaseText> `;
5};

Available Components

These components can be imported and used within your custom modality components:

Display Components

Component	Description
`BaseText`	Primary text component for main content
`SmallText`	Secondary text for supporting information
`Icons`	Stylized Icons

Layout Components

Component	Description
`Carousel`	Container for multiple card elements
`CustomCard`	Individual card component
`CustomCardRow`	Horizontal layout within cards
`CustomCardImageRow`	Specialized row for image content

Interactive Components

Component	Description
`TextButton`	Text-based button with optional icon
`IconButton`	Icon-only button for compact actions
`DateInput`	Component for date selection

Instance Methods and Properties

The async create() function returns a promise that will be fulfilled with a TouchpointInstance with these methods and properties:

Method/Property	Type	Description
`expanded`	boolean (property)	Gets or sets the expanded state of the chat widget
`conversationHandler`	object (property)	Returns the current conversation handler
`teardown()`	function	Removes the widget from the DOM

Example usage:

1import { create } from "@nlxai/touchpoint";
2
3const touchpoint = await create({
4  config: {
5    applicationUrl: 'YOUR_APPLICATION_URL"',
6    headers: {
7      "nlx-api-key": "your-api-key",
8    },
9  },
10});
11
12// Toggle expanded state
13touchpoint.expanded = true;
14
15// Access conversation handler
16const conversationHandler = touchpoint.conversationHandler;
17
18// Remove widget
19touchpoint.teardown();