Developer Docs

Touchpoint

Configuration

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

FieldTypeDescription
config.applicationUrlstringThe URL endpoint for your NLX application
config.headers["nlx-api-key"]stringYour NLX API key
config.languageCodestringThe language code for the chat interface
config.userIdStringRequired only with input is set to voice

Optional Customization Fields

FieldTypeDefaultDescription
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
brandIconstringundefinedURL for your brand icon in the chat header
launchIconstring | booleantrueURL for the icon on the launch button. false hides it, true or undefined uses default.
userMessageBubblebooleanfalseSpecifies whether the user message has bubbles or not
agentMessageBubblebooleanfalseSpecifies whether the agent message has bubbles or not
chatModebooleanfalseEnables chat mode, a classic chat experience with inline loaders and the chat history visible at all times.
themePartial<Theme>See ThemingCustom theme configuration object. See Theming for details on theme properties.
customModalitiesRecord<string, CustomModalityComponent>{}Optional custom modality components to render in Touchpoint. Key is the modality name, value is the component. See Components.
initializeConversation(handler: ConversationHandler) => voidSends welcome intentCustom 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);