@dotazse/chat-popup
v2.0.1
Published
Dotaz.se chat popup web component. Shadow-DOM-encapsulated, self-contained drop-in.
Maintainers
faileonReadme
@dotazse/chat-popup
Floating chat popup web component for Dotaz.se. Shadow-DOM-encapsulated, self-contained — drop one <script> tag into your page and you're done.
- 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-popup@2/popup.js"></script>
</head>
<body>
<!-- ...your page content... -->
<dotazse-chat-popup baseurl="https://example.dotaz.se"></dotazse-chat-popup>
</body>
</html>That's it. The popup launcher is anchored to the bottom-right corner of the viewport.
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-popup>appears in the markup before the script defines it.
Attributes
| Attribute | Type | Description |
| ---------------- | ------- | ----------------------------------------------------------- |
| baseurl | string | Backend gateway URL (e.g. https://example.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.
The
/popup.jssuffix in the<script src>URL is required — it anchors the bundle's internal asset resolution (e.g. the PDF.js worker). The version specifier itself (@2,@2.0.0, …) is what controls update behavior; the table below lists each option without the trailing/popup.jsfor clarity.
| URL | Behavior |
| ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| @dotazse/chat-popup@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-popup (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-popup@2/popup.js"></script>Self-host the bundle
npm install @dotazse/chat-popup and serve popup.js (ES module) from your own
infrastructure, or import '@dotazse/chat-popup' from your own bundler
(Vite / webpack / Rollup) — sideEffects: true ensures the custom-element
registration is preserved through tree-shaking.
Themed deployments
Override the popup'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>