NLX | Developers

The chat widget supports fully custom embeddable components to augment the out-of-the-box chat bubbles and choice buttons. Embeddable components represent the best-of-both-worlds combination of a fully built widget and one custom-engineered from the ground up.

How it works

As the widget is built in React, it exposes the React instance that allows the user to define embeddable components that not only support fully custom styling but can interact with the conversation in a granular way. This component is included in the customModalities field of the widget configuration, and is rendered whenever the modality by the same key is triggered:

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 defer src="https://cdnjs.cloudflare.com/ajax/libs/htm/3.1.1/htm.js" integrity="sha512-RilD4H0wcNNxG2GvB+L1LRXCntT0zgRvRLnmGu+e9wWaLKGkPifz3Ozb6+WPsyEkTBLw6zWCwwEjs9JLL1KIHg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
11    <script>
12      const contentLoaded = () => {
13        if (document.readyState === "loading") {
14          return new Promise((resolve) => {
15            window.addEventListener("DOMContentLoaded", () => {
16              resolve();
17            });
18          });
19        } else {
20          return Promise.resolve();
21        }
22      };
23
24      contentLoaded().then(() => {
25
26        // EMBEDDABLE COMPONENT SETUP
27        // Destructure dependencies
28        const React = nlxai.chatWidget.React;
29        const useConversationHandler = nlxai.chatWidget.useConversationHandler;
30
31        // Use the https://github.com/developit/htm package as a JSX alternative
32        const html = htm.bind(React);
33
34        // Render component that supports user interaction and conversation handler support
35        const SendExampleSlot = () => {
36          const conversationHandler = useConversationHandler();
37          return html`
38            <button onClick=${() => {
39              conversationHandler.sendSlots({ "firstName": "Rachel" });
40            }>Send a slot</button>
41          `;
42        };
43        // EMBEDDABLE COMPONENT SETUP END
44
45        const widget = nlxai.chatWidget.create({
46          config: {
47            botUrl: "REPLACE_WITH_BOT_URL",
48            headers: {
49              "nlx-api-key": "REPLACE_WITH_API_KEY"
50            },
51            languageCode: "en-US"
52          },
53          // Include custom embeddable component under the 'customModalities' field
54          customModalities: { SendExampleSlot },
55          titleBar: {
56            "title": "Support chat"
57          },
58          
59        });
60      });
61    </script>
62  </body>
63</html>