Skip to content
Get Started

Widget Overview

The HappyPanda widget is a lightweight, embeddable JavaScript component that displays surveys on your website or application. It loads asynchronously, won’t slow down your site, and works seamlessly across all modern browsers.

Key Features

Lightweight

Only ~77 KB gzipped. Loads asynchronously and won’t block your page.

Customizable

Match your brand with custom colors, icons, and positioning via dashboard.

Responsive

Works beautifully on desktop and mobile devices.

Accessible

WCAG 2.1 AA compliant for all users.

How It Works

  1. Add the widget script to your website with a single line of code
  2. Widget loads asynchronously - doesn’t block your page rendering
  3. Configuration is fetched from your HappyPanda dashboard automatically
  4. Users click the launcher to open the feedback form
  5. Feedback is submitted and appears in your dashboard instantly
  6. Integrations trigger - notifications sent to Slack, Linear, etc.

Quick Installation

<script
  src="https://cdn.happypanda.ai/widget.js"
  data-project-id="your-project-id"
></script>

That’s it! The widget automatically fetches your survey configuration, colors, and text customizations from your dashboard.

Widget Components

Launcher Button

The floating button users click to open the widget. Customize in your dashboard:

  • Icon - Choose from 8 icons (message-bubble, chat, pencil, comment, question, star, heart, lightbulb)
  • Position - Bottom-right, bottom-left, right side, or left side
  • Style - Floating circular button or rectangular tab
  • Text - Optional label next to the icon

Survey Form

The popup that appears when users click the launcher:

  • Survey question - Your main question with customizable text
  • Response input - Rating scale, stars, emoji, or text field
  • Follow-up - Optional comment field
  • Email field - Optional, configurable as required or optional
  • Screenshot - Optional page screenshot for bug reports

Thank You Screen

Shown after submission:

  • Success message - Customizable thank you text
  • Auto-close - Widget closes automatically after a few seconds

Customization

All widget customization is done through your HappyPanda dashboard:

  1. Go to Surveys and open a survey
  2. Customize colors, text, and layout in the Survey Builder
  3. Preview changes in real-time
  4. Click Save & Publish

Changes sync automatically - no code deployment needed.

Learn more about customization →

Performance

MetricValue
Bundle size~77 KB gzipped
Load timeUnder 100ms on modern connections
LoadingAsynchronous (non-blocking)
Screenshot libLazy loaded only when needed

Browser Support

  • Chrome (latest 2 versions)
  • Firefox (latest 2 versions)
  • Safari (latest 2 versions)
  • Edge (latest 2 versions)
  • Mobile Safari (iOS)
  • Chrome for Android

Security

Domain Whitelisting

Control where your widget can be loaded for security:

  1. Go to Settings and open the Domains tab
  2. Add domains to the allowed list
  3. Widget will only load on these domains

Example domains:

example.com
app.example.com
*.example.com    (wildcard)

Content Security Policy (CSP)

If your site uses CSP headers, add these rules:

Content-Security-Policy:
  script-src 'self' https://cdn.happypanda.ai;
  connect-src 'self' https://api.happypanda.ai;
  img-src 'self' https://cdn.happypanda.ai data:;

Troubleshooting

Widget Not Appearing

  1. Check project ID - Verify the data-project-id is correct
  2. Check browser console - Look for JavaScript errors
  3. Verify domain whitelist - Ensure your domain is in the allowed list
  4. Check active survey - Survey must be set to “active” in dashboard

Widget Not Loading Configuration

  1. Check network tab - Look for 404 or 500 errors to the API
  2. Verify project exists - Confirm the project exists in your dashboard
  3. Check survey status - Ensure the survey is published and active

Styles Conflicting

The widget uses Shadow DOM to prevent CSS conflicts with your site. If you still experience issues, contact support.

Next Steps