NLX | Developers

The simplest way to talk to an application is to include an out-of-the-box Touchpoint widget on your existing website.

1<!-- Touchpoint sample HTML -->
2<!-- Downloaded from https://developers.nlx.ai -->
3<html lang="en">
4  <head>
5    <title>Touchpoint Sample HTML</title>
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7  </head>
8  <body>
9    <script defer src="https://unpkg.com/@nlxai/touchpoint-ui/lib/index.umd.js"></script>
10    <script>
11      const contentLoaded = () => {
12        if (document.readyState === "loading") {
13          return new Promise((resolve) => {
14            window.addEventListener("DOMContentLoaded", () => {
15              resolve();
16            });
17          });
18        } else {
19          return Promise.resolve();
20        }
21      };
22
23      contentLoaded().then(() => {
24        const touchpointInstance = nlxai.touchpointUi.create({
25          config: {
26            botUrl: "REPLACE_WITH_BOT_URL",
27            headers: {
28              "nlx-api-key": "REPLACE_WITH_API_KEY"
29            },
30            languageCode: "en-US"
31          },
32        });
33      });
34    </script>
35  </body>
36</html>

In this snippet, the script is deferred in order to reduce impact on page speed. After the script is initialized, we use the nlxai.touchpointUi global to instantiate the widget. The following parameters are used:

config: the bot configuration, including the bot URL obtained and headers obtained from the deployment of your bot.