NLX | Developers

Setup snippet

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      window.addEventListener("DOMContentLoaded", () => {
12        const widget = nlxai.chatWidget.create({
13          config: {
14            botUrl: "REPLACE_WITH_BOT_URL",
15            headers: {
16              "nlx-api-key": "REPLACE_WITH_API_KEY"
17            },
18            languageCode: "en-US"
19          },
20          titleBar: {
21            "title": "Support",
22            "withCollapseButton": true,
23            "withCloseButton": true
24          },
25          // CUSTOM BEHAVIOR SNIPPET
26          onExpand: (conversationHandler) => {
27            const checkMessages = (messages) => {
28              if (messages.length === 0) {
29                conversationHandler.sendWelcomeIntent();
30              }
31              conversationHandler.unsubscribe(checkMessages);
32            };
33            conversationHandler.subscribe(checkMessages);
34          },
35          // CUSTOM BEHAVIOR SNIPPET END
36          theme: {
37            "primaryColor": "#2663da",
38            "darkMessageColor": "#2663da",
39            "lightMessageColor": "#EFEFEF",
40            "white": "#FFFFFF",
41            "fontFamily": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif",
42            "spacing": 12,
43            "borderRadius": 8,
44            "chatWindowMaxHeight": 640
45          }
46        });
47      });
48    </script>
49  </body>
50</html>