NLX | Developers

The simplest way to talk to a bot is to include an out-of-the-box chat widget on your existing website.

1<!-- Chat widget sample HTML -->
2<!-- Downloaded from https://nlxai.github.io/chat-sdk -->
3<html lang="en">
4  <head>
5    <title>NLX Widget 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/chat-widget/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 widget = nlxai.chatWidget.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          titleBar: {
33            "title": "Support chat"
34          },
35          
36        });
37      });
38    </script>
39  </body>
40</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.chatWidget 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.
titleBar: configuration for the header bar of the widget, containing the following fields:
- title: the text content of the title, e.g. "Support chat".
- logo: the static URL of a logo image that appears left of the title.