NLX | Developers

Setup snippet

1<!-- Chat widget sample HTML -->
2<!-- Downloaded from https://developers.nlx.ai -->
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",
34            "withCollapseButton": true,
35            "withCloseButton": true
36          },
37          // CUSTOM BEHAVIOR SNIPPET
38          onExpand: (conversationHandler) => {
39            const checkMessages = (messages) => {
40              if (messages.length === 0) {
41                conversationHandler.sendWelcomeIntent();
42              }
43              conversationHandler.unsubscribe(checkMessages);
44            };
45            conversationHandler.subscribe(checkMessages);
46          },
47          // CUSTOM BEHAVIOR SNIPPET END
48          theme: {
49            "primaryColor": "#2663da",
50            "darkMessageColor": "#2663da",
51            "lightMessageColor": "#EFEFEF",
52            "white": "#FFFFFF",
53            "fontFamily": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif",
54            "spacing": 12,
55            "borderRadius": 8,
56            "chatWindowMaxHeight": 640
57          }
58        });
59      });
60    </script>
61  </body>
62</html>