Showing and Hiding Touchpoint

The visibility of Touchpoint UI can be programmatically controlled including showing, hiding, and completely removing Touchpoint from your webpage. You interact with the Touchpoint UI through the

TouchpointInstance object returned when you initialize Touchpoint.

• Showing and Hiding the Chat Window
  • Example: Open Chat on Page Load
  • Example: Toggle Chat with a Custom Button
• Completely Removing Touchpoint UI from the DOM
• Example: Open Touchpoint UI After User Inactivity

Showing and Hiding the Chat Window

You can show or hide the Touchpoint UI window by setting the

expanded boolean property on the TouchpointInstance.

• touchpoint.expanded = true; opens the chat window.
• touchpoint.expanded = false; collapses the chat window to the launch icon (if visible) or hides it if the launch icon is disabled.

HTMLJS
1<script type="module">
2  import { create, React, html } from "https://unpkg.com/@nlxai/touchpoint-ui@1.0.5-alpha.12/lib/index.js?module";
3  
4  // Initialize Touchpoint
5  const touchpoint = await create({
6    config: {
7      applicationUrl: "YOUR_APPLICATION_URL",
8      headers: { "nlx-api-key": "YOUR_API_KEY" },
9      languageCode: "en-US",
10      userId: crypto.randomUUID(),
11    },
12  });
13  
14  // To open the chat window:
15  // touchpoint.expanded = true;
16  
17  // To close the chat window:
18  // touchpoint.expanded = false;
19  
20  // Example: Open the chat window after 2 seconds
21  setTimeout(() => {
22    touchpoint.expanded = true;
23  }, 2000);
24  
25</script>

Example: Open Chat on Page Load

To have the Touchpoint UI automatically expanded when your page loads:

HTMLJS
1<script type="module">
2  import { create, React, html } from "https://unpkg.com/@nlxai/touchpoint-ui@1.0.5-alpha.12/lib/index.js?module";
3  
4  const touchpoint = await create({
5    config: {
6      applicationUrl: "YOUR_APPLICATION_URL",
7      headers: { "nlx-api-key": "YOUR_API_KEY" },
8      languageCode: "en-US",
9    },
10  });
11  
12  // Open immediately after initialization
13  touchpoint.expanded = true;
14  
15</script>

Example: Toggle Chat with a Custom Button

If you prefer to use your own button to control the Touchpoint UI, disable the default launch icon by setting

launchIcon: false in the configuration. Then, use the expanded property to toggle visibility.

For details on

launchIcon and custom launch button styling, see the Theming and Styling guide and the Custom Launch guide.

HTMLJS
1<script type="module">
2  import { create, React, html } from "https://unpkg.com/@nlxai/touchpoint-ui@1.0.5-alpha.12/lib/index.js?module";
3  
4  const touchpoint = await create({
5    config: {
6      applicationUrl: "YOUR_APPLICATION_URL",
7      headers: { "nlx-api-key": "YOUR_API_KEY" },
8      languageCode: "en-US",
9      userId: crypto.randomUUID(),
10    },
11    launchIcon: false, // Disable the default launch button
12  });
13  
14  const customButton = document.getElementById("my-custom-chat-button");
15  if (customButton) {
16    customButton.addEventListener("click", () => {
17      touchpoint.expanded = !touchpoint.expanded;
18    });
19  }
20  
21</script>

HTML

1<button id="my-custom-chat-button">Toggle Chat</button>

Completely Removing Touchpoint UI from the DOM

To entirely remove Touchpoint UI from your page (including its associated DOM elements and event listeners), call the

teardown() method on the TouchpointInstance. This is useful when navigating away from a page in a single-page application or when the chat functionality is no longer needed.

HTMLJS
1<script type="module">
2  import { create, React, html } from "https://unpkg.com/@nlxai/touchpoint-ui@1.0.5-alpha.12/lib/index.js?module";
3  
4  const touchpoint = await create({
5    config: {
6      applicationUrl: "YOUR_APPLICATION_URL",
7      headers: { "nlx-api-key": "YOUR_API_KEY" },
8      languageCode: "en-US",
9      userId: crypto.randomUUID(),
10    },
11  });
12  
13  // To remove Touchpoint (e.g., on a button click or page navigation):
14  document
15    .getElementById("remove-chat-button")
16    .addEventListener("click", () => {
17      touchpoint.teardown();
18    });
19  
20</script>

Example: Open Touchpoint UI After User Inactivity

You can combine these methods with browser events or timers to create more dynamic interactions, such as proactively opening the Touchpoint UI after a period of user inactivity.

HTMLJS
1<script type="module">
2  import { create, React, html } from "https://unpkg.com/@nlxai/touchpoint-ui@1.0.5-alpha.12/lib/index.js?module";
3  
4  const touchpoint = await create({
5    config: {
6      applicationUrl: "YOUR_APPLICATION_URL",
7      headers: { "nlx-api-key": "YOUR_API_KEY" },
8      languageCode: "en-US",
9      userId: crypto.randomUUID(),
10    },
11  });
12  
13  let inactivityTimer;
14  
15  const resetInactivityTimer = () => {
16    clearTimeout(inactivityTimer);
17    // Do not open if already expanded or if UI has been torn down
18    if (touchpoint && !touchpoint.expanded) {
19      inactivityTimer = setTimeout(() => {
20        if (touchpoint && !touchpoint.expanded) {
21          // Double check before expanding
22          touchpoint.expanded = true;
23        }
24      }, 30000); // Open after 30 seconds of inactivity
25    }
26  };
27  
28  // Events that indicate user activity
29  const activityEvents = [
30    "mousemove",
31    "mousedown",
32    "keypress",
33    "scroll",
34    "touchstart",
35  ];
36  activityEvents.forEach((event) => {
37    document.addEventListener(event, resetInactivityTimer, true);
38  });
39  
40  // Initialize the timer
41  resetInactivityTimer();
42  
43</script>