Configuration
Every supported widget attribute and Inboard.init() option.
There are two ways to configure the widget: HTML data attributes on the script tag (simplest) or the Inboard.init() JavaScript API (when you need dynamic values).
Data attributes
Set these on the <script> tag that loads the widget. Attribute values are read once when the widget mounts.
| Attribute | Required | Description |
|---|---|---|
data-embed-key | yes | The opaque key for the install template (looks like tpl_abc123). Find it on the project page in the dashboard. |
data-target | yes | CSS selector for the placeholder element the widget mounts into. Usually #inboard. |
data-variables | no | JSON string of { name: value } pairs that pre-fill template placeholders. |
data-platform | no | Force a specific platform (wordpress, shopify, webflow, ...). Skips auto-detection. |
data-locale | no | BCP 47 language tag (en, fr, de, es). Defaults to the visitor's browser locale. |
data-theme | no | light, dark, or auto (default). |
Inboard.init()
Load the widget without data-* attributes, then call Inboard.init() once the global is available:
<div id="inboard"></div>
<script src="https://app.inboard.dev/widget/inboard-widget.js" defer></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
Inboard.init({
embedKey: "tpl_abc123",
target: "#inboard",
variables: {
domain: window.location.hostname,
apiKey: "sk_live_...",
},
platform: "wordpress",
locale: "en",
theme: "auto",
onStep: ({ stepIndex, stepSlug }) => {
console.log("Customer reached step", stepIndex, stepSlug);
},
onComplete: ({ durationMs }) => {
console.log("Install complete in", durationMs, "ms");
},
});
});
</script>Callbacks
| Callback | Fires when | Payload |
|---|---|---|
onStep | The customer advances to a new step. | { stepIndex: number, stepSlug: string } |
onComplete | The customer marks the install template complete. | { durationMs: number } |
onError | The widget fails to load or hits a verification failure. | { code: string, message: string } |
Callbacks are local-only — they don't replace Inboard's own event telemetry, which is reported automatically.
Multiple widgets on one page
Each script tag mounts independently. If you embed two install templates on the same page, give them different data-target selectors:
<div id="inboard-wordpress"></div>
<div id="inboard-shopify"></div>
<script
src="https://app.inboard.dev/widget/inboard-widget.js"
data-embed-key="tpl_wp"
data-target="#inboard-wordpress"
defer
></script>
<script
src="https://app.inboard.dev/widget/inboard-widget.js"
data-embed-key="tpl_sh"
data-target="#inboard-shopify"
defer
></script>CDN and caching
The widget is served from https://app.inboard.dev/widget/inboard-widget.js with a short cache TTL (5 minutes) so config and copy changes propagate quickly. Bundle size is under 30 KB gzipped.