Variables

Variables are named placeholders you reference inside install steps. They render as {{name}} in the editor and get replaced with the actual value when the widget renders.

Defining a variable

In the dashboard, open Project → Variables and add an entry:

• Name — alphanumeric + underscores. Used as {{name}} in steps.
• Type — string, url, domain, email, or secret. Drives input validation and masking.
• Label — shown to the customer when the widget prompts for the value.
• Required — whether the customer must provide a value before continuing.

Referencing in steps

Use double braces anywhere inside step body or code blocks:

Visit https://{{domain}}/wp-admin/admin.php?page=inboard and paste your API key:

<script src="https://cdn.example.com/{{accountId}}/init.js"></script>

Variables in code blocks are highlighted in the editor so you can spot them at a glance.

Pre-filling from the host page

If your site knows the value already, pass it through data-variables:

<script
  src="https://app.inboard.dev/widget/inboard-widget.js"
  data-embed-key="tpl_abc123"
  data-target="#inboard"
  data-variables='{"domain":"acme.com","accountId":"acc_42"}'
  defer
></script>

Pre-filled variables show as read-only by default — the customer sees them but can't change them. Toggle Allow override in the variable editor if you want customers to edit pre-filled values.

Prompting the customer

Any variable that's required but not pre-filled triggers an inline prompt. The widget collects the value, validates it against the variable's type, and then renders the rest of the guide with the value substituted in.

Variable types

secret values are particularly important: they're held only in the widget's runtime memory, never written to localStorage, never sent to Inboard's server. They're substituted into the rendered guide client-side.

Reserved variables

Inboard provides a few read-only variables you can reference without defining them: