@dotazse/chat-widget
v2.0.0
Published
Dotaz.se inline chat widget web component. Shadow-DOM-encapsulated, self-contained drop-in.
Maintainers
faileonReadme
@dotazse/chat-widget
Inline chat widget web component for Dotaz.se. Shadow-DOM-encapsulated, self-contained — drop one <script> tag and place the element wherever you want the chat to render.
Unlike @dotazse/chat-popup (which anchors itself to the viewport corner), @dotazse/chat-widget renders inline at the position of the custom element.
- No external CSS to load (Tailwind is inlined into the shadow root).
- No font loading required.
- No CSS variables to configure (theme overrides are still supported via CSS custom properties on
:root— they inherit through the shadow boundary by design). - Hostile host-page CSS cannot leak in.
Integration via CDN (recommended)
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>My site</title>
<script type="module" src="https://cdn.jsdelivr.net/npm/@dotazse/chat-widget@2"></script>
</head>
<body>
<div style="max-width: 800px; margin: 10px auto;">
<dotazse-chat-widget baseurl="https://cpv.dotaz.se"></dotazse-chat-widget>
</div>
</body>
</html>Notes:
type="module"is required — the bundle is an ES module. Native module scripts are supported by every browser shipping since 2018 (Chrome 61+, Firefox 60+, Safari 11+, Edge 16+).- Module scripts are deferred by default — they don't block HTML parsing and
execute after the document is parsed. Custom-element upgrade handles the
case where
<dotazse-chat-widget>appears in the markup before the script defines it.
Attributes
| Attribute | Type | Description |
| ---------------- | ------- | ----------------------------------------------------------- |
| baseurl | string | Backend gateway URL (e.g. https://cpv.dotaz.se). |
| show-citations | boolean | Render document citations next to assistant replies. |
Version pinning
The CDN URL accepts a semver range. Pick the strategy that matches your change-control posture.
| URL | Behavior |
| -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| @dotazse/chat-widget@2 (recommended) | Receives all non-breaking updates (2.x.y) automatically. A future v3 with breaking changes will not ship to you unless you bump the URL. |
| @dotazse/[email protected] | Pin an exact version. Use this if your environment requires change-control sign-off per update. |
| @dotazse/chat-widget (no version, resolves to @latest) | Always newest, including future breaking majors. Not recommended for production — a breaking release will deploy silently to all visitors. |
Alternative integrations
unpkg
<script type="module" src="https://unpkg.com/@dotazse/chat-widget@2"></script>Self-host the bundle
npm install @dotazse/chat-widget and serve widget.js (ES module) from your
own infrastructure, or import '@dotazse/chat-widget' from your own bundler
(Vite / webpack / Rollup) — sideEffects: true ensures the custom-element
registration is preserved through tree-shaking.
Themed deployments
Override the widget's theme tokens from the host page — CSS custom properties inherit through the shadow boundary:
<style>
:root {
--primary: oklch(48.9% 0.121 252);
}
</style>