Survey Events
What These Events Are For
Listen for sfReady when the component finishes initialising and sfSubmit after a valid response is submitted. Use them for analytics or nearby interface updates; do not use client events as proof that a server-side action succeeded.
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.
Listen for an Event
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 the element mounts. In a single-page app, remove them when the view unmounts so navigation does not create duplicate handlers.
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);
});Common Mistakes
- 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.