The widget

The widget is the piece your installers actually see. It's an embeddable end-user UI that takes your install template and renders it as a clear, step-by-step guide right inside your own site or app. This page is the conceptual overview; the full attribute and option reference lives on the integrator pages linked at the end.

What it is

• Vanilla JavaScript, no dependencies — it drops into any page regardless of framework.
• Shadow DOM — it renders in an isolated boundary, so your site's CSS never leaks into the widget and the widget's CSS never leaks out onto your site.
• Under 30 KB gzipped — small enough to load without slowing the host page.
• Multi-language — English, French, German, and Spanish out of the box (en, fr, de, es).
• Themeable — light, dark, or auto (following the visitor's OS preference).

Auto-detection

When the widget loads, it detects the installer's platform automatically and shows the guide tailored to it, with no platform picker for most installers. If a platform can't be detected, the widget falls back to letting the installer choose. See Multiple platforms for how one template serves them all.

The basic embed

At its simplest, the widget is a single script tag plus a target element for it to mount into:

<div id="inboard"></div>

<script
  src="https://app.inboard.dev/widget/inboard-widget.js"
  data-embed-key="tpl_abc123"
  data-target="#inboard"
  defer
></script>

The data-embed-key identifies which install template to render, and data-target is the element the widget mounts into. That's the whole minimum embed — everything else is optional configuration.

Styling and branding

Because of the Shadow DOM, you brand the widget through a small set of theme tokens rather than by writing CSS against its internals — your brand colour, corner radius, and font flow in cleanly without risk of breaking the layout. See Custom styling for the full token list.

Locale

The widget picks a language automatically from the visitor's browser, and you can pin a specific one when you'd rather control it. Supported locales are en, fr, de, and es.

Where to go next

This page stays conceptual on purpose. For the complete set of embed attributes, the Inboard.init() JavaScript API, and every styling token:

• Configuration — every widget attribute and Inboard.init() option.
• Custom styling — the full theming and branding reference.