Paste one snippet. Keep shipping.

1. Paste the loader

Create a site in the dashboard, copy the generated snippet, and paste it before the closing </head> tag. The example below shows the shape with a placeholder key.

<script>
  (function(w,d,k){w.StageWhisper=w.StageWhisper||function(){(w.StageWhisper.q=w.StageWhisper.q||[]).push(arguments)};
  var c=d.currentScript,m=d.querySelector('meta[name="csp-nonce"]'),n=c&&(c.nonce||c.getAttribute('nonce'))||m&&m.content;
  var s=d.createElement('script');s.async=1;s.src='https://cdn.stagewhisper.co/loader.js';
  s.setAttribute('data-sw-key',k);if(n)s.setAttribute('nonce',n);d.head.appendChild(s)})(window,document,'pub_your_site_key');
</script>

2. Allow the script and API in CSP

If your app uses a strict Content Security Policy, add its nonce to the inline script tag. The snippet carries that nonce to the CDN loader, hashed bundle, and widget style. Rails apps can provide the same value through the csp-nonce meta tag emitted by csp_meta_tag.

script-src 'nonce-<your-nonce>' https://cdn.stagewhisper.co;
style-src 'nonce-<your-nonce>';
connect-src https://api.stagewhisper.co;

When Turnstile is enabled for your site, also allow https://challenges.cloudflare.com in script-src, frame-src, and connect-src.

3. Single-page apps

The widget re-evaluates URL rules when your app updates history state. Keep the loader on the shell page and let StageWhisper decide which forms or polls match each route.

Troubleshooting

• Nothing renders: confirm the public site key, allowed domain, and account status.
• CSP blocks the loader: add the nonce and CDN/API hosts shown above.
• Local development fails: enable localhost on the site before testing from `localhost`.
• Quota reached: submissions are accepted silently with a generic thank-you when a plan limit is exceeded.