What it is
The chat bubble is a floating button in the bottom-right corner of your website. Visitors click it to open a chat window and talk to your assistant right there. It is a single script tag, and there is no widget key to manage, because everything is resolved from your DrusyAI subdomain.
One script tag
Paste it once before </body>. No key, no attributes.
No-code setup
Title, greeting, and color are all set in the dashboard.
AI + human
Your AI replies instantly; staff can take over any time.
Quick start
Already have your Web Chat channel set up? Copy the snippet, replace your-subdomain with your workspace subdomain, and paste it just before your closing body tag.
<!-- Paste just before the closing </body> tag -->
<script src="https://your-subdomain.drusy.ai/chat/widget.js" async></script>Installation
Four steps: set up the channel, allow your domains, activate, then drop in the snippet.
Open the Web Chat channel
In DrusyAI, go to your channels and open Web Chat. If it does not exist yet, create it. This is the channel that powers the bubble on your website.
- Web Chat channel created
- You have admin access to the workspace
Add your website domains to Allowed origins
List every domain where the bubble should appear. This allowlist is required, so the widget will not load on a domain that is not listed.
- Production domain added
- www and apex versions both added if you use both
- Staging or preview domains added if needed
Test and activate
Run the built-in Test to validate the channel configuration. It is instant. Once it passes, activate the channel so it can start serving the widget.
- Test passed
- Channel status shows Active
Copy the snippet and add it to your site
Copy the script tag from the channel page and paste it just before the closing body tag on every page where you want the bubble to appear.
- Snippet copied
- Pasted before </body>
- Added to every page (usually via your site template or footer)
Add the snippet
The snippet is the same everywhere. How you add it depends on how your site is built. Here are the two most common setups.
Plain HTML site
Paste it just before the closing body tag, ideally in a shared footer template so it appears on every page.
<!-- Paste just before the closing </body> tag -->
<script src="https://your-subdomain.drusy.ai/chat/widget.js" async></script>Next.js
Use the built-in Script component in your root layout so the widget loads on every route.
import Script from "next/script";
// In your root layout, at the end of <body>
<Script
src="https://your-subdomain.drusy.ai/chat/widget.js"
strategy="afterInteractive"
/>Configuration
Everything is configured on the Web Chat channel page, with no code changes needed. Updates take effect on the visitor’s next session.
| Setting | Limit | Notes |
|---|---|---|
| Allowed origins | Up to 20 | Exact origin only, e.g. https://yoursite.com, not yoursite.com and not a URL with a path or trailing slash. Each subdomain and environment (staging, prod, www vs. apex) needs its own entry. |
| Widget title | 60 characters | Shown in the chat header. |
| Greeting message | 300 characters | The first assistant message a brand-new visitor sees. It only shows when there is no prior conversation history. |
| Theme color | 6-digit hex | Colors the bubble and the chat header. Use a full hex value like #4f46e5. Shorthand (#fff) and named colors (indigo) are not accepted. |
Customize the look
Set the theme color, title, and greeting to match your brand. Try it below. The preview updates live as you change the settings, and you can send a message to see how the conversation flows.
Try the settings
This is an illustrative preview. Live replies come from your assistant once the widget is installed.
How it works
A quick mental model, without the plumbing:
One script, everything resolved from your subdomain
There is no key to copy or rotate. The script knows which channel it belongs to from your subdomain.
Your domains are checked, then the chat loads securely
The script confirms the page is on one of your allowed domains, then loads the chat experience in a secure frame hosted by DrusyAI.
Replies arrive live
AI responses, and staff replies if a human takes over, appear instantly, with no page reload. A typing indicator shows while a reply is being written.
It fails silently
If the domain is not allowed or the channel is not active, nothing renders for your visitors, just a quiet note in the browser console for developers.
Visitor experience
What your visitors get, out of the box:
Anonymous & persistent
No sign-in required. A visitor ID stored in the browser keeps the conversation across reloads and repeat visits on the same device.
Never interrupted
Sessions last 24 hours and refresh silently in the background, so visitors are not logged out mid-chat.
Picks up where they left off
The last 50 messages load when the widget opens. New visitors see your greeting instead.
Instant, forgiving sending
Messages appear the moment they are sent. If a send fails, it is clearly marked so the visitor can retry.
Keyboard-friendly
Enter sends, Shift+Enter adds a new line. Messages can be up to 4,000 characters.
Mobile-ready
Below 480px the chat opens full screen instead of a floating card, so it is easy to use on phones.
Security & privacy
The widget is designed so your site never has to handle anything sensitive.
- Your allowlist is the gatekeeper, and only the domains you list can load the widget.
- The conversation runs inside a secure frame hosted by DrusyAI. Your site never handles the chat data directly.
- No API key or secret ever appears in your page source, so there is nothing sensitive to extract from the snippet.
- Visitors are anonymous, and their conversation is tied to their browser, not to an account.
Managing the channel
Deactivating
Deactivating the channel stops new messages immediately, including for visitors who already have the chat open, whose next send will fail. The bubble will not reappear on a fresh page load while the channel is inactive.
Changing configuration
Changes to the title, greeting, color, or allowed origins apply on the next session. Open tabs pick up the update automatically once their session refreshes.
Troubleshooting
Most issues come down to the allowlist or the channel status.
| Symptom | Likely cause | Fix |
|---|---|---|
| The bubble never appears | The channel is not Active, or the page's exact origin is not in Allowed origins. | Activate the channel and confirm the page's origin matches an allowlist entry exactly. |
| It works on one domain but not another | Each domain is separate: www vs. apex, and staging vs. production. | Add every domain and subdomain you use as its own Allowed origins entry. |
| The bubble disappeared after working before | The channel was deactivated, or the business became inactive. | Re-activate the Web Chat channel and confirm the workspace is active. |
| A visitor's history seems to have disappeared | History is tied to the visitor's browser, not an account. They switched browser or device, or cleared site data. | This is expected. A fresh browser or cleared data starts a new conversation. |
| A message was rejected | The message was over 4,000 characters, or the visitor hit the send rate limit. | Shorten the message, or wait a moment. The limit is 20 messages per 60 seconds. |
Frequently asked questions
Installation & appearance
No. The snippet is a single script tag with no key and no attributes. Everything is resolved from your DrusyAI subdomain, so there is nothing extra to configure in the tag.
Paste it just before the closing </body> tag on every page where the bubble should appear. Adding it to your site template or footer is the easiest way to cover every page at once.
It floats in the bottom-right corner. On small screens (below 480px wide) the chat window expands to fill the screen instead of floating as a corner card.
Yes. The widget title, greeting message, and theme color are all set on the Web Chat channel page. Changes take effect on the visitor's next session, with no code changes needed.
Visitor conversations & history
No. Visitors are anonymous by default. A visitor ID is stored in their browser so the conversation persists across page reloads and repeat visits on the same browser and device.
The last 50 messages load automatically. If there is no history yet, the greeting message is shown instead.
Sessions last 24 hours and refresh silently in the background, so visitors are never interrupted mid-conversation.
Yes. The AI responds first, and if a human takes over the conversation, the visitor sees those replies in the same chat window in real time.
Limits
Yes, 4,000 characters per message.
A visitor can send up to 20 messages per 60 seconds. Beyond that they get a brief 'slow down' response instead of it consuming your AI usage.
Press Enter to send, or Shift+Enter to add a new line. A message appears instantly while it sends; if the send fails, it is marked so the visitor knows to retry.
Managing the widget
New messages stop immediately, including for visitors who already have the chat open, so their next send attempt will fail. The bubble will not reappear on a fresh page load while the channel is inactive.
Changes to the title, greeting, color, or allowed origins apply on the visitor's next session refresh. Open tabs pick them up automatically once their session refreshes.
Best practices
Install it site-wide
Add the snippet through your site template or footer so it loads on every page automatically, rather than pasting it page by page.
List every domain you use
Add www and apex, plus staging and preview environments, as separate Allowed origins entries. Missing entries are the most common reason the bubble does not show.
Write a warm, specific greeting
The greeting is the visitor's first impression. Keep it friendly and to the point, and keep the title short and recognizable.
Match your brand color
Choose a theme color that fits your brand and has enough contrast against white so the bubble and header stay legible.
Prepare your assistant first
Add your knowledge and configure your assistant before going live so those first answers are accurate and helpful.
Test on mobile
Check the experience on a phone. Below 480px the chat opens full screen, so make sure your greeting and title read well there too.