Surveys

Before you start: go to Settings → Integrations → Surveys to set the appearance and copy your API key.

A floating button fixed to the bottom corner of every page. Clicking it opens an overlay with a sentiment row first, optional text field second. Lowest setup cost and the highest response volume, so it's the right default for general collection.

<script async src="https://app.annsa.ai/survey.js"
  data-api-key="YOUR_API_KEY"
  data-survey="float">
</script>

Paste it before </body> on every page where you want the button.

A "was this helpful?" widget rendered in the document flow, with no floating element. Good for help articles and feature announcements — responses are naturally scoped to whatever the reader just read.

Place the element where you want it, then load the script:

<div data-circuit-inline
  data-api-key="YOUR_API_KEY"
  data-context="help-article:api-docs"
  data-prompt="Was this helpful?">
</div>
<script async src="https://app.annsa.ai/survey.js"
  data-api-key="YOUR_API_KEY"
  data-survey="inline">
</script>

It renders in the light DOM, so your page CSS applies. Use data-primary-color on the script tag to match your brand.

A thin bar that slides in after a delay you set and dismisses with a close button. Best at a natural transition — after a flow completes, a tutorial finishes, or a page ends. The delay lets someone settle before the prompt appears.

<script async src="https://app.annsa.ai/survey.js"
  data-api-key="YOUR_API_KEY"
  data-survey="bar"
  data-prompt="How was your experience?"
  data-context="flow:checkout-complete"
  data-delay="2000">
</script>

The bar uses Shadow DOM, so your page styles won't bleed in.

Two buttons that submit immediately with no modal, plus an optional one-line follow-up. The lowest-friction format — put one next to a new feature, a dashboard widget or a specific setting.

<span data-circuit-thumbs
  data-api-key="YOUR_API_KEY"
  data-context="feature:dark-mode">
</span>
<script async src="https://app.annsa.ai/survey.js"
  data-api-key="YOUR_API_KEY"
  data-survey="thumbs">
</script>

You can place several [data-circuit-thumbs] elements on one page with different data-context values — one script tag covers all of them. Renders in the light DOM.

No floating UI at all. Attach it to an existing link, button or CTA and clicking opens the full modal. Right for settings pages, forms and onboarding, where a floating button would feel out of place.

<a href="#" data-circuit-page data-api-key="YOUR_API_KEY">Give Feedback</a>
<script async src="https://app.annsa.ai/survey.js"
  data-api-key="YOUR_API_KEY"
  data-survey="page">
</script>

The element's own text becomes the CTA label. Works on <a>, <button> or anything clickable, and uses Shadow DOM for the modal. There are no format-specific attributes — everything comes from the shared options and the element's text.

These go on the <script> tag and apply to every format.

Once the script loads, window.AnnsaSurvey is available:

window.AnnsaSurvey.open();    // Open the feedback modal
window.AnnsaSurvey.close();   // Close the modal

// Attach user identity to submissions
window.AnnsaSurvey.identify({
  email: 'jane@acme.com',
  name: 'Jane Doe',
  plan: 'pro'
});

window.AnnsaSurvey.reset();   // Clear identity
window.AnnsaSurvey.destroy(); // Remove the survey and clean up

If your user data is ready before the script runs, queue the call and Annsa processes it once the survey initialises:

window.AnnsaSurvey = window.AnnsaSurvey || { _q: [] };
window.AnnsaSurvey._q.push(['identify', { email: 'jane@acme.com', plan: 'pro' }]);

Into the same pool as every other source, and each survey gets its own dashboard — see Survey Analytics for metrics, filtering and export.

When you mark a spec Shipped, the people who submitted through a survey are the ones Annsa can notify. Working with Specs covers the send flow.