Flow gallery

Feedback flows
for your site.

Try a flow, then copy agent instructions or embed code. Previews send nothing.

🐛01 / TWO STEPS

Bug Report

Report a bug with steps and a screenshot.

ADD TO YOUR SITE

Bug Report

Paste these instructions into your coding agent to add this flow to your site.

Exact flow definition included.

Instructions preview

Add the BugDrop Bug Report feedback flow to my site.

Reuse my site's BugDrop installation and repository. If none is configured, ask which owner/repository to use and help install the GitHub App: https://bugdrop.dev/docs/installation. Do not guess or ship placeholders.

Use the JSON below. Preserve IDs, screen references, validation, and issue mappings. Match the product name, theme, accentColor, and an accessible “Bug Report” trigger to my site.

Integration:
- Browser widget: https://bugdrop.neonwatty.workers.dev/widget.v1.59.1.js. No SDK needed.
- Reuse a compatible widget. Do not inject a second runtime. If registerFlow is unsupported, explain the required update before replacing it.
- For a new installation, load the script once with the confirmed data-repo, data-button="false", data-font="inherit", and matching data-theme/data-color.
- After load, call window.BugDrop.registerFlow(config) once. Keep the handle; trigger handle.open().result from the button. Handle loading, errors, and busy outcomes.
- With v1.59.1, apply the Safari input guard below to the flow host immediately after handle.open(). It prevents redundant blur events from swallowing button clicks.
- In frameworks, initialize client-side, avoid duplicate registration on rerenders, and clean up listeners.
- Installed flows create real GitHub Issues. Do not use gallery preview transport or submit a live test issue without approval. Verify rendering, dismissal, and mocked submission; summarize changes.

Safari input guard (JavaScript; scoped to the widget):
```js
function guardDemoTextChanges(host) {
  const root = host && host.shadowRoot;
  if (!root) return;
  const seen = new WeakMap();
  const field = target => target instanceof HTMLTextAreaElement ||
    (target instanceof HTMLInputElement && ['text','email','url','search','tel'].includes(target.type));
  root.addEventListener('input', event => {
    if (field(event.target)) seen.set(event.target, event.target.value);
  }, true);
  root.addEventListener('change', event => {
    if (field(event.target) && seen.get(event.target) === event.target.value) event.stopPropagation();
  }, true);
}
// Immediately after handle.open():
guardDemoTextChanges(document.querySelector('[data-bugdrop-flow="' + CSS.escape(config.id) + '"]'));
```

Exact flow definition (JSON):
```json
{
  "configVersion": 1,
  "id": "bug-report",
  "presentation": {
    "kind": "modal",
    "size": "default",
    "columns": 2,
    "screenTransition": {
      "kind": "slide-horizontal",
      "durationMs": 500
    }
  },
  "appearance": {
    "theme": "auto",
    "accentColor": "#7c3aed",
    "density": "comfortable"
  },
  "content": {
    "successTitle": "Report captured",
    "successMessage": "Thanks for showing us what broke.",
    "cancelLabel": "Discard"
  },
  "forms": [
    {
      "id": "report",
      "title": "What went wrong?",
      "description": "Describe the problem and how to reproduce it.",
      "fields": [
        {
          "id": "summary",
          "type": "shortText",
          "label": "Summary",
          "required": true,
          "maxLength": 120,
          "layout": {
            "span": 2
          }
        },
        {
          "id": "steps",
          "type": "longText",
          "label": "Steps to reproduce",
          "required": true,
          "rows": 6,
          "layout": {
            "span": 2
          }
        }
      ]
    }
  ],
  "screens": [
    {
      "id": "report-screen",
      "type": "form",
      "form": "report",
      "continueLabel": "Capture screenshot"
    },
    {
      "id": "capture",
      "type": "screenshot",
      "mode": "required",
      "title": "Capture the page",
      "description": "Choose what to show, then review or redact it before sending.",
      "continueLabel": "Choose screenshot"
    }
  ],
  "issue": {
    "classification": "bug",
    "title": "Bug: {{report.summary}}",
    "sections": [
      {
        "heading": "Steps",
        "answer": "report.steps",
        "format": "quote"
      },
      {
        "heading": "Surface",
        "context": "surface"
      },
      {
        "heading": "Build",
        "context": "build",
        "format": "code"
      }
    ]
  }
}
```

Replace YOUR-OWNER/YOUR-REPOSITORY and install the GitHub App there. Customize the name, theme, and color as needed.

Creates GitHub Issues when installed.

Complete embed code

