Installation

There are several ways to add HappyPanda to your application depending on your tech stack and requirements.

CDN Installation (Recommended)

The simplest way to add HappyPanda is via our CDN. This method works with any website.

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

Tip

Place the script just before the closing </body> tag for best performance. The script loads asynchronously and won’t block your page.

Find Your Project ID

1. Log in to your HappyPanda dashboard
2. Select your project
3. Go to Settings and open the General tab
4. Copy your Project ID or Widget Token

The widget automatically fetches all configuration from your dashboard - no additional setup required!

Google Tag Manager

You can load HappyPanda via Google Tag Manager:

1. Create a new Custom HTML tag in GTM

2. Paste the following code:

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

3. Set the trigger to All Pages or your preferred trigger

4. Publish your container

Domain Whitelisting

For security, configure which domains can load your widget:

1. Go to Settings and open the Domains tab
2. Add your domains to the allowed list
3. Use wildcards for subdomains: *.example.com

Examples:

example.com
app.example.com
*.example.com
localhost:3000

Caution

If you don’t configure allowed domains, the widget will work on any domain. We recommend always setting this for production use.

Content Security Policy (CSP)

If your site uses Content Security Policy headers, add these directives:

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:;

Verifying Installation

To verify the widget is installed correctly:

1. Open your browser’s Developer Tools (F12)
2. Go to the Console tab
3. Type HappyPanda and press Enter
4. You should see the widget object with available methods

// Check if widget is loaded
if (window.HappyPanda) {
  console.log('HappyPanda is ready!');
  console.log('Methods:', Object.keys(window.HappyPanda));
}

Performance

The HappyPanda widget is optimized for performance:

Metric	Value
Bundle size	~77 KB gzipped
Load time	Under 100ms
Loading	Asynchronous (non-blocking)
Heavy features	Lazy loaded on demand

Optional Performance Optimizations

<!-- Preconnect for faster loading -->
<link rel="preconnect" href="https://cdn.happypanda.ai">
<link rel="preconnect" href="https://api.happypanda.ai">

<!-- DNS prefetch -->
<link rel="dns-prefetch" href="//cdn.happypanda.ai">

Troubleshooting

Widget not appearing

• Verify your Project ID is correct
• Check that you have an active survey configured
• Ensure your domain is in the allowed domains list
• Check browser console for JavaScript errors

CORS errors

If you see CORS errors in the console:

• Add your domain to the allowed domains in project settings
• Make sure you’re using the correct protocol (http vs https)

Widget loads but shows error

• Check that you have an active survey configured
• Verify your project hasn’t exceeded its submission limit
• Check the browser console for specific error messages

Browser Support

Browser	Support
Chrome	Latest 2 versions
Firefox	Latest 2 versions
Safari	Latest 2 versions
Edge	Latest 2 versions
Mobile Safari	Supported
Chrome Android	Supported

Note

Internet Explorer is not supported.