/** * StackOne HubSpot Form Widget * * Injects a floating button on every docs page. Clicking it toggles a small, * non-blocking popover in the bottom-right corner containing the feedback * form. This is a disclosure widget, not a modal — the page stays fully * interactive and scrollable while it's open (no backdrop, no scroll lock, * no focus trap). Submissions flow into an N8N pipeline that creates a * triage ticket in Linear. * * The form is NOT rendered with HubSpot's embed script. Mintlify serves the * docs with a Content-Security-Policy of `form-action 'self' * https://codesandbox.io`, and the embed submits a real

POST to * forms-eu1.hsforms.com (into a hidden iframe), which that directive * silently blocks — the Submit button appears to do nothing. Instead the * widget fetches the form's definition JSON (so HubSpot stays the source of * truth for fields, labels, and the thank-you message) and submits over * fetch() to the public Submissions API. fetch() is governed by connect-src * (unset here), not form-action, so it goes through. * * Styling lives in style.css (.stackone-hs-*) and mirrors the * @stackone/malachite design tokens (radii, shadows, card colors). */ (function () { // ---- Config ----------------------------------------------------------- const PORTAL_ID = "146796234"; const FORM_ID = "f087c084-6560-4ee7-9be7-dddc8b08910e"; const REGION = "eu1"; // Both endpoints are region-scoped — derive them so REGION stays the // single knob. Neither requires auth: the definition endpoint is what the // official embed reads, and the Submissions API is HubSpot's documented // path for custom-built forms. const FORM_DEF_URL = "https://forms-" + REGION + ".hsforms.com/embed/v3/form/" + PORTAL_ID + "/" + FORM_ID + "/json"; const SUBMIT_URL = "https://api-" + REGION + ".hsforms.com/submissions/v3/integration/submit/" + PORTAL_ID + "/" + FORM_ID; // Change these single lines to relabel the button / popover. const BUTTON_LABEL = "Report an issue"; const PANEL_TITLE = "Report an issue"; const FALLBACK_THANKS = "Thanks for helping us improve our docs."; const SUBMIT_ERROR = "Couldn't send your report. Please try again, or email " + 'support@stackone.com.'; const LOAD_ERROR = "Couldn't load the form. Please try again later or email " + 'support@stackone.com.'; // Element ids const FAB_ID = "stackone-hs-fab"; const PANEL_ID = "stackone-hs-panel"; const FORM_TARGET_ID = "stackone-hs-form-target"; let formLoading = false; let formReady = false; let lastFocused = null; // ---- Form definition + rendering --------------------------------------- function fetchFormDefinition() { return fetch(FORM_DEF_URL).then(function (res) { if (!res.ok) throw new Error("form definition " + res.status); return res.json(); }); } // The definition nests the form under `form` (as served today) but the // embed's older shape is flat — accept both. function unwrapDefinition(def) { return def && def.form ? def.form : def; } function visibleFields(def) { const groups = (def && def.formFieldGroups) || []; const fields = []; groups.forEach(function (group) { (group.fields || []).forEach(function (field) { if (field.enabled !== false && !field.hidden) fields.push(field); }); }); return fields; } function buildControl(field) { let control; if (field.fieldType === "textarea") { control = document.createElement("textarea"); // Tall enough that pasting a chunk of documentation doesn't force // an internal scroll straight away. control.rows = 13; control.className = "stackone-hs-textarea"; } else if (field.fieldType === "select") { control = document.createElement("select"); control.className = "stackone-hs-select"; (field.options || []).forEach(function (opt) { const option = document.createElement("option"); option.value = opt.value; option.textContent = opt.label; control.appendChild(option); }); } else { control = document.createElement("input"); control.type = { email: "email", number: "number", phonenumber: "tel" }[ field.fieldType ] || "text"; control.className = "stackone-hs-input"; } control.name = field.name; control.required = !!field.required; if (field.placeholder) control.placeholder = field.placeholder; if (field.defaultValue) control.value = field.defaultValue; return control; } function buildField(field) { const wrap = document.createElement("div"); wrap.className = "stackone-hs-field"; const label = document.createElement("label"); label.className = "stackone-hs-label"; label.textContent = field.label || field.name; if (field.required) { const star = document.createElement("span"); star.className = "stackone-hs-required"; star.setAttribute("aria-hidden", "true"); star.textContent = "*"; label.appendChild(star); } const control = buildControl(field); const controlId = "stackone-hs-field-" + field.name; control.id = controlId; label.htmlFor = controlId; wrap.appendChild(label); if (field.description) { const help = document.createElement("p"); help.className = "stackone-hs-help"; help.textContent = field.description; help.id = controlId + "-help"; control.setAttribute("aria-describedby", help.id); wrap.appendChild(help); } wrap.appendChild(control); return wrap; } function hubspotCookie() { const match = document.cookie.match(/(?:^|;\s*)hubspotutk=([^;]+)/); return match ? match[1] : null; } function submitForm(form, def, statusEl) { const controls = Array.from(form.elements).filter(function (el) { return el.name; }); const fields = controls.map(function (el) { return { objectTypeId: "0-1", name: el.name, value: el.value }; }); const hutk = hubspotCookie(); const context = { pageUri: window.location.href, pageName: document.title, }; if (hutk) context.hutk = hutk; const submitBtn = form.querySelector('button[type="submit"]'); submitBtn.disabled = true; statusEl.textContent = ""; fetch(SUBMIT_URL, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ fields: fields, context: context }), }) .then(function (res) { if (!res.ok) throw new Error("submit " + res.status); return res.json().catch(function () { return {}; }); }) .then(function (body) { const thanks = document.createElement("p"); thanks.className = "stackone-hs-success"; // role="status" announces the message to screen readers; // tabindex="-1" makes the

programmatically focusable so // keyboard focus doesn't drop when the form is replaced. thanks.setAttribute("role", "status"); thanks.tabIndex = -1; thanks.textContent = body.inlineMessage || def.inlineMessage || FALLBACK_THANKS; // inlineMessage can carry markup from HubSpot; it renders fine // as text for the plain message configured today, and textContent // keeps this injection-safe if someone edits it later. form.replaceWith(thanks); thanks.focus(); }) .catch(function () { // Keep the form (and what the user typed) so they can retry. submitBtn.disabled = false; statusEl.innerHTML = SUBMIT_ERROR; }); } function renderForm(def, target) { const form = document.createElement("form"); form.className = "stackone-hs-form"; form.noValidate = false; visibleFields(def).forEach(function (field) { form.appendChild(buildField(field)); }); // Submission errors land here, above the button, inside the popover. const statusEl = document.createElement("p"); statusEl.className = "stackone-hs-error"; statusEl.setAttribute("role", "alert"); form.appendChild(statusEl); const submitBtn = document.createElement("button"); submitBtn.type = "submit"; submitBtn.className = "stackone-hs-submit"; submitBtn.textContent = def.submitText || "Submit"; form.appendChild(submitBtn); form.addEventListener("submit", function (e) { // fetch() instead of the native POST — see the header comment on // why the native submission is CSP-blocked on this site. e.preventDefault(); if (!form.reportValidity()) return; submitForm(form, def, statusEl); }); target.innerHTML = ""; target.appendChild(form); } function createForm() { const target = document.getElementById(FORM_TARGET_ID); if (!target || formReady || formLoading) return; formLoading = true; fetchFormDefinition() .then(function (def) { renderForm(unwrapDefinition(def), target); formReady = true; }) .catch(function () { target.innerHTML = '

' + LOAD_ERROR + "

"; }) .finally(function () { formLoading = false; }); } // ---- Open / close (non-blocking popover) ------------------------------ function isOpen() { const panel = document.getElementById(PANEL_ID); return !!panel && panel.classList.contains("open"); } function openPanel() { const panel = document.getElementById(PANEL_ID); const fab = document.getElementById(FAB_ID); if (!panel) return; lastFocused = document.activeElement; panel.classList.add("open"); panel.setAttribute("aria-hidden", "false"); if (fab) fab.setAttribute("aria-expanded", "true"); const closeBtn = panel.querySelector(".stackone-hs-close"); if (closeBtn) closeBtn.focus(); // Lazy-load + render the form the first time the popover is opened, // so it never costs a request on pages the reader doesn't interact with. createForm(); } function closePanel(restoreFocus) { const panel = document.getElementById(PANEL_ID); const fab = document.getElementById(FAB_ID); if (!panel) return; panel.classList.remove("open"); panel.setAttribute("aria-hidden", "true"); if (fab) fab.setAttribute("aria-expanded", "false"); if ( restoreFocus !== false && lastFocused && typeof lastFocused.focus === "function" ) { lastFocused.focus(); } } function togglePanel() { if (isOpen()) closePanel(); else openPanel(); } // ---- DOM construction ------------------------------------------------- function buildFab() { const button = document.createElement("button"); button.id = FAB_ID; button.type = "button"; button.className = "stackone-hs-fab"; button.setAttribute("aria-haspopup", "dialog"); button.setAttribute("aria-controls", PANEL_ID); button.setAttribute("aria-expanded", "false"); button.setAttribute("aria-label", BUTTON_LABEL); // Static SVG only via innerHTML; the (configurable) label is set as text // so it can never inject markup or break if it contains < or &. button.innerHTML = '"; const label = document.createElement("span"); label.className = "stackone-hs-fab-label"; label.textContent = BUTTON_LABEL; button.appendChild(label); // In `mint dev` the Mintlify dev toolbar occupies the bottom-right corner // and silently swallows clicks on the button's right end. Local preview // only — the toolbar never ships to production. if (/^(localhost|127\.0\.0\.1)$/.test(window.location.hostname)) { button.classList.add("stackone-hs-fab--dev"); } button.addEventListener("click", togglePanel); return button; } function buildPanel() { const panel = document.createElement("div"); panel.id = PANEL_ID; panel.className = "stackone-hs-panel"; // role="dialog" without aria-modal: a non-modal popover. The rest of the // page keeps its semantics and focus is not trapped. panel.setAttribute("role", "dialog"); panel.setAttribute("aria-labelledby", "stackone-hs-title"); panel.setAttribute("aria-hidden", "true"); const header = document.createElement("div"); header.className = "stackone-hs-header"; const title = document.createElement("h2"); title.id = "stackone-hs-title"; title.className = "stackone-hs-title"; title.textContent = PANEL_TITLE; const closeBtn = document.createElement("button"); closeBtn.type = "button"; closeBtn.className = "stackone-hs-close"; closeBtn.setAttribute("aria-label", "Close"); closeBtn.innerHTML = ''; closeBtn.addEventListener("click", function () { closePanel(); }); header.appendChild(title); header.appendChild(closeBtn); const body = document.createElement("div"); body.className = "stackone-hs-body"; const target = document.createElement("div"); target.id = FORM_TARGET_ID; body.appendChild(target); panel.appendChild(header); panel.appendChild(body); return panel; } function inject() { // Guard against duplicate injection across SPA navigation. if (document.getElementById(FAB_ID)) return; document.body.appendChild(buildFab()); document.body.appendChild(buildPanel()); } // Close on Escape while the popover is open. Bound once at the document // level, guarded so repeated root-JS evaluation can't stack listeners. if (!window.__stackoneHsKeydownBound) { window.__stackoneHsKeydownBound = true; document.addEventListener("keydown", function (e) { if (e.key === "Escape" && isOpen()) closePanel(); }); } if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", inject); } else { inject(); } })();

​Input

​Output

Input

Output