NLX | Developers

The launch behavior of the Touchpoint-UI widget can be customized with both custom visual elements and custom initialization logic.

Customizing Conversation Initialization

By default, Touchpoint starts a conversation by sending a welcome intent when the widget is launched. You can provide a function to the initializeConversation option to customize this behavior:

Send a different intent than the default welcome intent
Include custom context data with the welcome intent
Perform additional operations before starting the conversation
Add custom logging or tracking at initialization time

Initialization Function

The provided function will be passed the ConversationHandler

1type InitializeConversation = (handler: ConversationHandler) => void;

Where ConversationHandler provides the following methods:

Method	Description
`sendWelcomeIntent(context?)`	Sends the welcome intent with optional context. Context Variables must be defined within NLX to be used in your flows.
`sendIntent(intent, context?)`	Sends a specific intent with optional context. The specific intent must be defined as a flow in your NLX application

Example sending user information on Touchpoint Launch

The context passed (userId and userTier) need to be defined as Context Variables within your Workspace to be used within the flow.

1import { create, type InitializeConversation } from "@nlxai/touchpoint-ui";
2
3const initializeWithUserContext: InitializeConversation = (handler) => {
4  // Include user information in the context
5  handler.sendWelcomeIntent({
6    userId: "user123",
7    userTier: "premium"
8  });
9};
10
11const touchpoint = await create({
12  config: {
13    applicationUrl: "YOUR_APPLICATION_URL",
14    headers: {
15      "nlx-api-key": "YOUR_API_KEY",
16    },
17    languageCode: "en-US",
18  },
19  initializeConversation: initializeWithUserContext,
20});

Example launching Touchpoint with a custom intent

The specific intent (CheckOrderStatus) must be defined as a flow within your NLX application.

1import { create, type InitializeConversation } from "@nlxai/touchpoint-ui";
2
3const initializeWithCustomIntent: InitializeConversation = (handler) => {
4  // Send a specific intent instead of the welcome intent
5  handler.sendIntent("CheckOrderStatus", {
6    source: "website",
7    pageUrl: window.location.href
8  });
9};
10
11const touchpoint = await create({
12  config: {
13    applicationUrl: "YOUR_APPLICATION_URL",
14    headers: {
15      "nlx-api-key": "YOUR_API_KEY",
16    },
17    languageCode: "en-US",
18  },
19  initializeConversation: initializeWithCustomIntent,
20});

Example passing API Key on Touchpoint Launch

The context passed (UserApiKey) needs to be defined as Context Variables within your Workspace to be used within the flow.

1import { create, type InitializeConversation } from "@nlxai/touchpoint-ui";
2
3// Assume userCredential holds the API key needed for the conversation
4const userCredential = "USER_SPECIFIC_API_KEY";
5
6const initializeWithAPIKey: InitializeConversation = (handler) => {
7  console.log("Initializing conversation with custom API key context");
8  // Send the welcome intent, but include the API key in the context
9  handler.sendWelcomeIntent({ UserApiKey: userCredential });
10};
11
12const touchpoint = await create({
13  config: {
14    applicationUrl: "YOUR_APPLICATION_URL",
15    headers: {
16      "nlx-api-key": "YOUR_GENERAL_API_KEY", // General key for initial connection
17    },
18    languageCode: "en-US",
19  },
20  initializeConversation: initializeWithAPIKey,
21});