<!-- BugDrop: Bug Report, recipe v1. Place where you want the trigger. -->
<button type="button" disabled>Bug Report</button>
<span role="status" style="display:block;font:14px system-ui">Loading feedback…</span>
<script>
(() => {
  const status = document.currentScript.previousElementSibling;
  const button = status.previousElementSibling;
  const config = {
  "configVersion": 1,
  "id": "bug-report",
  "presentation": {
    "kind": "modal",
    "size": "default",
    "columns": 2,
    "screenTransition": {
      "kind": "slide-horizontal",
      "durationMs": 500
    }
  },
  "appearance": {
    "theme": "auto",
    "accentColor": "#7c3aed",
    "density": "comfortable"
  },
  "content": {
    "successTitle": "Report captured",
    "successMessage": "Thanks for showing us what broke.",
    "cancelLabel": "Discard"
  },
  "forms": [
    {
      "id": "report",
      "title": "What went wrong?",
      "description": "Describe the problem and how to reproduce it.",
      "fields": [
        {
          "id": "summary",
          "type": "shortText",
          "label": "Summary",
          "required": true,
          "maxLength": 120,
          "layout": {
            "span": 2
          }
        },
        {
          "id": "steps",
          "type": "longText",
          "label": "Steps to reproduce",
          "required": true,
          "rows": 6,
          "layout": {
            "span": 2
          }
        }
      ]
    }
  ],
  "screens": [
    {
      "id": "report-screen",
      "type": "form",
      "form": "report",
      "continueLabel": "Capture screenshot"
    },
    {
      "id": "capture",
      "type": "screenshot",
      "mode": "required",
      "title": "Capture the page",
      "description": "Choose what to show, then review or redact it before sending.",
      "continueLabel": "Choose screenshot"
    }
  ],
  "issue": {
    "classification": "bug",
    "title": "Bug: {{report.summary}}",
    "sections": [
      {
        "heading": "Steps",
        "answer": "report.steps",
        "format": "quote"
      },
      {
        "heading": "Surface",
        "context": "surface"
      },
      {
        "heading": "Build",
        "context": "build",
        "format": "code"
      }
    ]
  }
};
  const installation = {
  "url": "https://bugdrop.neonwatty.workers.dev/widget.v1.59.1.js",
  "repo": "YOUR-OWNER/YOUR-REPOSITORY",
  "theme": "auto",
  "color": "#7c3aed"
};
  const key = Symbol.for('bugdrop.examples.installation.v1');
  const signature = JSON.stringify(installation);
  const fail = error => { status.textContent = error.message || 'Unable to load feedback. Please reload and try again.'; };
  const load = () => new Promise((resolve, reject) => {
    const candidates = Array.from(document.scripts).filter(s => {
      if (!s.src) return false;
      const url = new URL(s.src);
      return /widget(?:\.v[\d.]+)?\.js$/.test(url.pathname) &&
        (url.origin === new URL(installation.url).origin || s.dataset.repo || s.dataset.applicationId);
    });
    const existing = candidates.find(s => s.src === installation.url && s.dataset.repo === installation.repo);
    if ((window.BugDrop || candidates.length) && (!existing || candidates.length !== 1)) {
      reject(new Error('An incompatible BugDrop installation exists. Update its script to the pinned URL and repository in this embed, then reload.')); return;
    }
    const script = existing || document.createElement('script');
    let settled = false;
    const cleanup = () => { clearTimeout(timer); script.removeEventListener('load', ready); script.removeEventListener('error', failed); };
    const failed = () => { if (settled) return; settled = true; cleanup(); reject(new Error('Unable to load BugDrop. Reload the page to try again.')); };
    const ready = () => {
      if (settled) return;
      if (!window.BugDrop || typeof window.BugDrop.registerFlow !== 'function') { failed(); return; }
      settled = true; cleanup(); resolve(window.BugDrop);
    };
    const timer = setTimeout(failed, 15000);
    if (existing && window.BugDrop) { ready(); return; }
    script.addEventListener('load', ready, {once:true}); script.addEventListener('error', failed, {once:true});
    if (!existing) {
      script.src = installation.url;
      script.dataset.repo = installation.repo; script.dataset.button = 'false'; script.dataset.font = 'inherit';
      script.dataset.theme = installation.theme; script.dataset.color = installation.color;
      document.head.append(script);
    }
  });
  let state = window[key];
  if (state && state.signature !== signature) { fail(new Error('These embeds use different installation settings. Use the same repository and theme for all embeds on this page.')); return; }
  if (!state) {
    state = {signature, ready:load(), handles:new Map()}; window[key] = state;
  }
  state.ready.then(api => {
    const definition = JSON.stringify(config);
    let entry = state.handles.get(config.id);
    if (entry && entry.definition !== definition) throw new Error('This flow is already installed with different settings. Replace the old embed and reload.');
    if (!entry) { entry = {definition, handle:api.registerFlow(config)}; state.handles.set(config.id, entry); }
    button.disabled = false; status.textContent = '';
    button.onclick = async () => {
      button.disabled = true; status.textContent = '';
      try {
        const opened = entry.handle.open();
        (function guardDemoTextChanges(host) {
  const root = host && host.shadowRoot;
  if (!root) return;
  const seen = new WeakMap();
  const field = target => target instanceof HTMLTextAreaElement ||
    (target instanceof HTMLInputElement && ['text','email','url','search','tel'].includes(target.type));
  root.addEventListener('input', event => {
    if (field(event.target)) seen.set(event.target, event.target.value);
  }, true);
  root.addEventListener('change', event => {
    if (field(event.target) && seen.get(event.target) === event.target.value) event.stopPropagation();
  }, true);
})(document.querySelector('[data-bugdrop-flow="' + CSS.escape(config.id) + '"]'));
        const outcome = await opened.result;
        if (outcome.status === 'busy') status.textContent = 'Close the other feedback form first.';
      } catch (error) { fail(error); }
      finally { button.disabled = false; button.focus(); }
    };
  }).catch(fail);
})();
</script>

💡02 / TWO STEPS

Feature Request

Collect ideas, context, and expected impact.

ADD TO YOUR SITE

Feature Request

Paste these instructions into your coding agent to add this flow to your site.

Exact flow definition included.

Instructions preview

Add the BugDrop Feature Request feedback flow to my site.

Reuse my site's BugDrop installation and repository. If none is configured, ask which owner/repository to use and help install the GitHub App: https://bugdrop.dev/docs/installation. Do not guess or ship placeholders.

Use the JSON below. Preserve IDs, screen references, validation, and issue mappings. Match the product name, theme, accentColor, and an accessible “Feature Request” trigger to my site.

Integration:
- Browser widget: https://bugdrop.neonwatty.workers.dev/widget.v1.59.1.js. No SDK needed.
- Reuse a compatible widget. Do not inject a second runtime. If registerFlow is unsupported, explain the required update before replacing it.
- For a new installation, load the script once with the confirmed data-repo, data-button="false", data-font="inherit", and matching data-theme/data-color.
- After load, call window.BugDrop.registerFlow(config) once. Keep the handle; trigger handle.open().result from the button. Handle loading, errors, and busy outcomes.
- With v1.59.1, apply the Safari input guard below to the flow host immediately after handle.open(). It prevents redundant blur events from swallowing button clicks.
- In frameworks, initialize client-side, avoid duplicate registration on rerenders, and clean up listeners.
- Installed flows create real GitHub Issues. Do not use gallery preview transport or submit a live test issue without approval. Verify rendering, dismissal, and mocked submission; summarize changes.

Safari input guard (JavaScript; scoped to the widget):
```js
function guardDemoTextChanges(host) {
  const root = host && host.shadowRoot;
  if (!root) return;
  const seen = new WeakMap();
  const field = target => target instanceof HTMLTextAreaElement ||
    (target instanceof HTMLInputElement && ['text','email','url','search','tel'].includes(target.type));
  root.addEventListener('input', event => {
    if (field(event.target)) seen.set(event.target, event.target.value);
  }, true);
  root.addEventListener('change', event => {
    if (field(event.target) && seen.get(event.target) === event.target.value) event.stopPropagation();
  }, true);
}
// Immediately after handle.open():
guardDemoTextChanges(document.querySelector('[data-bugdrop-flow="' + CSS.escape(config.id) + '"]'));
```

