{
  "name": "WidgetEmbedSnippet",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/WidgetEmbedSnippet.tsx",
  "chapterTag": "21 Designer Toolkit",
  "chapter": "21-designer-toolkit.html",
  "sectionId": "widget-embed-snippet",
  "elName": "WidgetEmbedSnippet",
  "demoUrl": "https://brand.magicblocks.ai/components/21-designer-toolkit#widget-embed-snippet",
  "hasLiveDemo": false,
  "description": "",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "WidgetEmbedSnippet",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "WidgetEmbedSnippetProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "WidgetEmbedTarget",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { WidgetEmbedSnippet } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "widgetId",
      "optional": false,
      "type": "string",
      "doc": "Unique widget id from the platform."
    },
    {
      "name": "appearanceId",
      "optional": true,
      "type": "string",
      "doc": "Optional appearance id — pinned to a published appearance."
    },
    {
      "name": "host",
      "optional": true,
      "type": "string",
      "doc": "Embed host. Default `\"https://widget.magicblocks.ai\"`."
    },
    {
      "name": "targets",
      "optional": true,
      "type": "WidgetEmbedTarget[]",
      "doc": "Available targets. Default all five."
    },
    {
      "name": "target",
      "optional": true,
      "type": "WidgetEmbedTarget",
      "doc": "Controlled active target."
    },
    {
      "name": "defaultTarget",
      "optional": true,
      "type": "WidgetEmbedTarget",
      "doc": "Uncontrolled initial active target. Default `\"html\"`."
    },
    {
      "name": "onTargetChange",
      "optional": true,
      "type": "(target: WidgetEmbedTarget) => void",
      "doc": "Fires when the active target changes."
    },
    {
      "name": "title",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional title shown at the top."
    },
    {
      "name": "caption",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional caption beneath the title."
    }
  ],
  "classesUsed": [
    "tab",
    "title",
    "widget-embed",
    "widget-embed-body",
    "widget-embed-caption",
    "widget-embed-copy",
    "widget-embed-head",
    "widget-embed-pre",
    "widget-embed-tab",
    "widget-embed-tabs",
    "widget-embed-title"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"dt-grid\">\n          <div class=\"dt-grid-cell\">\n            <span class=\"dt-grid-label\">default &middot; widget id only</span>\n            <div class=\"widget-embed\">\n              <div class=\"widget-embed-head\">\n                <div class=\"widget-embed-title\">Install on your site</div>\n                <div class=\"widget-embed-caption\">Paste this into your site&rsquo;s &lt;head&gt; or footer.</div>\n              </div>\n              <div class=\"widget-embed-tabs\" role=\"tablist\" aria-label=\"Embed target\">\n                <button type=\"button\" role=\"tab\" class=\"widget-embed-tab is-on\" aria-selected=\"true\">HTML</button>\n                <button type=\"button\" role=\"tab\" class=\"widget-embed-tab\" aria-selected=\"false\">React</button>\n                <button type=\"button\" role=\"tab\" class=\"widget-embed-tab\" aria-selected=\"false\">Next.js</button>\n                <button type=\"button\" role=\"tab\" class=\"widget-embed-tab\" aria-selected=\"false\">Vue</button>\n                <button type=\"button\" role=\"tab\" class=\"widget-embed-tab\" aria-selected=\"false\">WordPress</button>\n              </div>\n              <div class=\"widget-embed-body\">\n                <pre class=\"widget-embed-pre\"><code>&lt;!-- MagicBlocks chat widget --&gt;\n&lt;script async src=\"https://widget.magicblocks.ai/embed.js?id=wid_01H9XY\"&gt;&lt;/script&gt;</code></pre>\n                <button type=\"button\" class=\"widget-embed-copy\" aria-label=\"Copy embed snippet\">Copy</button>\n              </div>\n            </div>\n          </div>\n          <div class=\"dt-grid-cell\">\n            <span class=\"dt-grid-label\">with appearance &middot; pinned theme</span>\n            <div class=\"widget-embed\">\n              <div class=\"widget-embed-head\">\n                <div class=\"widget-embed-title\">Charlie&rsquo;s Wines widget</div>\n                <div class=\"widget-embed-caption\">Pinned to appearance ap_42 (Warm Glow).</div>\n              </div>\n              <div class=\"widget-embed-tabs\" role=\"tablist\" aria-label=\"Embed target\">\n                <button type=\"button\" role=\"tab\" class=\"widget-embed-tab is-on\" aria-selected=\"true\">HTML</button>\n                <button type=\"button\" role=\"tab\" class=\"widget-embed-tab\" aria-selected=\"false\">React</button>\n                <button type=\"button\" role=\"tab\" class=\"widget-embed-tab\" aria-selected=\"false\">Next.js</button>\n                <button type=\"button\" role=\"tab\" class=\"widget-embed-tab\" aria-selected=\"false\">Vue</button>\n                <button type=\"button\" role=\"tab\" class=\"widget-embed-tab\" aria-selected=\"false\">WordPress</button>\n              </div>\n              <div class=\"widget-embed-body\">\n                <pre class=\"widget-embed-pre\"><code>&lt;!-- MagicBlocks chat widget --&gt;\n&lt;script async src=\"https://widget.magicblocks.ai/embed.js?id=wid_01H9XY&amp;appearance=ap_42\"&gt;&lt;/script&gt;</code></pre>\n                <button type=\"button\" class=\"widget-embed-copy\" aria-label=\"Copy embed snippet\">Copy</button>\n              </div>\n            </div>\n          </div>\n        </div>",
    "css": ".tab {\n  appearance: none; background: transparent; border: 0;\n  padding: 12px var(--s-4) 14px;\n  font: 500 13.5px/1 var(--f-body); color: var(--fg-dim);\n  cursor: pointer;\n  position: relative; white-space: nowrap;\n  transition: color var(--dur-2) var(--ease);\n  display: inline-flex; align-items: center; gap: var(--s-2);\n}\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }\n\n.widget-embed {\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-3);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  background: var(--bg-paper);\n  overflow: hidden;\n}\n\n.widget-embed-body {\n  position: relative;\n}\n\n.widget-embed-caption { font: 400 12.5px/1.4 var(--f-body); color: var(--fg-soft); }\n\n.widget-embed-copy {\n  position: absolute;\n  top: 6px;\n  right: 6px;\n  appearance: none;\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-xs);\n  padding: 3px 8px;\n  font: 500 11.5px/1 var(--w-font-family, var(--f-body));\n  color: var(--fg);\n  cursor: pointer;\n  transition: background var(--dur-2) var(--ease);\n}\n\n.widget-embed-head {\n  padding: var(--s-3) var(--s-4);\n  border-bottom: 1px solid var(--hair-soft);\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.widget-embed-pre {\n  margin: 0;\n  padding: var(--s-3) var(--s-4);\n  font: 400 12px/1.55 var(--f-mono);\n  color: var(--fg);\n  white-space: pre;\n  overflow-x: auto;\n  background: color-mix(in oklab, var(--bg-warm) 30%, var(--bg-paper));\n}\n\n.widget-embed-tab {\n  appearance: none;\n  background: transparent;\n  border: 0;\n  padding: 8px 12px;\n  font: 500 12.5px/1 var(--w-font-family, var(--f-body));\n  color: var(--fg-soft);\n  cursor: pointer;\n  border-bottom: 2px solid transparent;\n  margin-bottom: -1px;\n  transition: color var(--dur-2) var(--ease),\n              border-color var(--dur-2) var(--ease);\n}\n\n.widget-embed-tabs {\n  display: flex;\n  gap: 0;\n  padding: 0 var(--s-4);\n  border-bottom: 1px solid var(--hair-soft);\n}\n\n.widget-embed-title { font: 500 14px/1.3 var(--f-body); color: var(--fg); }"
  }
}