NLX | Developers

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

Basic Setup

Required Configuration


1<html lang="en">
2  <head>
3    <title>Touchpoint Sample HTML</title>
4    <meta name="viewport" content="width=device-width, initial-scale=1">
5  </head>
6  <body>
7    <script type="module">
8      import { create, React, html } from "https://unpkg.com/@nlxai/touchpoint-ui@1.1.3/lib/index.js?module";
9      
10      const touchpoint = await create({
11        config: {
12          applicationUrl: "YOUR_APPLICATION_URL",
13          headers: { "nlx-api-key": "YOUR_API_KEY" },
14          languageCode: "en-US",
15          userId: crypto.randomUUID(),
16        },
17      });
18      
19    </script>
20  </body>
21</html>

Field	Type	Description
`applicationUrl`	string	Your NLX application endpoint
`headers["nlx-api-key"]`	string	Your NLX API key
`languageCode`	string	Chat language (e.g., "en-US", "fr-FR")

Customization

Add these options outside the

config object:


1<html lang="en">
2  <head>
3    <title>Touchpoint Sample HTML</title>
4    <meta name="viewport" content="width=device-width, initial-scale=1">
5  </head>
6  <body>
7    <script type="module">
8      import { create, React, html } from "https://unpkg.com/@nlxai/touchpoint-ui@1.1.3/lib/index.js?module";
9      
10      const touchpoint = await create({
11        config: {
12          applicationUrl: "YOUR_APPLICATION_URL",
13          headers: { "nlx-api-key": "YOUR_API_KEY" },
14          languageCode: "en-US",
15          userId: crypto.randomUUID(),
16        },
17        // Brand customization
18        colorMode: "light", // "light" or "dark"
19        theme: {
20          accent: "#0066CC", // Your brand color
21          fontFamily: '"Inter", sans-serif', // Your brand font
22        },
23        brandIcon: "https://yoursite.com/logo.png", // Header logo
24        launchIcon: "https://yoursite.com/chat-icon.svg", // Chat button icon
25      });
26      
27    </script>
28  </body>
29</html>

Voice Input

Voice input requires a

userId in your config:


1<html lang="en">
2  <head>
3    <title>Touchpoint Sample HTML</title>
4    <meta name="viewport" content="width=device-width, initial-scale=1">
5  </head>
6  <body>
7    <script type="module">
8      import { create, React, html } from "https://unpkg.com/@nlxai/touchpoint-ui@1.1.3/lib/index.js?module";
9      
10      const touchpoint = await create({
11        config: {
12          applicationUrl: "YOUR_APPLICATION_URL",
13          headers: { "nlx-api-key": "YOUR_API_KEY" },
14          languageCode: "en-US",
15          userId: crypto.randomUUID(), // Required for voice
16        },
17        input: "voice", // Enable voice input
18      });
19      
20    </script>
21  </body>
22</html>

Complete Configuration Reference

Core Config (inside
`config` object)

Field	Type	Required	Description
`applicationUrl`	string	Yes	Your NLX application endpoint
`headers["nlx-api-key"]`	string	Yes	Your NLX API key
`languageCode`	string	Yes	Chat language (e.g., "en-US", "fr-FR")
`userId`	string	For voice only	User identifier (required when `input` is "voice")

Example


1<html lang="en">
2  <head>
3    <title>Touchpoint Sample HTML</title>
4    <meta name="viewport" content="width=device-width, initial-scale=1">
5  </head>
6  <body>
7    <script type="module">
8      import { create, React, html } from "https://unpkg.com/@nlxai/touchpoint-ui@1.1.3/lib/index.js?module";
9      
10      const touchpointConfig = {
11        // Core configuration (required)
12        config: {
13          applicationUrl: "https://your-bot.studio.nlx.ai/...",
14          headers: {
15            "nlx-api-key": "YOUR_API_KEY",
16          },
17          languageCode: "en-US",
18          userId: crypto.randomUUID(),
19        },
20      };
21      
22    </script>
23  </body>
24</html>

Optional Config (inside
`config` object)

Field	Type	Required	Description
`conversationId`	string	optional	`conversationId` to continue an existing conversation. Used to recover conversation when persisting history.
`responses`	array of Response	optional	When `responses` is set, initialize the chatHandler with historical messages. Used to recover conversation when persisting history.

Example


1<html lang="en">
2  <head>
3    <title>Touchpoint Sample HTML</title>
4    <meta name="viewport" content="width=device-width, initial-scale=1">
5  </head>
6  <body>
7    <script type="module">
8      import { create, React, html } from "https://unpkg.com/@nlxai/touchpoint-ui@1.1.3/lib/index.js?module";
9      
10      const touchpointConfig = {
11        // Core configuration (required)
12        config: {
13          applicationUrl: "https://your-bot.studio.nlx.ai/...",
14          headers: {
15            "nlx-api-key": "YOUR_API_KEY",
16          },
17          languageCode: "en-US",
18          userId: crypto.randomUUID(),
19          conversationId: "existing-conversation-id",
20          responses: [
21            // Array of previous Response objects
22          ],
23        },
24      };
25      
26    </script>
27  </body>
28</html>

💡 See the API Reference for the Full Configuration Object

UI Options (outside
`config` object)