Exact flow definition (JSON):
```json
{
  "configVersion": 1,
  "id": "feature-request",
  "presentation": {
    "kind": "modal",
    "size": "default",
    "columns": 2,
    "screenTransition": {
      "kind": "slide-horizontal",
      "durationMs": 500
    }
  },
  "appearance": {
    "theme": "auto",
    "accentColor": "#7c3aed",
    "density": "comfortable"
  },
  "content": {
    "successTitle": "Request received",
    "successMessage": "Thanks for sharing your idea.",
    "cancelLabel": "Discard request"
  },
  "forms": [
    {
      "id": "idea",
      "title": "Request a feature",
      "description": "Tell us what you would add or improve.",
      "fields": [
        {
          "id": "category",
          "type": "singleChoice",
          "label": "What would this improve?",
          "required": true,
          "display": "cards",
          "options": [
            {
              "value": "workflow",
              "label": "Workflow",
              "description": "Save time or steps"
            },
            {
              "value": "integration",
              "label": "Integration",
              "description": "Connect another tool"
            },
            {
              "value": "design",
              "label": "Design",
              "description": "Make the experience clearer"
            }
          ],
          "layout": {
            "span": 2
          }
        },
        {
          "id": "title",
          "type": "shortText",
          "label": "Your idea in one sentence",
          "required": true,
          "maxLength": 120,
          "layout": {
            "span": 2
          }
        }
      ]
    },
    {
      "id": "detail",
      "title": "Why would it help?",
      "description": "Add context and choose the likely impact.",
      "fields": [
        {
          "id": "detail",
          "type": "longText",
          "label": "What problem would this solve?",
          "rows": 3,
          "layout": {
            "span": 2
          }
        },
        {
          "id": "impact",
          "type": "singleChoice",
          "label": "Expected impact",
          "required": true,
          "display": "cards",
          "options": [
            {
              "value": "nice-to-have",
              "label": "Small improvement",
              "description": "Makes one task easier"
            },
            {
              "value": "important",
              "label": "Meaningful improvement",
              "description": "Helps regularly"
            },
            {
              "value": "transformative",
              "label": "Major change",
              "description": "Enables something new"
            }
          ],
          "layout": {
            "span": 2
          }
        }
      ]
    }
  ],
  "screens": [
    {
      "id": "idea-screen",
      "type": "form",
      "form": "idea",
      "continueLabel": "Add context"
    },
    {
      "id": "detail-screen",
      "type": "form",
      "form": "detail",
      "backLabel": "Edit idea",
      "continueLabel": "Send request"
    }
  ],
  "issue": {
    "classification": "feature",
    "title": "Feature: {{idea.title}}",
    "sections": [
      {
        "heading": "Area",
        "answer": "idea.category",
        "format": "choice"
      },
      {
        "heading": "Opportunity",
        "answer": "detail.detail",
        "omitWhenEmpty": true
      },
      {
        "heading": "Expected impact",
        "answer": "detail.impact",
        "format": "choice"
      }
    ]
  }
}
```

Replace YOUR-OWNER/YOUR-REPOSITORY and install the GitHub App there. Customize the name, theme, and color as needed.

Creates GitHub Issues when installed.

Complete embed code

<!-- BugDrop: Feature Request, recipe v1. Place where you want the trigger. -->
<button type="button" disabled>Feature Request</button>
<span role="status" style="display:block;font:14px system-ui">Loading feedback…</span>
<script>
(() => {
  const status = document.currentScript.previousElementSibling;
  const button = status.previousElementSibling;
  const config = {
  "configVersion": 1,
  "id": "feature-request",
  "presentation": {
    "kind": "modal",
    "size": "default",
    "columns": 2,
    "screenTransition": {
      "kind": "slide-horizontal",
      "durationMs": 500
    }
  },
  "appearance": {
    "theme": "auto",
    "accentColor": "#7c3aed",
    "density": "comfortable"
  },
  "content": {
    "successTitle": "Request received",
    "successMessage": "Thanks for sharing your idea.",
    "cancelLabel": "Discard request"
  },
  "forms": [
    {
      "id": "idea",
      "title": "Request a feature",
      "description": "Tell us what you would add or improve.",
      "fields": [
        {
          "id": "category",
          "type": "singleChoice",
          "label": "What would this improve?",
          "required": true,
          "display": "cards",
          "options": [
            {
              "value": "workflow",
              "label": "Workflow",
              "description": "Save time or steps"
            },
            {
              "value": "integration",
              "label": "Integration",
              "description": "Connect another tool"
            },
            {
              "value": "design",
              "label": "Design",
              "description": "Make the experience clearer"
            }
          ],
          "layout": {
            "span": 2
          }
        },
        {
          "id": "title",
          "type": "shortText",
          "label": "Your idea in one sentence",
          "required": true,
          "maxLength": 120,
          "layout": {
            "span": 2
          }
        }
      ]
    },
    {
      "id": "detail",
      "title": "Why would it help?",
      "description": "Add context and choose the likely impact.",
      "fields": [
        {
          "id": "detail",
          "type": "longText",
          "label": "What problem would this solve?",
          "rows": 3,
          "layout": {
            "span": 2
          }
        },
        {
          "id": "impact",
          "type": "singleChoice",
          "label": "Expected impact",
          "required": true,
          "display": "cards",
          "options": [
            {
              "value": "nice-to-have",
              "label": "Small improvement",
              "description": "Makes one task easier"
            },
            {
              "value": "important",
              "label": "Meaningful improvement",
              "description": "Helps regularly"
            },
            {
              "value": "transformative",
              "label": "Major change",
              "description": "Enables something new"
            }
          ],
          "layout": {
            "span": 2
          }
        }
      ]
    }
  ],
  "screens": [
    {
      "id": "idea-screen",
      "type": "form",
      "form": "idea",
      "continueLabel": "Add context"
    },
    {
      "id": "detail-screen",
      "type": "form",
      "form": "detail",
      "backLabel": "Edit idea",
      "continueLabel": "Send request"
    }
  ],
  "issue": {
    "classification": "feature",
    "title": "Feature: {{idea.title}}",
    "sections": [
      {
        "heading": "Area",
        "answer": "idea.category",
        "format": "choice"
      },
      {
        "heading": "Opportunity",
        "answer": "detail.detail",
        "omitWhenEmpty": true
      },
      {
        "heading": "Expected impact",
        "answer": "detail.impact",
        "format": "choice"
      }
    ]
  }
};
  const installation = {
  "url": "https://bugdrop.neonwatty.workers.dev/widget.v1.59.1.js",
  "repo": "YOUR-OWNER/YOUR-REPOSITORY",
  "theme": "auto",
  "color": "#7c3aed"
};
  const key = Symbol.for('bugdrop.examples.installation.v1');
  const signature = JSON.stringify(installation);
  const fail = error => { status.textContent = error.message || 'Unable to load feedback. Please reload and try again.'; };
  const load = () => new Promise((resolve, reject) => {
    const candidates = Array.from(document.scripts).filter(s => {
      if (!s.src) return false;
      const url = new URL(s.src);
      return /widget(?:\.v[\d.]+)?\.js$/.test(url.pathname) &&
        (url.origin === new URL(installation.url).origin || s.dataset.repo || s.dataset.applicationId);
    });
    const existing = candidates.find(s => s.src === installation.url && s.dataset.repo === installation.repo);
    if ((window.BugDrop || candidates.length) && (!existing || candidates.length !== 1)) {
      reject(new Error('An incompatible BugDrop installation exists. Update its script to the pinned URL and repository in this embed, then reload.')); return;
    }
    const script = existing || document.createElement('script');
    let settled = false;
    const cleanup = () => { clearTimeout(timer); script.removeEventListener('load', ready); script.removeEventListener('error', failed); };
    const failed = () => { if (settled) return; settled = true; cleanup(); reject(new Error('Unable to load BugDrop. Reload the page to try again.')); };
    const ready = () => {
      if (settled) return;
      if (!window.BugDrop || typeof window.BugDrop.registerFlow !== 'function') { failed(); return; }
      settled = true; cleanup(); resolve(window.BugDrop);
    };
    const timer = setTimeout(failed, 15000);
    if (existing && window.BugDrop) { ready(); return; }
    script.addEventListener('load', ready, {once:true}); script.addEventListener('error', failed, {once:true});
    if (!existing) {
      script.src = installation.url;
      script.dataset.repo = installation.repo; script.dataset.button = 'false'; script.dataset.font = 'inherit';
      script.dataset.theme = installation.theme; script.dataset.color = installation.color;
      document.head.append(script);
    }
  });
  let state = window[key];
  if (state && state.signature !== signature) { fail(new Error('These embeds use different installation settings. Use the same repository and theme for all embeds on this page.')); return; }
  if (!state) {
    state = {signature, ready:load(), handles:new Map()}; window[key] = state;
  }
  state.ready.then(api => {
    const definition = JSON.stringify(config);
    let entry = state.handles.get(config.id);
    if (entry && entry.definition !== definition) throw new Error('This flow is already installed with different settings. Replace the old embed and reload.');
    if (!entry) { entry = {definition, handle:api.registerFlow(config)}; state.handles.set(config.id, entry); }
    button.disabled = false; status.textContent = '';
    button.onclick = async () => {
      button.disabled = true; status.textContent = '';
      try {
        const opened = entry.handle.open();
        (function guardDemoTextChanges(host) {
  const root = host && host.shadowRoot;
  if (!root) return;
  const seen = new WeakMap();
  const field = target => target instanceof HTMLTextAreaElement ||
    (target instanceof HTMLInputElement && ['text','email','url','search','tel'].includes(target.type));
  root.addEventListener('input', event => {
    if (field(event.target)) seen.set(event.target, event.target.value);
  }, true);
  root.addEventListener('change', event => {
    if (field(event.target) && seen.get(event.target) === event.target.value) event.stopPropagation();
  }, true);
})(document.querySelector('[data-bugdrop-flow="' + CSS.escape(config.id) + '"]'));
        const outcome = await opened.result;
        if (outcome.status === 'busy') status.textContent = 'Close the other feedback form first.';
      } catch (error) { fail(error); }
      finally { button.disabled = false; button.focus(); }
    };
  }).catch(fail);
})();
</script>

