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
- Optional Customization Fields
- Common Configuration Examples
- Fully Customized Touchpoint Example
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);
- Previous
- Touchpoint: Quick Start