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      window.addEventListener("DOMContentLoaded", () => {
13
14        // EMBEDDABLE COMPONENT SETUP
15        // Destructure dependencies
16        const React = nlxai.chatWidget.React;
17        const useConversationHandler = nlxai.chatWidget.useConversationHandler;
18
19        // Use the https://github.com/developit/htm package as a JSX alternative
20        const html = htm.bind(React);
21
22        // Render component that supports user interaction and conversation handler support
23        const SendExampleSlot = () => {
24          const conversationHandler = useConversationHandler();
25          return html`
26            <button onClick=${() => {
27              conversationHandler.sendSlots({ "firstName": "Rachel" });
28            }>Send a slot</button>
29          `;
30        };
31        // EMBEDDABLE COMPONENT SETUP END
32
33        const widget = nlxai.chatWidget.create({
34          config: {
35            botUrl: "REPLACE_WITH_BOT_URL",
36            headers: {
37              "nlx-api-key": "REPLACE_WITH_API_KEY"
38            },
39            languageCode: "en-US"
40          },
41          // Include custom embeddable component under the 'customModalities' field
42          customModalities: { SendExampleSlot },
43          titleBar: {
44            "title": "Support chat"
45          },
46          
47        });
48      });
49    </script>
50  </body>
51</html>