★03 / TWO STEPS

Quick Survey

Collect a five-star rating and optional feedback.

ADD TO YOUR SITE

Quick Survey

Paste these instructions into your coding agent to add this flow to your site.

Exact flow definition included.

Instructions preview

Add the BugDrop Quick Survey feedback flow to my site.

Reuse my site's BugDrop installation and repository. If none is configured, ask which owner/repository to use and help install the GitHub App: https://bugdrop.dev/docs/installation. Do not guess or ship placeholders.

Use the JSON below. Preserve IDs, screen references, validation, and issue mappings. Match the product name, theme, accentColor, and an accessible “Quick Survey” trigger to my site.

Integration:
- Browser widget: https://bugdrop.neonwatty.workers.dev/widget.v1.59.1.js. No SDK needed.
- Reuse a compatible widget. Do not inject a second runtime. If registerFlow is unsupported, explain the required update before replacing it.
- For a new installation, load the script once with the confirmed data-repo, data-button="false", data-font="inherit", and matching data-theme/data-color.
- After load, call window.BugDrop.registerFlow(config) once. Keep the handle; trigger handle.open().result from the button. Handle loading, errors, and busy outcomes.
- With v1.59.1, apply the Safari input guard below to the flow host immediately after handle.open(). It prevents redundant blur events from swallowing button clicks.
- In frameworks, initialize client-side, avoid duplicate registration on rerenders, and clean up listeners.
- Installed flows create real GitHub Issues. Do not use gallery preview transport or submit a live test issue without approval. Verify rendering, dismissal, and mocked submission; summarize changes.

Safari input guard (JavaScript; scoped to the widget):
```js
function guardDemoTextChanges(host) {
  const root = host && host.shadowRoot;
  if (!root) return;
  const seen = new WeakMap();
  const field = target => target instanceof HTMLTextAreaElement ||
    (target instanceof HTMLInputElement && ['text','email','url','search','tel'].includes(target.type));
  root.addEventListener('input', event => {
    if (field(event.target)) seen.set(event.target, event.target.value);
  }, true);
  root.addEventListener('change', event => {
    if (field(event.target) && seen.get(event.target) === event.target.value) event.stopPropagation();
  }, true);
}
// Immediately after handle.open():
guardDemoTextChanges(document.querySelector('[data-bugdrop-flow="' + CSS.escape(config.id) + '"]'));
```

Exact flow definition (JSON):
```json
{
  "configVersion": 1,
  "id": "quick-rating",
  "presentation": {
    "kind": "modal",
    "size": "compact",
    "columns": 1,
    "screenTransition": {
      "kind": "slide-horizontal",
      "durationMs": 500
    }
  },
  "appearance": {
    "theme": "auto",
    "accentColor": "#7c3aed",
    "density": "comfortable"
  },
  "content": {
    "successTitle": "Survey received",
    "successMessage": "Thanks for helping us improve Your product.",
    "cancelLabel": "Not now"
  },
  "forms": [
    {
      "id": "rating",
      "title": "How useful is Your product for your team?",
      "fields": [
        {
          "id": "score",
          "type": "rating",
          "label": "Usefulness",
          "required": true,
          "scale": 5,
          "icon": "star",
          "lowLabel": "Not useful",
          "highLabel": "Very useful"
        }
      ]
    },
    {
      "id": "followup",
      "title": "What would make it better?",
      "description": "One suggestion is plenty. This answer is optional.",
      "fields": [
        {
          "id": "detail",
          "type": "longText",
          "label": "What would you add or change?",
          "rows": 3
        }
      ]
    }
  ],
  "screens": [
    {
      "id": "rating-screen",
      "type": "form",
      "form": "rating",
      "continueLabel": "Continue"
    },
    {
      "id": "followup-screen",
      "type": "form",
      "form": "followup",
      "backLabel": "Change rating",
      "continueLabel": "Send survey"
    }
  ],
  "issue": {
    "classification": "question",
    "title": "Your product usefulness survey {{rating.score}}/5",
    "sections": [
      {
        "heading": "Rating",
        "answer": "rating.score",
        "format": "stars"
      },
      {
        "heading": "Suggestion",
        "answer": "followup.detail",
        "format": "quote",
        "omitWhenEmpty": true
      }
    ]
  }
}
```

