NLX | Developers

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

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.


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.3/lib/index.js?module";
9      
10      // Initialize Touchpoint
11      const touchpoint = await create({
12        config: {
13          applicationUrl: "YOUR_APPLICATION_URL",
14          headers: { "nlx-api-key": "YOUR_API_KEY" },
15          languageCode: "en-US",
16          userId: crypto.randomUUID(),
17        },
18      });
19      
20      // To open the chat window:
21      // touchpoint.expanded = true;
22      
23      // To close the chat window:
24      // touchpoint.expanded = false;
25      
26      // Example: Open the chat window after 2 seconds
27      setTimeout(() => {
28        touchpoint.expanded = true;
29      }, 2000);
30      
31    </script>
32  </body>
33</html>

Example: Open Chat on Page Load

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


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.3/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      // Open immediately after initialization
19      touchpoint.expanded = true;
20      
21    </script>
22  </body>
23</html>

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.


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.3/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: crypto.randomUUID(),
16        },
17        launchIcon: false, // Disable the default launch button
18      });
19      
20      const customButton = document.getElementById("my-custom-chat-button");
21      if (customButton) {
22        customButton.addEventListener("click", () => {
23          touchpoint.expanded = !touchpoint.expanded;
24        });
25      }
26      
27    </script>
28  </body>
29</html>

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.


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.3/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: crypto.randomUUID(),
16        },
17      });
18      
19      // To remove Touchpoint (e.g., on a button click or page navigation):
20      document
21        .getElementById("remove-chat-button")
22        .addEventListener("click", () => {
23          touchpoint.teardown();
24        });
25      
26    </script>
27  </body>
28</html>

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.


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.3/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: crypto.randomUUID(),
16        },
17      });
18      
19      let inactivityTimer;
20      
21      const resetInactivityTimer = () => {
22        clearTimeout(inactivityTimer);
23        // Do not open if already expanded or if UI has been torn down
24        if (touchpoint && !touchpoint.expanded) {
25          inactivityTimer = setTimeout(() => {
26            if (touchpoint && !touchpoint.expanded) {
27              // Double check before expanding
28              touchpoint.expanded = true;
29            }
30          }, 30000); // Open after 30 seconds of inactivity
31        }
32      };
33      
34      // Events that indicate user activity
35      const activityEvents = [
36        "mousemove",
37        "mousedown",
38        "keypress",
39        "scroll",
40        "touchstart",
41      ];
42      activityEvents.forEach((event) => {
43        document.addEventListener(event, resetInactivityTimer, true);
44      });
45      
46      // Initialize the timer
47      resetInactivityTimer();
48      
49    </script>
50  </body>
51</html>