@opengovsg/confetti

Embeddable React survey widget for collecting user feedback.

Installation

# npm
npm install @opengovsg/confetti

# yarn
yarn add @opengovsg/confetti

# pnpm
pnpm add @opengovsg/confetti

Peer Dependencies

This package requires React 18.2.0+ or React 19:

npm install react@^18.2.0

Quick Start

1. Import the CSS file in your application entry point:

import '@opengovsg/confetti/confetti.css'

2. Add the widget to your page:

import { PopoverConfetti } from '@opengovsg/confetti'

function App() {
  return (
    <div style={{ position: 'fixed', bottom: '1rem', right: '1rem' }}>
      <PopoverConfetti
        surveyId="your-survey-id"
        publishableKey="your-publishable-key"
        metadata={{}}
      />
    </div>
  )
}

Note: You'll need the survey ID and publishable key from your Confetti dashboard. Make sure to whitelist your domain in your team settings.

3. Add Confetti to your CSP headers:

connect-src https://confetti.hack2026.gov.sg;

Template Components

Choose the component that best fits your use case:

| Component | Use Case | Behavior | | ------------------ | --------------------------------- | --------------------------------------------------------- | | EmbeddedConfetti | Inline surveys, feedback sections | Shows questions in an inline manner with a submit button | | PopoverConfetti | Floating feedback widgets | Dismissible popover, step-by-step questions, auto-submits | | StepperConfetti | Guided surveys | One question at a time, auto-submits after last question |

Visibility Hooks

Control when your survey appears with these hooks:

useVisibleAfterDelay

Show the survey after a delay:

import { useVisibleAfterDelay } from '@opengovsg/confetti'

const { isVisible } = useVisibleAfterDelay({ delay: 5000 }) // 5 seconds

useVisibleAfterScroll

Show the survey after scrolling a certain distance:

import { useVisibleAfterScroll } from '@opengovsg/confetti'

const { isVisible } = useVisibleAfterScroll({ threshold: 500 }) // 500px