What you can customize
0xDoktor's widget is customizable in several dimensions:
- Visual appearance: colors, button style, widget size
- Content: welcome message, placeholder text, unavailable-answer fallback message
- Behavior: when to open automatically, confidence thresholds, escalation settings
- Placement: which corner of the page, z-index for stacking context
All customization is done through the admin dashboard under Widget Settings. No code changes are needed — the widget reads its configuration from your tenant settings.
Visual appearance
Primary color: the accent color used for the chat button, send button, and message bubbles. Set this to match your brand's primary color. The widget automatically adjusts text color for contrast.
Background color: the background of the chat panel. Defaults to white in light mode. For products with dark UIs, you can set a dark background.
Button shape: the chat trigger button can be a circle (default), a rounded rectangle, or a custom SVG icon.
Widget width: adjust the width of the expanded chat panel. Default is 380px. For documentation-heavy responses with code blocks, a wider panel (460–500px) improves readability.
Welcome message and placeholder text
Welcome message: the first message shown when a user opens the widget before they have typed anything. Keep it short and action-oriented.
Good example:
"Hi! Ask me anything about setting up the API."
Avoid:
"Welcome to our AI-powered support assistant. I am here to help you with any questions you might have about our product."
Placeholder text: the hint shown in the empty input field. This primes users on how to interact.
Good examples:
- "Ask a question..."
- "What would you like to know?"
- "How can I help?"
Confidence threshold configuration
The confidence threshold determines when the widget answers normally, adds a caveat, or escalates.
Configure two thresholds:
Answer threshold (recommended: 0.65): answers above this threshold are delivered normally. Answers below include a caveat like "Based on available documentation — this may be incomplete."
Escalation threshold (recommended: 0.45): answers below this threshold do not attempt an answer at all. Instead, the widget shows the fallback message or routes to copilot mode.
Tune these thresholds over time. If users frequently report answers as unhelpful despite high confidence scores, lower the answer threshold. If escalation rate is too high and most escalated questions have correct answers, raise the escalation threshold.
Fallback message
The fallback message appears when the widget cannot find a confident answer. Write this message to set user expectations and provide a next step.
Example:
"I do not have a reliable answer to this in the documentation. For questions like this, please reach out to our team at support@yourcompany.com."
Always include a clear path forward — an email address, a contact form link, or a note about response time.
Copilot mode settings
If your team uses copilot mode for human escalation:
Escalation trigger: configure whether escalation is automatic (triggered when confidence is below threshold) or manual (triggered only when the user explicitly requests a human).
Handoff message: the message shown to the user when their conversation is escalated to a human agent.
Example:
"I have connected you with a member of our team. They will be with you shortly."
Agent unavailable message: shown when copilot mode is enabled but no agents are currently active.
Example:
"Our team is currently offline. We will respond to your question by email within one business day."
Widget placement
By default, the widget appears in the bottom-right corner. You can change this to bottom-left if your site has other UI elements (cookie banners, live chat from another tool) in the bottom-right.
The widget uses a high z-index (9990 by default) to ensure it appears above most page content. If your site has modals or overlays that need to appear above the widget, you may need to adjust z-index values.
Per-page configuration with data attributes
You can override widget configuration on specific pages using data attributes in the embed script:
<!-- Different KB on a specific section -->
<script
src="https://widget.0xdoktor.com/v1/widget.js"
data-tenant="your-tenant-id"
data-kb="api-reference"
async
></script>
This allows you to use different knowledge bases on different sections of your site without changing the global widget configuration.
Testing your customization
After making changes in the admin dashboard, refresh the page where the widget is embedded. Changes take effect immediately — there is no need to re-deploy your application.
Use the browser's developer tools to verify:
- The widget script loads without errors
- The widget appears with your configured colors and position
- The welcome message displays correctly
- Test a question to confirm the KB and threshold settings are working as expected