Install on React

Replace bw_pk_… with your project's public key from the dashboard's Install page. The key only identifies the project; there is no secret in the page.

import { useEffect } from "react";

// Loads the widget once, after the first render.
export function FeedbackWidget() {
  useEffect(() => {
    if (document.querySelector("script[data-backwire]")) return;
    const s = document.createElement("script");
    s.src = "https://cdn.backwire.io/v1/widget.js";
    s.async = true;
    s.setAttribute("data-backwire", "bw_pk_…");
    document.body.appendChild(s);
  }, []);
  return null;
}

Content-Security-Policy

script-src  'self' https://cdn.backwire.io https://challenges.cloudflare.com;
connect-src 'self' https://api.backwire.io;
frame-src   https://challenges.cloudflare.com;

No style-src 'unsafe-inline' is needed: the widget styles itself inside a closed shadow root with constructable stylesheets.

Single-page apps

Route changes made with pushState are detected automatically. From code: window.backwire.open(), window.backwire.close(), window.backwire.identify({ email }) for signed-in users.