Developer Docs

Web widget

Try live

You can try your bots directly on this configuration widget.

Setup

In order for the bot communication to work (i.e., not trigger CORS errors), make sure that the URL of your webpage is added to the whitelisted URL list of your API channel in Dialog Studio.

Theme

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>