Replace YOUR-OWNER/YOUR-REPOSITORY and install the GitHub App there. Customize the name, theme, and color as needed.

Creates GitHub Issues when installed.

Complete embed code

<!-- BugDrop: Quick Survey, recipe v1. Place where you want the trigger. -->
<button type="button" disabled>Quick Survey</button>
<span role="status" style="display:block;font:14px system-ui">Loading feedback…</span>
<script>
(() => {
  const status = document.currentScript.previousElementSibling;
  const button = status.previousElementSibling;
  const config = {
  "configVersion": 1,
  "id": "quick-rating",
  "presentation": {
    "kind": "modal",
    "size": "compact",
    "columns": 1,
    "screenTransition": {
      "kind": "slide-horizontal",
      "durationMs": 500
    }
  },
  "appearance": {
    "theme": "auto",
    "accentColor": "#7c3aed",
    "density": "comfortable"
  },
  "content": {
    "successTitle": "Survey received",
    "successMessage": "Thanks for helping us improve Your product.",
    "cancelLabel": "Not now"
  },
  "forms": [
    {
      "id": "rating",
      "title": "How useful is Your product for your team?",
      "fields": [
        {
          "id": "score",
          "type": "rating",
          "label": "Usefulness",
          "required": true,
          "scale": 5,
          "icon": "star",
          "lowLabel": "Not useful",
          "highLabel": "Very useful"
        }
      ]
    },
    {
      "id": "followup",
      "title": "What would make it better?",
      "description": "One suggestion is plenty. This answer is optional.",
      "fields": [
        {
          "id": "detail",
          "type": "longText",
          "label": "What would you add or change?",
          "rows": 3
        }
      ]
    }
  ],
  "screens": [
    {
      "id": "rating-screen",
      "type": "form",
      "form": "rating",
      "continueLabel": "Continue"
    },
    {
      "id": "followup-screen",
      "type": "form",
      "form": "followup",
      "backLabel": "Change rating",
      "continueLabel": "Send survey"
    }
  ],
  "issue": {
    "classification": "question",
    "title": "Your product usefulness survey {{rating.score}}/5",
    "sections": [
      {
        "heading": "Rating",
        "answer": "rating.score",
        "format": "stars"
      },
      {
        "heading": "Suggestion",
        "answer": "followup.detail",
        "format": "quote",
        "omitWhenEmpty": true
      }
    ]
  }
};
  const installation = {
  "url": "https://bugdrop.neonwatty.workers.dev/widget.v1.59.1.js",
  "repo": "YOUR-OWNER/YOUR-REPOSITORY",
  "theme": "auto",
  "color": "#7c3aed"
};
  const key = Symbol.for('bugdrop.examples.installation.v1');
  const signature = JSON.stringify(installation);
  const fail = error => { status.textContent = error.message || 'Unable to load feedback. Please reload and try again.'; };
  const load = () => new Promise((resolve, reject) => {
    const candidates = Array.from(document.scripts).filter(s => {
      if (!s.src) return false;
      const url = new URL(s.src);
      return /widget(?:\.v[\d.]+)?\.js$/.test(url.pathname) &&
        (url.origin === new URL(installation.url).origin || s.dataset.repo || s.dataset.applicationId);
    });
    const existing = candidates.find(s => s.src === installation.url && s.dataset.repo === installation.repo);
    if ((window.BugDrop || candidates.length) && (!existing || candidates.length !== 1)) {
      reject(new Error('An incompatible BugDrop installation exists. Update its script to the pinned URL and repository in this embed, then reload.')); return;
    }
    const script = existing || document.createElement('script');
    let settled = false;
    const cleanup = () => { clearTimeout(timer); script.removeEventListener('load', ready); script.removeEventListener('error', failed); };
    const failed = () => { if (settled) return; settled = true; cleanup(); reject(new Error('Unable to load BugDrop. Reload the page to try again.')); };
    const ready = () => {
      if (settled) return;
      if (!window.BugDrop || typeof window.BugDrop.registerFlow !== 'function') { failed(); return; }
      settled = true; cleanup(); resolve(window.BugDrop);
    };
    const timer = setTimeout(failed, 15000);
    if (existing && window.BugDrop) { ready(); return; }
    script.addEventListener('load', ready, {once:true}); script.addEventListener('error', failed, {once:true});
    if (!existing) {
      script.src = installation.url;
      script.dataset.repo = installation.repo; script.dataset.button = 'false'; script.dataset.font = 'inherit';
      script.dataset.theme = installation.theme; script.dataset.color = installation.color;
      document.head.append(script);
    }
  });
  let state = window[key];
  if (state && state.signature !== signature) { fail(new Error('These embeds use different installation settings. Use the same repository and theme for all embeds on this page.')); return; }
  if (!state) {
    state = {signature, ready:load(), handles:new Map()}; window[key] = state;
  }
  state.ready.then(api => {
    const definition = JSON.stringify(config);
    let entry = state.handles.get(config.id);
    if (entry && entry.definition !== definition) throw new Error('This flow is already installed with different settings. Replace the old embed and reload.');
    if (!entry) { entry = {definition, handle:api.registerFlow(config)}; state.handles.set(config.id, entry); }
    button.disabled = false; status.textContent = '';
    button.onclick = async () => {
      button.disabled = true; status.textContent = '';
      try {
        const opened = entry.handle.open();
        (function guardDemoTextChanges(host) {
  const root = host && host.shadowRoot;
  if (!root) return;
  const seen = new WeakMap();
  const field = target => target instanceof HTMLTextAreaElement ||
    (target instanceof HTMLInputElement && ['text','email','url','search','tel'].includes(target.type));
  root.addEventListener('input', event => {
    if (field(event.target)) seen.set(event.target, event.target.value);
  }, true);
  root.addEventListener('change', event => {
    if (field(event.target) && seen.get(event.target) === event.target.value) event.stopPropagation();
  }, true);
})(document.querySelector('[data-bugdrop-flow="' + CSS.escape(config.id) + '"]'));
        const outcome = await opened.result;
        if (outcome.status === 'busy') status.textContent = 'Close the other feedback form first.';
      } catch (error) { fail(error); }
      finally { button.disabled = false; button.focus(); }
    };
  }).catch(fail);
})();
</script>

✓04 / TWO STEPS

Page Helpfulness

Ask if a page helped and what could be clearer.

ADD TO YOUR SITE

Page Helpfulness

Paste these instructions into your coding agent to add this flow to your site.

Exact flow definition included.

Instructions preview

Add the BugDrop Page Helpfulness feedback flow to my site.

