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

const touchpointConfig = {
  // Core configuration (required)
  config: {
    applicationUrl: "https://your-bot.studio.nlx.ai/...",
    headers: {
      "nlx-api-key": "YOUR_API_KEY",
    },
    languageCode: "en-US",
  },
};

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

const touchpointConfig = {
  // Core configuration (required)
  config: {
    applicationUrl: "https://your-bot.studio.nlx.ai/...",
    headers: {
      "nlx-api-key": "YOUR_API_KEY",
    },
    languageCode: "en-US",
    conversationId: "existing-conversation-id",
    responses: [
      // Array of previous Response objects
    ],
  },
};

💡 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

const touchpointConfig = {
  // Core configuration (required)
  config: {
    applicationUrl: "https://your-bot.studio.nlx.ai/...",
    headers: {
      "nlx-api-key": "YOUR_API_KEY"
    },
    languageCode: "en-US",
  },
  windowSize: "half",
  colorMode: "dark",
  brandIcon: "https://yoursite.com/logo.png",
  launchIcon: "https://yoursite.com/chat-icon.svg",
  input: "text"
};

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

const touchpointConfig = {
  // Core configuration (required)
  config: {
    applicationUrl: "https://your-bot.studio.nlx.ai/...",
    headers: {
      "nlx-api-key": "YOUR_API_KEY"
    },
    languageCode: "en-US",
  },
  chatMode: true,
  userMessageBubble: true,
  agentMessageBubble: true
};

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

const touchpointConfig = {
  // Core configuration (required)
  config: {
    applicationUrl: "https://your-bot.studio.nlx.ai/...",
    headers: {
      "nlx-api-key": "YOUR_API_KEY"
    },
    languageCode: "en-US",
  },
  theme: {
    fontFamily: '"Helvetica Neue", sans-serif',
    accent: "rgb(28, 99, 218)"
  }
};

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

const touchpointConfig = {
  // Core configuration (required)
  config: {
    applicationUrl: "https://your-bot.studio.nlx.ai/...",
    headers: {
      "nlx-api-key": "YOUR_API_KEY",
    },
    languageCode: "en-US",
  },
  initialContext: {
    userTier: "premium",
    currentPage: "/products",
  },
  customModalities: {
    OrderDetails: OrderDetailsComponent,
    MapDisplay: MapDisplayComponent,
  },
};