Docs · Widget
Configuration
The widget is configured entirely through data-* attributes on the <script> tag. No JavaScript API. No runtime config object. Set it once and forget it.
Required attributes
| Attribute | Value | Notes |
|---|---|---|
data-workspace | Your workspace slug | Public, read-scoped. Safe in client HTML. |
Optional attributes
| Attribute | Default | Values | Notes |
|---|---|---|---|
data-theme | auto | auto · light · dark | auto follows the customer's prefers-color-scheme. |
data-position | bottom-right | bottom-right · bottom-left · top-right · top-left | Where the bell button anchors. |
data-accent | workspace setting | Any CSS color (hex, oklch, rgb) | Overrides the workspace accent for this embed only. |
data-radius | md | sm · md · lg | Corner rounding for the popover. |
data-hide-bell | — | presence-only | Hides the floating bell. Use with a custom trigger — see below. |
Full example
<script
src="https://showkit.dev/api/widget/v1.js"
data-workspace="acme"
data-theme="dark"
data-position="bottom-left"
data-accent="#7c3aed"
defer
></script>Custom trigger button
Want the bell to live inside your own header instead of floating? Add data-hide-bell to suppress the default button, then call window.ShowKit.open() from your own click handler.
<button onclick="window.ShowKit.open()">
What's new
</button>Versioning
The widget is versioned at the URL. /api/widget/v1.js is the stable v1 contract — breaking changes ship as /v2/. Pin to a major version; we'll never silently change semantics under you.