Touchpoint Setup
Configuration
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.4/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 }, 16 }); 17 18 </script> 19 </body> 20</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.4/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 }, 16 // Brand customization 17 colorMode: "light", // "light" or "dark" 18 theme: { 19 accent: "#0066CC", // Your brand color 20 fontFamily: '"Inter", sans-serif', // Your brand font 21 }, 22 brandIcon: "https://yoursite.com/logo.png", // Header logo 23 launchIcon: "https://yoursite.com/chat-icon.svg", // Chat button icon 24 }); 25 26 </script> 27 </body> 28</html>
Voice Input
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.4/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: currentUser.userId // or however you identify your users 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 | No | Persistent user identifier |
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.4/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 }, 19 }; 20 21 </script> 22 </body> 23</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.4/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 conversationId: "existing-conversation-id", 19 responses: [ 20 // Array of previous Response objects 21 ], 22 }, 23 }; 24 25 </script> 26 </body> 27</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.4/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 }, 19 windowSize: "half", 20 colorMode: "dark", 21 brandIcon: "https://yoursite.com/logo.png", 22 launchIcon: "https://yoursite.com/chat-icon.svg", 23 input: "text" 24 }; 25 26 </script> 27 </body> 28</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.4/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 }, 19 chatMode: true, 20 userMessageBubble: true, 21 agentMessageBubble: true 22 }; 23 24 </script> 25 </body> 26</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.4/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 }, 19 theme: { 20 fontFamily: '"Helvetica Neue", sans-serif', 21 accent: "rgb(28, 99, 218)" 22 } 23 }; 24 25 </script> 26 </body> 27</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.4/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 }, 19 initialContext: { 20 userTier: "premium", 21 currentPage: "/products", 22 }, 23 customModalities: { 24 OrderDetails: OrderDetailsComponent, 25 MapDisplay: MapDisplayComponent, 26 }, 27 }; 28 29 </script> 30 </body> 31</html>