Visibility Management

• Managing Expanded State
  • Example Open chat on page load
  • Example Toggle chat with custom button
  • Example open chat based on user behavior
• Removing Touchpoint from the DOM

The Touchpoint widget's visibility can be dynamically controlled properly removing it from the DOM through the returned Touchpoint Instance.

Managing Expanded State

The expanded property allows you to programmatically show or hide the chat window:

1// Initialize Touchpoint
2import { create } from "@nlxai/touchpoint-ui";
3
4const touchpoint = await create({
5  config: {
6    applicationUrl: "YOUR_APPLICATION_URL",
7    headers: {
8      "nlx-api-key": "YOUR_API_KEY",
9    },
10    languageCode: "en-US",
11  },
12});
13
14// Open the chat window programmatically
15touchpoint.expanded = true;
16
17// Close the chat window programmatically
18touchpoint.expanded = false;

Example Open chat on page load

If you want the chat widget to be automatically expanded when your page loads:

1const touchpoint = await create({
2  config: {
3    applicationUrl: "YOUR_APPLICATION_URL",
4    headers: {
5      "nlx-api-key": "YOUR_API_KEY",
6    },
7    languageCode: "en-US",
8  },
9});
10
11// Open immediately after initialization
12touchpoint.expanded = true;

Example Toggle chat with custom button

Create your own button to open and close the chat:

1const touchpoint = await create({
2  config: {
3    applicationUrl: "YOUR_APPLICATION_URL",
4    headers: {
5      "nlx-api-key": "YOUR_API_KEY",
6    },
7    languageCode: "en-US",
8  },
9  // Optionally hide the default launcher
10  launchIcon: false,
11});
12
13// Add click event to your custom button
14document.getElementById("my-chat-button").addEventListener("click", () => {
15  touchpoint.expanded = !touchpoint.expanded;
16});

Example open chat based on user behavior

Open the chat after a user has been on the page for a certain amount of time:

1const touchpoint = await create({
2  config: {
3    applicationUrl: "YOUR_APPLICATION_URL",
4    headers: {
5      "nlx-api-key": "YOUR_API_KEY",
6    },
7    languageCode: "en-US",
8  },
9});
10
11// Open chat after 30 seconds
12setTimeout(() => {
13  touchpoint.expanded = true;
14}, 30000);

Removing Touchpoint from the DOM

When you need to completely remove the Touchpoint widget from your page, use the teardown() method:

1const touchpoint = await create({
2  config: {
3    applicationUrl: "YOUR_APPLICATION_URL",
4    headers: {
5      "nlx-api-key": "YOUR_API_KEY",
6    },
7    languageCode: "en-US",
8  },
9});
10
11// Later, when you want to remove the widget:
12touchpoint.teardown();