Jump to section
01
What it actually is
The NebulaHex website widget is an AI agent that lives in a chat bubble on your site. A visitor clicks it, types a question, and gets a grounded answer drawn from your knowledge base — your help docs, product pages, policy pages, uploaded PDFs, and Q&A pairs you’ve added directly. It’s not a generic LLM riffing on whatever the model happened to learn during training; it’s a chatbot that knows your business specifically because you fed it your business specifically.
You add the widget to your site by pasting a single script tag into your HTML before the closing </body> tag. No SDK install, no package manager, no React component, no rebuild. If you can edit a theme template, drop a snippet into a Shopify theme, paste a custom HTML block in Webflow or Wix, or add a script tag in WordPress, you can ship the widget today.
Why it just works
The widget renders inside a Shadow DOM— visually isolated from your site. Your CSS doesn’t bleed in. Its CSS doesn’t bleed out. That isolation is the difference between “drop it in and it works” and “spend a week debugging why my global box-sizing rule broke the layout.”
Once embedded, the widget shows the chat bubble on every page where the snippet is present. A visitor opens it, the welcome message you wrote appears, the action chips you configured offer the most common questions as one-click prompts, and the rest is conversation. The bot pulls context from your knowledge base, cites the parts it used, and — when it can’t confidently answer — hands the conversation off to your team through the live inbox.
02
One script tag and you’re live
The embed flow is deliberately short. Inside the dashboard, open the bot you want to deploy and go to the Customize tab. At the top is a toggle labeled Allow embedding. Flip it on. The embed code block below it activates and looks something like this:
<!-- Paste before </body> -->
<script
src="https://nebulahex.com/widget.js"
data-bot-id="your-bot-id"
data-color="#6366F1"
async
></script>Copy that snippet. Paste it into your site’s HTML, ideally just before the closing </body> tag so it loads after the rest of the page is interactive. Save and publish. Reload your site and the chat bubble appears in the corner.
The same embed snippet works on any number of sites. You can drop the same bot onto your marketing site, your help center, and your landing pages all at once, and they will all share one knowledge base, one configuration, and one set of conversations. There is no separate “instance” to manage per domain.
03
Make it match your brand
A chat widget that looks like a stock template is a chat widget your visitors learn to ignore. The Customize tab gives you control over every visible part of the widget, with a live preview on the right side of the screen so you can see changes before saving.
Light or dark theme
Choose between light and dark to match your site. The selection drives the panel background, message bubbles, and input field contrast — so the widget doesn’t look like a fluorescent rectangle on a dark hero.
Primary brand color
Your accent color, applied to the FAB, header band, send button, and chip outlines. Set it to your brand and the widget reads as part of the site, not a third-party graft.
Bot display name
The name in the widget header. “Support,” “Ada,” “Maya from Acme” — whatever fits your brand voice. Default is “Support.”
Header subtitle
A short line below the bot name. The default “Typically replies instantly” sets expectations that the visitor doesn’t need to wait for office hours.
Bot avatar image
Upload an image under 500KB — a friendly character, your logomark, or a photo of the agent persona. There’s a remove button if you change your mind.
Welcome message
The first thing the visitor reads. Use it to set the tone — “Hi! Ask me anything about pricing or shipping” — instead of a generic greeting that wastes the first impression.
Action chips
Quick-reply buttons under the welcome message. Drag to reorder. Add chips for your most-asked questions — “Where’s my order?” or “Talk to a human” — and visitors who don’t know what to ask get unstuck.
Button style
Icon circle (the classic chat bubble) or text pill (wider, with a label like “Help”). The text pill is harder to miss; the icon takes less visual space.
Send button icon
Arrow or paper plane for the send action. Small detail, but it’s the icon every visitor sees every time they send a message. Pick the one that fits your aesthetic.
Bottom corner
Bottom right or bottom left. Mirrored on mobile. If you have other elements anchored to one corner — a cookie banner, a back-to-top button — pick the opposite corner.
Auto-open delay
Optional. Enter a number of seconds and the widget opens itself after that delay. Use sparingly — intrusive on a marketing page, useful on a checkout page where help matters at friction points.
Notification sounds
When the bot or an agent replies, the widget plays a soft notification sound. Toggle off if you’d rather keep the experience silent.
When the visual controls aren’t enough, paste your own Custom CSS into the textarea. It’s injected into the widget’s shadow DOM, so it only affects the widget. You get stable selectors to target — .nhx-fab, .nhx-panel, .nhx-header, .nhx-msg, .nhx-chip, .nhx-form— for pixel-level control without forking anything.
04
Built for mobile, not bolted on
The widget is built for mobile browsers as well as desktop. The position you set in the Customize tab applies to both, so a Bottom Right widget shows up bottom right on a phone. The chat panel expands to fit the screen on small viewports, the input row stays anchored above the keyboard when the visitor types, and tap targets are sized for fingers.
You don’t ship a separate mobile widget, and you don’t write any responsive CSS. The same snippet that runs on desktop runs on mobile. The same conversations land in the same inbox. If a visitor starts a chat on their phone and opens your site on a laptop later, those are separate sessions and separate threads, but you can see both side by side in your dashboard inbox.
05
Zero impact on page load
The script tag has the asyncattribute set, which means the browser fetches and runs it in parallel with the rest of your page rather than blocking the rest of the document from rendering. The widget itself doesn’t paint until it’s ready, so your above-the-fold content loads at the same speed it always did.
Because the widget renders inside a Shadow DOM, it doesn’t pull in any of your stylesheets and doesn’t push any of its styles into your global CSS. There is no cascade of “why is the widget breaking my header” or “why is my header breaking the widget.” The two stay in their own worlds.
You don’t need a build step. You don’t import a package. You don’t run a webpack config. You don’t bump a version. When we ship updates — bug fixes, new features, accessibility improvements — the script you embedded picks them up on the next page load. There’s no upgrade process to manage.
06
Where the conversations actually go
Every conversation a visitor has with your widget shows up in the NebulaHex dashboard. The Inbox is a real-time view of all open conversations across every channel — the website widget, plus any of WhatsApp, Instagram, Messenger, or Telegram you’ve connected. Conversations the bot is handling cleanly stay handled by the bot. Conversations that need a human surface as WAITING with a notification sound and a desktop notification, so your team can pick them up.
When an agent takes over a conversation, they see the full transcript — every visitor message, every bot reply, the citations the bot used, and the question that triggered the handoff. They aren’t starting from scratch. They reply directly inside the dashboard, the visitor sees the agent’s display name in place of the bot, and the conversation continues seamlessly inside the same chat panel the visitor was already using.
You don’t need to be online for any of this to work. The bot answers around the clock using your knowledge base, so a customer asking about your refund policy at 11pm on a Saturday gets the right answer immediately. The handoff inbox is for the conversations that genuinely need a person — the cancellation, the bug report with a screenshot, the prospect with a question your knowledge base doesn’t cover yet — and your team can work through those on their own schedule.
07
Real scenarios
What the widget actually does, in the situations that matter:
SaaS pricing page
A visitor lands from a comparison article wanting to know if your Pro plan includes a specific integration. Without a widget, they’d dig through docs or close the tab. With one, they tap a chip labeled “What’s in Pro?” the bot answers from your pricing page, and the visitor signs up that afternoon.
E-commerce on Black Friday
Support inbox is buried. A customer wants to know if a specific item is in stock in their size. They open the widget on the product page, the bot answers from your inventory feed in seconds, the customer adds to cart. The complex case — “cancel and reorder” — gets escalated to your one available agent.
B2B services after hours
A potential client lands on your case studies page late at night. They have a specific question about healthcare experience. The widget answers from a case study you wrote two years ago — one they would never have found on their own. They tap a chip to book a call. Your sales team has a meeting on the calendar by morning.
Course catalog comparison
A student is comparing two of your courses, wanting to know which assumes prior experience with a specific tool. The widget answers from your course descriptions, suggests a starter quiz, and the student picks the right course the first time — instead of refunding a week later.
08
Why NebulaHex over the alternatives
A lot of chat widgets are dumb chatboxes that route everything to a human. Others are stitched-together bot products that need a separate “knowledge” tool, a separate “live chat” tool, and a separate “automation” tool to add up to a working setup. NebulaHex is one product where ingestion, the bot, the widget, the inbox, the integrations, and the analytics are all parts of the same dashboard.
Most chat widgets
- A dumb chatbox that routes everything to a human
- A separate knowledge tool, live chat tool, and automation tool stitched together
- A generic LLM riffing on whatever it learned during training
- One product per channel — rebuilt for every surface
NebulaHex
- A grounded AI agent answering questions instantly, escalating only what needs you
- One platform: ingestion, bot, widget, inbox, integrations, analytics
- An agent fed your knowledge directly, citing the sources it used
- One knowledge base powering every channel from one dashboard
The bot is grounded in the knowledge you give it. You’re not relying on a model’s general training to know what your refund policy says — you’re feeding the model your refund policy directly, and the answers cite which sources they used. That grounding is what makes the difference between a chatbot that confidently invents the wrong answer and one that says, accurately, what your business actually does.
You can deploy the same bot to WhatsApp, Instagram, Messenger, and Telegram from the same dashboard once you’re ready to expand beyond your website. One knowledge base powers every conversation across every surface. And the price scales with your usage rather than your team size.
09
Trust & security
Your knowledge base, your conversations, your customer data — all of it is encrypted at rest and in transit. The widget loads over HTTPS. Conversations sync to your dashboard over secure connections. Sensitive credentials for any integrations you connect are encrypted before they hit storage.
Access inside your workspace is governed by roles. Owners control billing and full platform access; admins manage bots, team, and integrations; editors edit content and knowledge; viewers get read-only access. Not everyone on your team gets the keys to everything.
Your data is yours. We do not use your customer conversations to train AI models. You can delete a conversation, a knowledge source, or your entire workspace at any time. The encryption, role-based access, OAuth-based integration connections, and HMAC-signed webhooks are all live today. See our privacy policy and terms of service for the full posture.
10
Ship a widget today
You can have a working AI chat widget on your site in less time than it takes to read this page end to end. Sign up for the free plan — no credit card needed — create a bot, paste a couple of URLs into the knowledge tab, open the Customize tab, flip on Allow embedding, and copy the script onto your site.
Ready when you are
The widget is the easiest channel to ship and the highest-volume channel most businesses run. Get it live, and the rest of the platform is there when you’re ready to expand.