Start Free Tier

Web Components

What Is a Survey Web Component?

A web component is a custom HTML element built on browser standards. After the FastPoll package loads, the browser knows how to render <sf-fastpoll> and connect it to a survey key.

Three browser standards make this possible:

  • 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

Because this is a browser standard, integration is not tied to one framework.

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, render these elements in a client component and load the package in useEffect.

Vue + Nuxt

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

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

In Nuxt, register the package in a client plugin and wrap usage with <ClientOnly> on SSR pages.

Angular

Angular needs one extra line to tell its compiler about custom elements:

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

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

For full Svelte and Astro snippets, see the Embedding Tutorial.

When to Use Attributes or Properties

Use kebab-case HTML attributes for simple string values. Use camelCase JavaScript properties for typed or object values, includingsessionData.

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

SenseFolks components fire custom events when things happen, like a survey being submitted or finishing its initial load. You listen for them the same way you'd listen for a click:

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

Under the hood, SenseFolks components are compiled with Stencil to generate standards-compliant web components. The build uses:

  • 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

Continue from Here