NLX | Developers

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.

Required Configuration Fields

Field	Type	Description
`config.applicationUrl`	string	The URL endpoint for your NLX application
`config.headers["nlx-api-key"]`	string	Your NLX API key
`config.languageCode`	string	The language code for the chat interface
`config.userId`	String	Required only with input is set to voice

Optional Customization Fields

Field	Type	Default	Description
`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 \| boolean`	`true`	URL for the icon on the launch button. `false` hides it, `true` or `undefined` uses default.
`userMessageBubble`	`boolean`	`false`	Specifies whether the user message has bubbles or not
`agentMessageBubble`	`boolean`	`false`	Specifies whether the agent message has bubbles or not
`chatMode`	`boolean`	`false`	Enables chat mode, a classic chat experience with inline loaders and the chat history visible at all times.
`theme`	`Partial<Theme>`	See Theming	Custom theme configuration object. See Theming for details on theme properties.
`customModalities`	`Record<string, CustomModalityComponent>`	`{}`	Optional custom modality components to render in Touchpoint. Key is the modality name, value is the component. See Components.
`initializeConversation`	`(handler: ConversationHandler) => void`	Sends welcome intent	Custom conversation initialization method. Defaults to sending the welcome intent. See Conversation Handler.
`input`	`"text" \| "voice"`	`"text"`	Controls the ways in which the user can communicate with the application. ⚠️ The `config.userId` must be set to use voice input

Common Configuration Examples

Example code snippet for the most common visual and behavioral adjustments.

1import { create } from "@nlxai/touchpoint-ui";
2
3const touchpointOptions = {
4  // Required connection config
5  config: {
6    applicationUrl: "YOUR_APPLICATION_URL",
7    headers: {
8      "nlx-api-key": "YOUR_API_KEY",
9    },
10    languageCode: "en-US",
11  },
12
13  // Common optional settings (outside 'config')
14  colorMode: "light", // Switch to light theme
15  windowSize: "half", // Keep the half-screen overlay
16  brandIcon: "https://your-company.com/logo.png", // Add your logo to the header
17  launchIcon: "https://your-company.com/chat-icon.svg", // Custom icon for the launch button
18  theme: {
19    fontFamily: '"Inter", sans-serif', // Use a custom font
20    accent: "rgb(0, 115, 230)", // Set a custom accent color (e.g., buttons, highlights)
21  },
22};
23
24const touchpoint = await create(touchpointOptions);

Fully Customized Touchpoint Example

Example code snip modifying most of the available configuration options for maximum customization.

1import { create } from "@nlxai/touchpoint-ui";
2
3const touchpointOptions = {
4  // Required connection config
5  config: {
6    applicationUrl: "YOUR_APPLICATION_URL",
7    headers: {
8      "nlx-api-key": "YOUR_API_KEY",
9    },
10    languageCode: "fr-FR", // French language
11    userId: "userId", //required for voice
12  },
13
14  // All other options (outside 'config')
15  windowSize: "full", // Full screen mode
16  colorMode: "dark", // Dark theme
17  brandIcon: "https://your-company.com/logo-dark.png", // Specific logo for dark mode
18  launchIcon: "https://your-company.com/chat-icon.svg", // Specific launch button
19  userMessageBubble: true, // Enable bubbles for user messages
20  agentMessageBubble: false, // Disable bubbles for agent messages
21  chatMode: true, // Use classic chat layout
22  input: "voice", // Set input mode to voice only
23  theme: {
24    // More detailed theme customization
25    fontFamily: '"Roboto Slab", serif',
26    accent: "rgb(156, 39, 176)", // Purple accent
27  },
28};
29
30const touchpoint = await create(touchpointOptions);