Reuse my site's BugDrop installation and repository. If none is configured, ask which owner/repository to use and help install the GitHub App: https://bugdrop.dev/docs/installation. Do not guess or ship placeholders.

Use the JSON below. Preserve IDs, screen references, validation, and issue mappings. Match the product name, theme, accentColor, and an accessible “Page Helpfulness” trigger to my site.

Integration:
- Browser widget: https://bugdrop.neonwatty.workers.dev/widget.v1.59.1.js. No SDK needed.
- Reuse a compatible widget. Do not inject a second runtime. If registerFlow is unsupported, explain the required update before replacing it.
- For a new installation, load the script once with the confirmed data-repo, data-button="false", data-font="inherit", and matching data-theme/data-color.
- After load, call window.BugDrop.registerFlow(config) once. Keep the handle; trigger handle.open().result from the button. Handle loading, errors, and busy outcomes.
- With v1.59.1, apply the Safari input guard below to the flow host immediately after handle.open(). It prevents redundant blur events from swallowing button clicks.
- In frameworks, initialize client-side, avoid duplicate registration on rerenders, and clean up listeners.
- Installed flows create real GitHub Issues. Do not use gallery preview transport or submit a live test issue without approval. Verify rendering, dismissal, and mocked submission; summarize changes.

Safari input guard (JavaScript; scoped to the widget):
```js
function guardDemoTextChanges(host) {
  const root = host && host.shadowRoot;
  if (!root) return;
  const seen = new WeakMap();
  const field = target => target instanceof HTMLTextAreaElement ||
    (target instanceof HTMLInputElement && ['text','email','url','search','tel'].includes(target.type));
  root.addEventListener('input', event => {
    if (field(event.target)) seen.set(event.target, event.target.value);
  }, true);
  root.addEventListener('change', event => {
    if (field(event.target) && seen.get(event.target) === event.target.value) event.stopPropagation();
  }, true);
}
// Immediately after handle.open():
guardDemoTextChanges(document.querySelector('[data-bugdrop-flow="' + CSS.escape(config.id) + '"]'));
```

Exact flow definition (JSON):
```json
{
  "configVersion": 1,
  "id": "page-helpfulness",
  "presentation": {
    "kind": "modal",
    "size": "compact"
  },
  "content": {
    "successTitle": "Feedback received",
    "successMessage": "Thanks for helping us improve."
  },
  "forms": [
    {
      "id": "helpful",
      "title": "Was this page helpful?",
      "fields": [
        {
          "id": "answer",
          "type": "singleChoice",
          "label": "Was this page helpful?",
          "required": true,
          "display": "buttons",
          "options": [
            {
              "value": "yes",
              "label": "Yes"
            },
            {
              "value": "no",
              "label": "No"
            }
          ]
        }
      ]
    },
    {
      "id": "followup",
      "title": "What could be clearer?",
      "description": "Your explanation is optional.",
      "fields": [
        {
          "id": "detail",
          "type": "longText",
          "label": "Tell us more",
          "rows": 3
        }
      ]
    }
  ],
  "screens": [
    {
      "id": "helpful-screen",
      "type": "form",
      "form": "helpful",
      "continueLabel": "Continue"
    },
    {
      "id": "followup-screen",
      "type": "form",
      "form": "followup",
      "backLabel": "Change answer",
      "continueLabel": "Send feedback"
    }
  ],
  "issue": {
    "classification": "question",
    "title": "Page helpfulness: {{helpful.answer}}",
    "sections": [
      {
        "heading": "Helpful",
        "answer": "helpful.answer",
        "format": "choice"
      },
      {
        "heading": "Explanation",
        "answer": "followup.detail",
        "omitWhenEmpty": true
      }
    ]
  },
  "appearance": {
    "theme": "auto",
    "accentColor": "#7c3aed"
  }
}
```

Replace YOUR-OWNER/YOUR-REPOSITORY and install the GitHub App there. Customize the name, theme, and color as needed.

Creates GitHub Issues when installed.

Complete embed code

