npm install @qaiddev/quests-embed

import { QaidQuests } from '@qaiddev/quests-embed';

new QaidQuests({
  endpoint: 'https://qaid.dev/api/quests/responses',
  apiKey: 'YOUR_API_KEY',
  configUrl: '/forms/intake.json',
  container: '#form',
});

Provide either configUrl (fetch the questionnaire JSON) or pass it inline via questionnaire.

<!-- Load from unpkg CDN -->
<div id="form"></div>

<script
  src="https://unpkg.com/@qaiddev/quests-embed/dist/qaid-quests.umd.cjs"
  data-endpoint="https://qaid.dev/api/quests/responses"
  data-api-key="YOUR_API_KEY"
  data-config-url="/forms/intake.json"
  data-container="#form"
></script>

The script auto-initializes when it sees a data-endpoint attribute and either data-config-url or an inline JSON config tag.

<!-- Inline questionnaire — no extra fetch needed -->
<div id="form"></div>

<script type="application/json" data-quests-config>
{
  "endpoint": "https://qaid.dev/api/quests/responses",
  "apiKey": "YOUR_API_KEY",
  "container": "#form",
  "questionnaire": {
    "title": "Tell us about your project",
    "questions": [
      { "id": "name", "type": "text", "label": "Your name", "required": true },
      {
        "id": "stack",
        "type": "multiple-choice",
        "label": "Which stack are you using?",
        "options": [
          { "value": "react", "label": "React" },
          { "value": "vue",   "label": "Vue" },
          { "value": "svelte","label": "Svelte" }
        ]
      }
    ]
  }
}
</script>
<script src="https://unpkg.com/@qaiddev/quests-embed/dist/qaid-quests.umd.cjs"></script>

Question types: text, currency, range, date, multiple-choice. Answers autosave between steps.

Questions can be gated on previous answers via visibleIf. Branching is purely declarative — no callbacks.

// Conditional follow-ups via `visibleIf` — questions that only
// appear when an earlier answer matches a predicate. Predicates may
// only reference questions that come EARLIER in the array.
{
  "questions": [
    {
      "id": "experience",
      "type": "multiple-choice",
      "label": "How was your experience?",
      "options": [
        { "value": "good", "label": "Good" },
        { "value": "bad",  "label": "Bad"  }
      ]
    },
    {
      "id": "what_went_wrong",
      "type": "text",
      "label": "Sorry to hear. What went wrong?",
      "visibleIf": { "questionId": "experience", "equals": "bad" }
    },
    {
      "id": "what_loved",
      "type": "text",
      "label": "What did you like most?",
      "visibleIf": { "questionId": "experience", "equals": "good" }
    }
  ]
}

// Combine conditions with allOf (AND) / anyOf (OR).
// Operators: equals, notEquals, in, answered.
{
  "id": "deep_dive",
  "type": "text",
  "label": "Tell us more about the issue.",
  "visibleIf": {
    "allOf": [
      { "questionId": "experience", "equals": "bad" },
      { "questionId": "severity",   "in": ["high", "critical"] }
    ]
  }
}