Start Free Tier

Web Components

What Is a Survey Web Component?

A web component is a custom HTML element. Loading FastPoll registers <sf-fastpoll>; its survey key selects the survey to render.

Web components use these browser standards:

  • Custom Elements let you register new tag names like <sf-fastpoll> that browsers recognise and render
  • Shadow DOM gives each component its own isolated DOM tree, so its styles don't leak into your page and your styles don't break the component
  • HTML Templates provide reusable markup that the component renders efficiently

The same element works across frontend frameworks.

Why SenseFolks Uses Web Components

  • One Embed Model Across Frontends

    React + Next.js, Vue + Nuxt, Angular, Svelte, Astro, and plain HTML all use the same component.

  • Survey Styles Stay Contained

    Shadow DOM keeps survey styles isolated from your global CSS.

  • Packages Load on Demand

    Load the package for the survey type used on the page.

  • Based on Browser Standards

    Web components are stable browser standards supported across major browsers.

Embed Examples by Frontend

Plain HTML

html
<!-- Load the component -->
<script type="module" src="https://unpkg.com/@sensefolks/[email protected]/dist/sf-fastpoll/sf-fastpoll.esm.js"></script>

<!-- Use it like any HTML element -->
<sf-fastpoll survey-key="your-uuid"></sf-fastpoll>

React + Next.js

jsx
import '@sensefolks/fastpoll';

function Survey() {
  return <sf-fastpoll survey-key="your-uuid" />;
}

In Next.js, load the package in a client component's useEffect.

Vue + Nuxt

vue
<template>
  <sf-fastpoll survey-key="your-uuid" />
</template>

<script setup>
import '@sensefolks/fastpoll';
</script>

In Nuxt, use a client plugin and <ClientOnly> on SSR pages.

Angular

Register Angular's custom elements schema:

typescript
// app.module.ts
import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import '@sensefolks/fastpoll';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

See the embedding tutorial for Svelte and Astro.

When to Use Attributes or Properties

Use kebab-case attributes for strings and camelCase properties for typed values such as sessionData.

HTML Attributes

html
<sf-fastpoll 
  survey-key="abc123" 
  completion-message="Thanks!">
</sf-fastpoll>

JavaScript Properties

javascript
const poll = document.querySelector('sf-fastpoll');
poll.surveyKey = 'abc123';
poll.completionMessage = 'Thanks!';

Listen for Survey Events

Use addEventListener on the survey element. Event support varies by component; check the events reference.

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

poll.addEventListener('sfSubmit', (event) => {
  console.log('Survey submitted:', event.detail);
});

poll.addEventListener('sfReady', (event) => {
  console.log('Survey ready:', event.detail);
});

How SenseFolks Builds the Components

SenseFolks uses Stencil to compile TypeScript into web components with:

  • TypeScript for type safety
  • Lazy loading so you only download what you need
  • Virtual DOM for efficient re-renders
  • Hydratable output for supported rendering setups
  • Modern-browser module builds

Related guides