<!-- BugDrop: Page Helpfulness, recipe v1. Place where you want the trigger. -->
<button type="button" disabled>Page Helpfulness</button>
<span role="status" style="display:block;font:14px system-ui">Loading feedback…</span>
<script>
(() => {
  const status = document.currentScript.previousElementSibling;
  const button = status.previousElementSibling;
  const config = {
  "configVersion": 1,
  "id": "page-helpfulness",
  "presentation": {
    "kind": "modal",
    "size": "compact"
  },
  "content": {
    "successTitle": "Feedback received",
    "successMessage": "Thanks for helping us improve."
  },
  "forms": [
    {
      "id": "helpful",
      "title": "Was this page helpful?",
      "fields": [
        {
          "id": "answer",
          "type": "singleChoice",
          "label": "Was this page helpful?",
          "required": true,
          "display": "buttons",
          "options": [
            {
              "value": "yes",
              "label": "Yes"
            },
            {
              "value": "no",
              "label": "No"
            }
          ]
        }
      ]
    },
    {
      "id": "followup",
      "title": "What could be clearer?",
      "description": "Your explanation is optional.",
      "fields": [
        {
          "id": "detail",
          "type": "longText",
          "label": "Tell us more",
          "rows": 3
        }
      ]
    }
  ],
  "screens": [
    {
      "id": "helpful-screen",
      "type": "form",
      "form": "helpful",
      "continueLabel": "Continue"
    },
    {
      "id": "followup-screen",
      "type": "form",
      "form": "followup",
      "backLabel": "Change answer",
      "continueLabel": "Send feedback"
    }
  ],
  "issue": {
    "classification": "question",
    "title": "Page helpfulness: {{helpful.answer}}",
    "sections": [
      {
        "heading": "Helpful",
        "answer": "helpful.answer",
        "format": "choice"
      },
      {
        "heading": "Explanation",
        "answer": "followup.detail",
        "omitWhenEmpty": true
      }
    ]
  },
  "appearance": {
    "theme": "auto",
    "accentColor": "#7c3aed"
  }
};
  const installation = {
  "url": "https://bugdrop.neonwatty.workers.dev/widget.v1.59.1.js",
  "repo": "YOUR-OWNER/YOUR-REPOSITORY",
  "theme": "auto",
  "color": "#7c3aed"
};
  const key = Symbol.for('bugdrop.examples.installation.v1');
  const signature = JSON.stringify(installation);
  const fail = error => { status.textContent = error.message || 'Unable to load feedback. Please reload and try again.'; };
  const load = () => new Promise((resolve, reject) => {
    const candidates = Array.from(document.scripts).filter(s => {
      if (!s.src) return false;
      const url = new URL(s.src);
      return /widget(?:\.v[\d.]+)?\.js$/.test(url.pathname) &&
        (url.origin === new URL(installation.url).origin || s.dataset.repo || s.dataset.applicationId);
    });
    const existing = candidates.find(s => s.src === installation.url && s.dataset.repo === installation.repo);
    if ((window.BugDrop || candidates.length) && (!existing || candidates.length !== 1)) {
      reject(new Error('An incompatible BugDrop installation exists. Update its script to the pinned URL and repository in this embed, then reload.')); return;
    }
    const script = existing || document.createElement('script');
    let settled = false;
    const cleanup = () => { clearTimeout(timer); script.removeEventListener('load', ready); script.removeEventListener('error', failed); };
    const failed = () => { if (settled) return; settled = true; cleanup(); reject(new Error('Unable to load BugDrop. Reload the page to try again.')); };
    const ready = () => {
      if (settled) return;
      if (!window.BugDrop || typeof window.BugDrop.registerFlow !== 'function') { failed(); return; }
      settled = true; cleanup(); resolve(window.BugDrop);
    };
    const timer = setTimeout(failed, 15000);
    if (existing && window.BugDrop) { ready(); return; }
    script.addEventListener('load', ready, {once:true}); script.addEventListener('error', failed, {once:true});
    if (!existing) {
      script.src = installation.url;
      script.dataset.repo = installation.repo; script.dataset.button = 'false'; script.dataset.font = 'inherit';
      script.dataset.theme = installation.theme; script.dataset.color = installation.color;
      document.head.append(script);
    }
  });
  let state = window[key];
  if (state && state.signature !== signature) { fail(new Error('These embeds use different installation settings. Use the same repository and theme for all embeds on this page.')); return; }
  if (!state) {
    state = {signature, ready:load(), handles:new Map()}; window[key] = state;
  }
  state.ready.then(api => {
    const definition = JSON.stringify(config);
    let entry = state.handles.get(config.id);
    if (entry && entry.definition !== definition) throw new Error('This flow is already installed with different settings. Replace the old embed and reload.');
    if (!entry) { entry = {definition, handle:api.registerFlow(config)}; state.handles.set(config.id, entry); }
    button.disabled = false; status.textContent = '';
    button.onclick = async () => {
      button.disabled = true; status.textContent = '';
      try {
        const opened = entry.handle.open();
        (function guardDemoTextChanges(host) {
  const root = host && host.shadowRoot;
  if (!root) return;
  const seen = new WeakMap();
  const field = target => target instanceof HTMLTextAreaElement ||
    (target instanceof HTMLInputElement && ['text','email','url','search','tel'].includes(target.type));
  root.addEventListener('input', event => {
    if (field(event.target)) seen.set(event.target, event.target.value);
  }, true);
  root.addEventListener('change', event => {
    if (field(event.target) && seen.get(event.target) === event.target.value) event.stopPropagation();
  }, true);
})(document.querySelector('[data-bugdrop-flow="' + CSS.escape(config.id) + '"]'));
        const outcome = await opened.result;
        if (outcome.status === 'busy') status.textContent = 'Close the other feedback form first.';
      } catch (error) { fail(error); }
      finally { button.disabled = false; button.focus(); }
    };
  }).catch(fail);
})();
</script>

✦05 / TWO STEPS

Early-access Feedback

Learn what worked and what needs improvement.

ADD TO YOUR SITE

Early-access Feedback

Paste these instructions into your coding agent to add this flow to your site.

Exact flow definition included.

Instructions preview

Add the BugDrop Early-access Feedback feedback flow to my site.

Reuse my site's BugDrop installation and repository. If none is configured, ask which owner/repository to use and help install the GitHub App: https://bugdrop.dev/docs/installation. Do not guess or ship placeholders.

Use the JSON below. Preserve IDs, screen references, validation, and issue mappings. Match the product name, theme, accentColor, and an accessible “Early-access Feedback” trigger to my site.

Integration:
- Browser widget: https://bugdrop.neonwatty.workers.dev/widget.v1.59.1.js. No SDK needed.
- Reuse a compatible widget. Do not inject a second runtime. If registerFlow is unsupported, explain the required update before replacing it.
- For a new installation, load the script once with the confirmed data-repo, data-button="false", data-font="inherit", and matching data-theme/data-color.
- After load, call window.BugDrop.registerFlow(config) once. Keep the handle; trigger handle.open().result from the button. Handle loading, errors, and busy outcomes.
- With v1.59.1, apply the Safari input guard below to the flow host immediately after handle.open(). It prevents redundant blur events from swallowing button clicks.
- In frameworks, initialize client-side, avoid duplicate registration on rerenders, and clean up listeners.
- Installed flows create real GitHub Issues. Do not use gallery preview transport or submit a live test issue without approval. Verify rendering, dismissal, and mocked submission; summarize changes.

Safari input guard (JavaScript; scoped to the widget):
```js
function guardDemoTextChanges(host) {
  const root = host && host.shadowRoot;
  if (!root) return;
  const seen = new WeakMap();
  const field = target => target instanceof HTMLTextAreaElement ||
    (target instanceof HTMLInputElement && ['text','email','url','search','tel'].includes(target.type));
  root.addEventListener('input', event => {
    if (field(event.target)) seen.set(event.target, event.target.value);
  }, true);
  root.addEventListener('change', event => {
    if (field(event.target) && seen.get(event.target) === event.target.value) event.stopPropagation();
  }, true);
}
// Immediately after handle.open():
guardDemoTextChanges(document.querySelector('[data-bugdrop-flow="' + CSS.escape(config.id) + '"]'));
```

Exact flow definition (JSON):
```json
{
  "configVersion": 1,
  "id": "early-access",
  "presentation": {
    "kind": "modal",
    "size": "default"
  },
  "content": {
    "successTitle": "Feedback received",
    "successMessage": "Thanks for shaping our next release."
  },
  "forms": [
    {
      "id": "experience",
      "title": "How was your experience?",
      "fields": [
        {
          "id": "score",
          "type": "rating",
          "label": "Your experience",
          "required": true,
          "scale": 5,
          "icon": "star",
          "lowLabel": "Frustrating",
          "highLabel": "Great"
        }
      ]
    },
    {
      "id": "detail",
      "title": "Help shape the next release",
      "fields": [
        {
          "id": "worked",
          "type": "longText",
          "label": "What worked well?",
          "rows": 3
        },
        {
          "id": "improve",
          "type": "longText",
          "label": "What needs improvement?",
          "rows": 3
        }
      ]
    }
  ],
  "screens": [
    {
      "id": "experience-screen",
      "type": "form",
      "form": "experience",
      "continueLabel": "Continue"
    },
    {
      "id": "detail-screen",
      "type": "form",
      "form": "detail",
      "backLabel": "Change rating",
      "continueLabel": "Send feedback"
    }
  ],
  "issue": {
    "classification": "question",
    "title": "Early-access feedback {{experience.score}}/5",
    "sections": [
      {
        "heading": "Experience",
        "answer": "experience.score",
        "format": "stars"
      },
      {
        "heading": "What worked",
        "answer": "detail.worked",
        "omitWhenEmpty": true
      },
      {
        "heading": "Improvements",
        "answer": "detail.improve",
        "omitWhenEmpty": true
      }
    ]
  },
  "appearance": {
    "theme": "auto",
    "accentColor": "#7c3aed"
  }
}
```

