Embed Inboard in a minute.

<script
  src="https://app.inboard.dev/widget/inboard-widget.js"
  data-embed-key="YOUR_EMBED_KEY"
  async
></script>

The widget renders inside a container with the class .inboard-widget. It auto-detects the user's platform and shows the appropriate install template.

To target a specific install template, add the data-guide-slug attribute:

<script
  src="https://app.inboard.dev/widget/inboard-widget.js"
  data-embed-key="YOUR_EMBED_KEY"
  data-guide-slug="getting-started"
  async
></script>

Data attributes

Programmatic init

Use Inboard.init() to configure the widget after the script loads:

Inboard.init({
  vars: { apiKey: "sk-your-key", projectId: "proj_123" },
  platform: "shopify",
  locale: "fr",
  styles: { primaryColor: "#7c3aed" }
});

Via data attribute

<script
  src=".../inboard-widget.js"
  data-embed-key="YOUR_KEY"
  data-inboard-vars='{"apiKey":"sk-live-abc","domain":"app.example.com"}'
  async
></script>

Via JavaScript

Inboard.init({
  vars: {
    apiKey: "sk-live-abc",
    domain: "app.example.com"
  }
});

Required variables that aren't provided will show an error in the widget. Variables with default values in the dashboard will use those as fallbacks.

CSS overrides

Target the widget container and its child elements:

.inboard-widget .ib-container {
  font-family: "Inter", sans-serif;
  --ib-primary: #7c3aed;
}

.inboard-widget .ib-step-content {
  font-size: 15px;
  line-height: 1.7;
}

Programmatic styles

Inboard.init({
  styles: {
    primaryColor: "#7c3aed",
    borderRadius: "12px",
    fontFamily: "Inter, sans-serif"
  }
});

Dashboard settings

Most styling is configured in your project's Widget Configuration panel: theme (light / dark / auto), primary colour, container style (card / flat / bordered), layout (stepper / tabs / sidebar / accordion), and custom CSS.

Returns all published install templates for a project.

curl https://api.inboard.dev/v1/guides/YOUR_EMBED_KEY

Query parameters

Track installation events (views, step completions, verifications).

fetch("/api/v1/events", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    embedKey: "YOUR_EMBED_KEY",
    sessionId: "session_abc",
    eventType: "step_complete",
    installTemplateId: "tpl_123",
    stepId: "step_456",
    metadata: {}
  })
});

Run verification checks for a completed installation step.

Rate limits

Public endpoints are rate-limited per client IP. Exceeded requests return 429 Too Many Requests with a Retry-After header. Authenticated dashboard and admin endpoints have their own per-account limits.

New SaaS accounts publishing snippets are additionally subject to a per-account publish throttle for their first 30 days. Limits are configurable and may change without notice; treat the values above as a current guide, not a contract.

Domain whitelisting

In the dashboard, go to Settings → Domains and add the domains where your widget will be embedded. Only requests from whitelisted origins will receive install template data.

• Wildcards supported: *.example.com
• Localhost is allowed by default in development
• API events and verification endpoints enforce the same whitelist

Embed keys

Embed keys are project-scoped and read-only — they can fetch published install templates but cannot modify data. Rotate keys in the dashboard if needed.