FeedbackKit - Developer-first feedback collection

HTML Snippets

Drop-in HTML snippets for adding marketing infrastructure to any website without JavaScript frameworks.

Framework Agnostic

Works with any website

Customizable

CSS and theme options

Lightweight

Minimal JavaScript

Simple Integration

Copy and paste ready

Setup

Add to Your HTML

Include the FeedbackKit script in your HTML head or before the closing body tag

<!-- Add this to your HTML head or before closing body tag -->
<script src="https://unpkg.com/@feedbackkit/widget@latest/dist/index.umd.js"></script>
<script>
  window.FeedbackKit.init({
    apiKey: 'your-api-key-here'
  });
</script>

Feedback Widget Snippet

Basic Feedback Widget

Add a feedback widget to any page with interactive overlay

<!-- Basic feedback widget -->
<div id="feedbackkit-widget" data-project-id="proj_abc123"></div>

<script>
  window.FeedbackKit.renderWidget('#feedbackkit-widget', {
    theme: 'dark',
    position: 'bottom-right',
    onFeedback: (feedback, data) => {
      console.log('New feedback:', feedback, data);
    }
  });
</script>

Testimonial Snippet

Testimonial Wall

Display customer testimonials and reviews on your website

<!-- Testimonial wall -->
<div id="promo-testimonials" data-project-id="proj_abc123"></div>

<script>
  window.PromoKit.renderTestimonials('#promo-testimonials', {
    theme: 'dark',
    maxItems: 6,
    showRating: true,
    layout: 'grid'
  });
</script>

Changelog Snippet

Changelog Feed

Show product updates and changelog entries to your users

<!-- Changelog feed -->
<div id="promo-changelog" data-project-id="proj_abc123"></div>

<script>
  window.PromoKit.renderChangelog('#promo-changelog', {
    theme: 'dark',
    maxItems: 5,
    showSubscribe: true,
    compact: false
  });
</script>

Complete Example

Full HTML Page

A complete example showing all components working together

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Product - Built with PromoKit</title>
    <script src="https://unpkg.com/@promokit/js@latest/dist/index.umd.js"></script>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            margin: 0;
            padding: 0;
            background: #0f172a;
            color: white;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
        }
        .hero {
            text-align: center;
            padding: 4rem 0;
        }
        .components {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin: 4rem 0;
        }
        .component {
            background: #1e293b;
            border-radius: 12px;
            padding: 2rem;
            border: 1px solid #334155;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="hero">
            <h1>My Amazing Product</h1>
            <p>Join thousands of users who love our product</p>
        </div>
        
        <div class="components">
            <div class="component">
                <h3>Join the Waitlist</h3>
                <div id="promo-waitlist" data-project-id="proj_abc123"></div>
            </div>
            
            <div class="component">
                <h3>What Our Users Say</h3>
                <div id="promo-testimonials" data-project-id="proj_abc123"></div>
            </div>
            
            <div class="component">
                <h3>Latest Updates</h3>
                <div id="promo-changelog" data-project-id="proj_abc123"></div>
            </div>
        </div>
    </div>

    <script>
        // Initialize PromoKit
        window.PromoKit.init({
            apiKey: 'your-api-key-here'
        });

        // Render components
        window.PromoKit.renderWaitlist('#promo-waitlist', {
            theme: 'dark',
            referralReward: 'Skip 10 spots!'
        });

        window.PromoKit.renderTestimonials('#promo-testimonials', {
            theme: 'dark',
            maxItems: 3
        });

        window.PromoKit.renderChangelog('#promo-changelog', {
            theme: 'dark',
            maxItems: 3,
            showSubscribe: true
        });
    </script>
</body>
</html>

Next Steps

Get Your API Key

Explore Examples

Check out our examples page to see more integration patterns and use cases.