Quick Start

This guide will help you collect your first feedback response in under 5 minutes.

Prerequisites

A HappyPanda account (sign up here)
A website or web application to embed the widget

Setup Guide

Create Your Account

Go to happypanda.ai and sign up with your email. Verify your email address and log in to your dashboard.
Create a Project

Click New Project on the dashboard:
- Enter a project name (e.g., “My Website”)
- Add your domain to allowed domains (e.g., “mywebsite.com”)
- Click Create Project
Create Your First Survey

Navigate to your project and click Create Survey:
- Choose your survey type (we recommend Feedback or NPS to start)
- Customize colors to match your brand
- Edit the text and labels
- Choose launcher icon and position
- Click Save & Publish
Install the Widget

Go to Settings and copy your Project ID from the General tab. Add the widget script to your website before the closing </body> tag:
```
<script
  src="https://cdn.happypanda.ai/widget.js"
  data-project-id="your-project-id"
></script>
```
Test Your Widget

Visit your website and click the feedback button. Submit a test response, then check your HappyPanda dashboard to see it appear.

Framework Examples

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <h1>Welcome to My Website</h1>

  <!-- Add HappyPanda before </body> -->
  <script
    src="https://cdn.happypanda.ai/widget.js"
    data-project-id="your-project-id"
  ></script>
</body>
</html>

// App.tsx or layout component
import { useEffect } from 'react';

export function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://cdn.happypanda.ai/widget.js';
    script.dataset.projectId = 'your-project-id';
    script.async = true;
    document.body.appendChild(script);
  }, []);

  return <div>{/* Your app content */}</div>;
}

import Script from 'next/script';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://cdn.happypanda.ai/widget.js"
          data-project-id="your-project-id"
          strategy="lazyOnload"
        />
      </body>
    </html>
  );
}

<script setup lang="ts">
import { onMounted } from 'vue';

onMounted(() => {
  const script = document.createElement('script');
  script.src = 'https://cdn.happypanda.ai/widget.js';
  script.dataset.projectId = 'your-project-id';
  script.async = true;
  document.body.appendChild(script);
});
</script>

<template>
  <div><!-- Your app content --></div>
</template>

Set Up Integrations (Optional)

Connect Slack

Get instant notifications when feedback is submitted:

Go to Integrations in the main navigation
Click Connect on the Slack card
Authorize HappyPanda in your Slack workspace
Choose which channel receives notifications
Save settings

Connect Linear

Automatically create issues from feedback:

Go to Integrations in the main navigation
Click Connect on the Linear card
Authorize HappyPanda
Select your team and default labels
Enable auto-create if desired
Save settings

View Feedback

Once you have feedback:

Go to the Feedback page in your project
View all submissions with filtering and sorting
See individual response details
Track NPS or CSAT scores
Export data as needed

Next Steps

Customize your widget appearance
Learn about survey types to choose the best fit
Set up integrations to automate your workflow
Explore the API for programmatic access