Signaldeck widget

Install the widget

Replace YOUR_WIDGET_ID with the widget ID from your Signaldeck form install page, then paste the snippet before the closing </body> tag.

<!-- Optional: add response context before the widget loads -->
<script>
  window.Signaldeck = window.Signaldeck || [];
  window.Signaldeck.push({
    userIdentifier: "user-123",
    meta: {
      plan: "basic",
      page: "settings"
    }
  });
</script>

<!-- Signaldeck feedback widget -->
<script async src="https://cdn.signaldeck.com/sdk/js/widget.js"
  data-widget-id="YOUR_WIDGET_ID"
  data-api-base-url="https://api.signaldeck.com"></script>

• The optional config block should appear before the async widget script.
• userIdentifier helps connect feedback to a user in your own system.
• meta sends extra context, such as plan, page, account, or feature area.

Themes and customization

Choose a theme on your form’s install page, then copy the updated snippet. Add data-theme="light", data-theme="dark", or data-theme="vanilla" to the element with data-widget-id.

• Light is the default: a white surface, neutral colors, and a compact dark button.
• Dark uses a dark surface and light controls. It is explicit, not linked to the visitor’s system preference.
• Plain (data-theme="vanilla") keeps readable spacing, controls, and focus states, with square corners and no shadow. It is a minimal starting point, not unstyled HTML.

The theme applies to both the form and the built-in launcher. Your own launcher is never restyled. After the SDK loads, you can also call window.Signaldeck.configureWidget({ widgetId: "YOUR_WIDGET_ID", theme: "dark" }).

Both built-in surfaces use shadow DOM so your site’s button and input rules do not leak in. Set CSS custom properties on :root or the host selectors below—not on the script tag. These values inherit into the shadow DOM and override any preset.

/* Set on :root, or scope both hosts to a particular form ID. */
[data-signaldeck-widget="YOUR_WIDGET_ID"],
[data-signaldeck-launcher="YOUR_WIDGET_ID"] {
  --sd-accent: #263d66;
  --sd-accent-text: #ffffff;
  --sd-font-family: "Your Product Font", system-ui, sans-serif;
  --sd-radius: 12px;
  --sd-control-radius: 6px;
}

/* Parts reach inside the shadow DOM; ordinary descendant selectors do not. */
[data-signaldeck-widget="YOUR_WIDGET_ID"]::part(panel) {
  padding: 24px;
}
[data-signaldeck-launcher="YOUR_WIDGET_ID"]::part(launcher) {
  padding-inline: 20px;
}

Available tokens: --sd-background, --sd-text, --sd-muted, --sd-accent, --sd-accent-text, --sd-border, --sd-surface (hover surface), --sd-focus, --sd-font-family, --sd-radius, --sd-control-radius, --sd-shadow, and --sd-width (form only, capped to the viewport).

For finer control, the form exposes panel, prompt, input, rating, submit, and close parts. The built-in button exposes launcher. Keep visible keyboard focus, sufficient color contrast, and touch targets when customizing. Existing legacy color variables such as --bg, --text, and --btn-bg still work; the new tokens take precedence.

Use your own launcher

Add data-widget-id to a button or link when you want the widget to open from your own UI.

<button type="button"
  data-widget-id="YOUR_WIDGET_ID"
  data-api-base-url="https://api.signaldeck.com">
  Give feedback
</button>

<script async src="https://cdn.signaldeck.com/sdk/js/widget.js"></script>

Open the widget after a delay

For timed prompts, install the widget first, then call open when the moment is right. This example opens the widget five seconds after the page loads.

<script>
  window.addEventListener("load", function () {
    window.setTimeout(function () {
      window.Signaldeck.open("YOUR_WIDGET_ID");
    }, 5000);
  });
</script>

Public methods

These methods are available on window.Signaldeck after the SDK loads.

window.Signaldeck.push(config)

Queues or applies global settings such as userIdentifier, meta, apiBaseUrl, and debug.

window.Signaldeck.init(config)

Applies global widget settings after the SDK has loaded. Use push before the SDK loads.

window.Signaldeck.initWidgets()

Scans the page for elements with data-widget-id and wires each launcher to its widget.

window.Signaldeck.configureWidget(options)

Creates or updates one widget. Pass widgetId, and optionally theme, apiBaseUrl, or debug.

window.Signaldeck.open(widgetId)

Opens a widget programmatically. Use this for delayed prompts, in-product triggers, or custom workflows.

window.Signaldeck.close(widgetId)

Closes a visible widget programmatically.