There's no SDK to install and no framework-specific package. The widget is a single script tag, so it works the same way whether your site is a static HTML page, a WordPress theme, or a React app.
The snippet
From Widget Settings, copy the embed snippet — it looks like this:
<script src="https://yourdomain.com/widget.js" data-key="YOUR_API_KEY"></script>
Paste it before the closing </body> tag of your site. That's the entire integration — the widget loads, reads your configured settings, and renders itself in the position and theme you set.
Using it in a React or Next.js app
Since it's a plain script tag, drop it into your root HTML template (index.html, or app/layout.tsx in Next.js via next/script) rather than a component — it only needs to load once per page, not re-render with the rest of your app.
Keeping the key safe
The data-key in the snippet identifies your organization to the widget, not a secret credential meant to be hidden — it's designed to sit in public page source. What actually controls where it can be used is allowed origins in Widget Settings: if a domain isn't on that list, the widget refuses to load there even with a valid key. Set your production domain (and staging domain, if you test there) before going live.
Verifying it's live
Once the snippet is on the page, open your site and confirm the widget appears in the position you configured. If it doesn't show up, check that the widget is enabled and that the current domain is in your allowed origins list.
Related reading
- Customizing your chat widget to match your brand — once it's live, make it look like it belongs on your site.
- Turning your docs into an AI chatbot — connect a source before or after embedding the widget.
- A tour of the Lumen Chat dashboard — where to find the embed snippet and everything else.
Grab your embed snippet and you're one paste away from a live chatbot.