{
  "name": "webhook-config",
  "kind": "block",
  "primary": "card-ui",
  "page": "/apps/saas/app/admin-dashboard/admin-dashboard.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {},
  "html": "<card-ui>\n  <header>\n    <h3>Webhook endpoint</h3>\n    <p slot=\"description\">Receive real-time event notifications at your endpoint URL.</p>\n  </header>\n  <section>\n    <col-ui gap=\"3\">\n      <field-ui label=\"Endpoint URL\">\n        <input-ui type=\"url\" value=\"https://api.example.com/webhooks/adia\" prefix=\"globe\"></input-ui>\n      </field-ui>\n      <field-ui label=\"Secret key\" hint=\"Used to verify webhook signatures.\">\n        <input-ui value=\"whsec_****************************\" suffix=\"copy\"></input-ui>\n      </field-ui>\n    </col-ui>\n  </section>\n  <section>\n    <col-ui gap=\"2\">\n      <text-ui strong>Events to send</text-ui>\n      <check-ui label=\"user.created\" checked></check-ui>\n      <check-ui label=\"user.updated\" checked></check-ui>\n      <check-ui label=\"payment.succeeded\" checked></check-ui>\n      <check-ui label=\"payment.failed\"></check-ui>\n      <check-ui label=\"subscription.cancelled\"></check-ui>\n    </col-ui>\n  </section>\n  <footer>\n    <row-ui gap=\"2\">\n      <button-ui text=\"Test endpoint\" variant=\"outline\" icon=\"play\"></button-ui>\n      <button-ui text=\"Save\" variant=\"primary\"></button-ui>\n    </row-ui>\n  </footer>\n</card-ui>",
  "source": "apps/saas/app/admin-dashboard/admin-dashboard.contents.html",
  "metadata": {
    "domain": "settings",
    "description": "Webhook configuration form with endpoint URL, secret key, event checkboxes, and test button.",
    "keywords": [
      "webhook",
      "configuration",
      "form",
      "endpoint",
      "URL",
      "secret",
      "key",
      "event",
      "checkboxes",
      "test",
      "button",
      "webhook-config",
      "http",
      "callback",
      "integration"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "text",
      "component": "Text",
      "variant": "heading",
      "textContent": "Webhook endpoint"
    },
    {
      "id": "text-2",
      "component": "Text",
      "variant": "body",
      "slot": "description",
      "textContent": "Receive real-time event notifications at your endpoint URL."
    },
    {
      "id": "header",
      "component": "Header",
      "children": [
        "text",
        "text-2"
      ]
    },
    {
      "id": "input",
      "component": "Input",
      "type": "url",
      "prefix": "globe",
      "value": "https://api.example.com/webhooks/adia"
    },
    {
      "id": "field",
      "component": "Field",
      "label": "Endpoint URL",
      "children": [
        "input"
      ]
    },
    {
      "id": "input-2",
      "component": "Input",
      "suffix": "copy",
      "value": "whsec_****************************"
    },
    {
      "id": "field-2",
      "component": "Field",
      "hint": "Used to verify webhook signatures.",
      "label": "Secret key",
      "children": [
        "input-2"
      ]
    },
    {
      "id": "column",
      "component": "Column",
      "gap": "3",
      "children": [
        "field",
        "field-2"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "children": [
        "column"
      ]
    },
    {
      "id": "text-3",
      "component": "Text",
      "strong": true,
      "textContent": "Events to send"
    },
    {
      "id": "check-box",
      "component": "CheckBox",
      "checked": true,
      "label": "user.created"
    },
    {
      "id": "check-box-2",
      "component": "CheckBox",
      "checked": true,
      "label": "user.updated"
    },
    {
      "id": "check-box-3",
      "component": "CheckBox",
      "checked": true,
      "label": "payment.succeeded"
    },
    {
      "id": "check-box-4",
      "component": "CheckBox",
      "label": "payment.failed"
    },
    {
      "id": "check-box-5",
      "component": "CheckBox",
      "label": "subscription.cancelled"
    },
    {
      "id": "column-2",
      "component": "Column",
      "gap": "2",
      "children": [
        "text-3",
        "check-box",
        "check-box-2",
        "check-box-3",
        "check-box-4",
        "check-box-5"
      ]
    },
    {
      "id": "section-2",
      "component": "Section",
      "children": [
        "column-2"
      ]
    },
    {
      "id": "button",
      "component": "Button",
      "icon": "play",
      "text": "Test endpoint",
      "variant": "outline"
    },
    {
      "id": "button-2",
      "component": "Button",
      "text": "Save",
      "variant": "primary"
    },
    {
      "id": "row",
      "component": "Row",
      "gap": "2",
      "children": [
        "button",
        "button-2"
      ]
    },
    {
      "id": "footer",
      "component": "Footer",
      "children": [
        "row"
      ]
    },
    {
      "id": "column-3",
      "component": "Column",
      "children": [
        "section",
        "section-2"
      ]
    },
    {
      "id": "section-3",
      "component": "Section",
      "children": [
        "column-3"
      ]
    },
    {
      "id": "root",
      "component": "Card",
      "children": [
        "header",
        "section-3",
        "footer"
      ]
    }
  ]
}