Start Free Tier

API & Events

When To Use

Use this page when wiring product analytics, custom workflows, or side-effects around survey lifecycle events.

Prerequisites

  • Survey component is rendering successfully on page load.
  • You can reference the custom element node directly.
  • You understand your framework's mount/unmount lifecycle.

Quick Start

const surveyEl = document.querySelector('sf-fastpoll');

surveyEl?.addEventListener('sfReady', (event) => {
  console.log('Ready:', event.detail);
});

surveyEl?.addEventListener('sfSubmit', (event) => {
  console.log('Submitted:', event.detail);
});

Attach listeners after mount and clean them up on unmount in React/Vue route transitions.

Event Model

Event When It Fires Common Use
sfReady Component finished initialization Performance tracking, init logs, UI state updates
sfSubmit Respondent submits valid response Conversion events, funnel completion, follow-up triggers

Examples

React (with cleanup)

useEffect(() => {
  const el = ref.current;
  if (!el) return;

  const onSubmit = (e) => track('survey_submit', e.detail);
  el.addEventListener('sfSubmit', onSubmit);

  return () => el.removeEventListener('sfSubmit', onSubmit);
}, []);

Vanilla JavaScript

document
  .querySelector('sf-userchoice')
  ?.addEventListener('sfReady', ({ detail }) => {
    console.info('Survey ready', detail);
  });

Pitfalls

  • Binding listeners before custom element mount.
  • Typos in event casing (`sfsubmit` vs sfSubmit).
  • Attaching listeners to wrapper div instead of the survey element.
  • Forgetting cleanup in SPA route transitions.

Related Docs