Field	Type	Default	Description
`windowSize`	`"half"` \| `"full"`	`"half"`	Half-screen overlay or full-screen mode
`colorMode`	`"light"` \| `"dark"`	`"dark"`	Light or dark theme
`brandIcon`	string	undefined	URL for header logo
`launchIcon`	string \| boolean	true	URL for chat button icon, false to hide
`input`	`"text"` \| `"voice"` \| `"voiceMini"`	`"text"`	How users communicate with the chat

Example


1<html lang="en">
2  <head>
3    <title>Touchpoint Sample HTML</title>
4    <meta name="viewport" content="width=device-width, initial-scale=1">
5  </head>
6  <body>
7    <script type="module">
8      import { create, React, html } from "https://unpkg.com/@nlxai/touchpoint-ui@1.1.3/lib/index.js?module";
9      
10      const touchpointConfig = {
11        // Core configuration (required)
12        config: {
13          applicationUrl: "https://your-bot.studio.nlx.ai/...",
14          headers: {
15            "nlx-api-key": "YOUR_API_KEY"
16          },
17          languageCode: "en-US",
18          userId: crypto.randomUUID()
19        },
20        windowSize: "half",
21        colorMode: "dark",
22        brandIcon: "https://yoursite.com/logo.png",
23        launchIcon: "https://yoursite.com/chat-icon.svg",
24        input: "text"
25      };
26      
27    </script>
28  </body>
29</html>

Message Styling

Field	Type	Default	Description
`userMessageBubble`	boolean	false	Add bubbles to user messages
`agentMessageBubble`	boolean	false	Add bubbles to agent messages
`chatMode`	boolean	false	Show persistent chat history with inline loaders

💡 See the Chat Modes section for more information.

Example


1<html lang="en">
2  <head>
3    <title>Touchpoint Sample HTML</title>
4    <meta name="viewport" content="width=device-width, initial-scale=1">
5  </head>
6  <body>
7    <script type="module">
8      import { create, React, html } from "https://unpkg.com/@nlxai/touchpoint-ui@1.1.3/lib/index.js?module";
9      
10      const touchpointConfig = {
11        // Core configuration (required)
12        config: {
13          applicationUrl: "https://your-bot.studio.nlx.ai/...",
14          headers: {
15            "nlx-api-key": "YOUR_API_KEY"
16          },
17          languageCode: "en-US",
18          userId: crypto.randomUUID()
19        },
20        chatMode: true,
21        userMessageBubble: true,
22        agentMessageBubble: true
23      };
24      
25    </script>
26  </body>
27</html>

Theme Customization (inside
`theme` object)

Field	Type	Default	Description
`fontFamily`	string	"Neue Haas Grotesk"	Font for all text
`accent`	string	varies by mode	Color for buttons and highlights
`innerBorderRadius`	string	"12px"	Rounding for buttons and inputs
`outerBorderRadius`	string	"20px"	Rounding for main window

💡 See the Theming and Styling section for more information.

Example


1<html lang="en">
2  <head>
3    <title>Touchpoint Sample HTML</title>
4    <meta name="viewport" content="width=device-width, initial-scale=1">
5  </head>
6  <body>
7    <script type="module">
8      import { create, React, html } from "https://unpkg.com/@nlxai/touchpoint-ui@1.1.3/lib/index.js?module";
9      
10      const touchpointConfig = {
11        // Core configuration (required)
12        config: {
13          applicationUrl: "https://your-bot.studio.nlx.ai/...",
14          headers: {
15            "nlx-api-key": "YOUR_API_KEY"
16          },
17          languageCode: "en-US",
18          userId: crypto.randomUUID()
19        },
20        theme: {
21          fontFamily: '"Helvetica Neue", sans-serif',
22          accent: "rgb(28, 99, 218)"
23        }
24      };
25      
26    </script>
27  </body>
28</html>

Advanced Options

Field	Type	Default	Description
`customModalities`	object	{}	Custom UI components for rich responses. Read more in the Custom Components for how customModalities are used.
`initializeConversation`	function	Sends welcome flow	Control the first interaction. Read more in the Launching with Context section for more information.
`initialContext`	object	undefined	Context sent with initial request. Read more in the Launching with Context section for more information.

Example


1<html lang="en">
2  <head>
3    <title>Touchpoint Sample HTML</title>
4    <meta name="viewport" content="width=device-width, initial-scale=1">
5  </head>
6  <body>
7    <script type="module">
8      import { create, React, html } from "https://unpkg.com/@nlxai/touchpoint-ui@1.1.3/lib/index.js?module";
9      
10      const touchpointConfig = {
11        // Core configuration (required)
12        config: {
13          applicationUrl: "https://your-bot.studio.nlx.ai/...",
14          headers: {
15            "nlx-api-key": "YOUR_API_KEY",
16          },
17          languageCode: "en-US",
18          userId: crypto.randomUUID(),
19        },
20        initialContext: {
21          userTier: "premium",
22          currentPage: "/products",
23        },
24        customModalities: {
25          OrderDetails: OrderDetailsComponent,
26          MapDisplay: MapDisplayComponent,
27        },
28      };
29      
30    </script>
31  </body>
32</html>

Basic Setup

Required Configuration

Customization

Voice Input

Complete Configuration Reference

Core Config (inside config object)

Optional Config (inside config object)

UI Options (outside config object)

Message Styling

Theme Customization (inside theme object)

Advanced Options

Core Config (inside
`config` object)

Optional Config (inside
`config` object)

UI Options (outside
`config` object)

Theme Customization (inside
`theme` object)