Quickstart: an interactive widget

This walkthrough builds a small feedback widget end to end: an HTML form whose button fires a workflow, then shows a thank-you once the run is enqueued. It ties together @keys, a workflow trigger, and the SDK.

1. Mark up the form

Tag each element you care about with data-key="<name>". The attribute carries only the name; you set each key's type (input / trigger / text) in the Keys / Inspector panel — the type is not in the markup.

<form>
  <input data-key="rating" type="number" min="1" max="5" placeholder="1-5" />
  <textarea data-key="comment" placeholder="Tell us more"></textarea>
  <button type="button" data-key="submit">Send</button>
  <p id="thanks" hidden>Thanks!</p>
</form>

In the Keys panel add rows: rating and comment as input, and submit as a trigger. Clicking a trigger element auto-fires it and collects every input value.

2. Wire the trigger to a workflow

Open or create a one-task workflow (e.g. an Email task). Add a Playground trigger, point it at this playground, and select the submit trigger key. Define trigger inputs named rating and comment — they receive the matching @key values, usable as {{ $trigger.rating }} and {{ $trigger.comment }}. Publish the workflow.

3. React when it fires

The button auto-fires on click; you can also fire it programmatically with flowfn.fire('submit'). Register flowfn.onResponse to react once the run is enqueued:

flowfn.onResponse((res) => {
  // res = { trigger_key, workflow_run_ids: [...] }   (or { trigger_key, error })
  if (res.trigger_key === 'submit' && !res.error) {
    document.getElementById('thanks').hidden = false;
  }
});

4. Preview, publish, embed

Preview live in the editor, publish, then drop the embed snippet on any site — see Sharing & embedding.