Replace YOUR-OWNER/YOUR-REPOSITORY and install the GitHub App there. Customize the name, theme, and color as needed.

Creates GitHub Issues when installed.

Complete embed code

<!-- BugDrop: Early-access Feedback, recipe v1. Place where you want the trigger. -->
<button type="button" disabled>Early-access Feedback</button>
<span role="status" style="display:block;font:14px system-ui">Loading feedback…</span>
<script>
(() => {
  const status = document.currentScript.previousElementSibling;
  const button = status.previousElementSibling;
  const config = {
  "configVersion": 1,
  "id": "early-access",
  "presentation": {
    "kind": "modal",
    "size": "default"
  },
  "content": {
    "successTitle": "Feedback received",
    "successMessage": "Thanks for shaping our next release."
  },
  "forms": [
    {
      "id": "experience",
      "title": "How was your experience?",
      "fields": [
        {
          "id": "score",
          "type": "rating",
          "label": "Your experience",
          "required": true,
          "scale": 5,
          "icon": "star",
          "lowLabel": "Frustrating",
          "highLabel": "Great"
        }
      ]
    },
    {
      "id": "detail",
      "title": "Help shape the next release",
      "fields": [
        {
          "id": "worked",
          "type": "longText",
          "label": "What worked well?",
          "rows": 3
        },
        {
          "id": "improve",
          "type": "longText",
          "label": "What needs improvement?",
          "rows": 3
        }
      ]
    }
  ],
  "screens": [
    {
      "id": "experience-screen",
      "type": "form",
      "form": "experience",
      "continueLabel": "Continue"
    },
    {
      "id": "detail-screen",
      "type": "form",
      "form": "detail",
      "backLabel": "Change rating",
      "continueLabel": "Send feedback"
    }
  ],
  "issue": {
    "classification": "question",
    "title": "Early-access feedback {{experience.score}}/5",
    "sections": [
      {
        "heading": "Experience",
        "answer": "experience.score",
        "format": "stars"
      },
      {
        "heading": "What worked",
        "answer": "detail.worked",
        "omitWhenEmpty": true
      },
      {
        "heading": "Improvements",
        "answer": "detail.improve",
        "omitWhenEmpty": true
      }
    ]
  },
  "appearance": {
    "theme": "auto",
    "accentColor": "#7c3aed"
  }
};
  const installation = {
  "url": "https://bugdrop.neonwatty.workers.dev/widget.v1.59.1.js",
  "repo": "YOUR-OWNER/YOUR-REPOSITORY",
  "theme": "auto",
  "color": "#7c3aed"
};
  const key = Symbol.for('bugdrop.examples.installation.v1');
  const signature = JSON.stringify(installation);
  const fail = error => { status.textContent = error.message || 'Unable to load feedback. Please reload and try again.'; };
  const load = () => new Promise((resolve, reject) => {
    const candidates = Array.from(document.scripts).filter(s => {
      if (!s.src) return false;
      const url = new URL(s.src);
      return /widget(?:\.v[\d.]+)?\.js$/.test(url.pathname) &&
        (url.origin === new URL(installation.url).origin || s.dataset.repo || s.dataset.applicationId);
    });
    const existing = candidates.find(s => s.src === installation.url && s.dataset.repo === installation.repo);
    if ((window.BugDrop || candidates.length) && (!existing || candidates.length !== 1)) {
      reject(new Error('An incompatible BugDrop installation exists. Update its script to the pinned URL and repository in this embed, then reload.')); return;
    }
    const script = existing || document.createElement('script');
    let settled = false;
    const cleanup = () => { clearTimeout(timer); script.removeEventListener('load', ready); script.removeEventListener('error', failed); };
    const failed = () => { if (settled) return; settled = true; cleanup(); reject(new Error('Unable to load BugDrop. Reload the page to try again.')); };
    const ready = () => {
      if (settled) return;
      if (!window.BugDrop || typeof window.BugDrop.registerFlow !== 'function') { failed(); return; }
      settled = true; cleanup(); resolve(window.BugDrop);
    };
    const timer = setTimeout(failed, 15000);
    if (existing && window.BugDrop) { ready(); return; }
    script.addEventListener('load', ready, {once:true}); script.addEventListener('error', failed, {once:true});
    if (!existing) {
      script.src = installation.url;
      script.dataset.repo = installation.repo; script.dataset.button = 'false'; script.dataset.font = 'inherit';
      script.dataset.theme = installation.theme; script.dataset.color = installation.color;
      document.head.append(script);
    }
  });
  let state = window[key];
  if (state && state.signature !== signature) { fail(new Error('These embeds use different installation settings. Use the same repository and theme for all embeds on this page.')); return; }
  if (!state) {
    state = {signature, ready:load(), handles:new Map()}; window[key] = state;
  }
  state.ready.then(api => {
    const definition = JSON.stringify(config);
    let entry = state.handles.get(config.id);
    if (entry && entry.definition !== definition) throw new Error('This flow is already installed with different settings. Replace the old embed and reload.');
    if (!entry) { entry = {definition, handle:api.registerFlow(config)}; state.handles.set(config.id, entry); }
    button.disabled = false; status.textContent = '';
    button.onclick = async () => {
      button.disabled = true; status.textContent = '';
      try {
        const opened = entry.handle.open();
        (function guardDemoTextChanges(host) {
  const root = host && host.shadowRoot;
  if (!root) return;
  const seen = new WeakMap();
  const field = target => target instanceof HTMLTextAreaElement ||
    (target instanceof HTMLInputElement && ['text','email','url','search','tel'].includes(target.type));
  root.addEventListener('input', event => {
    if (field(event.target)) seen.set(event.target, event.target.value);
  }, true);
  root.addEventListener('change', event => {
    if (field(event.target) && seen.get(event.target) === event.target.value) event.stopPropagation();
  }, true);
})(document.querySelector('[data-bugdrop-flow="' + CSS.escape(config.id) + '"]'));
        const outcome = await opened.result;
        if (outcome.status === 'busy') status.textContent = 'Close the other feedback form first.';
      } catch (error) { fail(error); }
      finally { button.disabled = false; button.focus(); }
    };
  }).catch(fail);
})();
</script>

Built with BugDrop v1.59.1. No SDK required.

Feedback flowsfor your site.

Bug Report

Feature Request

Quick Survey

Page Helpfulness

Early-access Feedback

Feedback flows
for your site.