testimon-widget

Beautiful, embeddable React widget for displaying testimonials from testimon.

Installation

npm install testimon-widget
# or
yarn add testimon-widget
# or
pnpm add testimon-widget

Quick Start

import { TestimonialWidget } from 'testimon-widget';

function App() {
  return (
    <TestimonialWidget
      apiKey="your-api-key"
      theme="dark"
      layout="grid"
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | apiKey | string | required | Your testimon API key from dashboard | | apiUrl | string | https://www.testimon.in | API base URL (change for self-hosted) | | theme | 'light' \| 'dark' | 'light' | Widget color theme | | layout | 'grid' \| 'carousel' \| 'list' | 'grid' | Layout style | | maxItems | number | 6 | Maximum testimonials to display | | showAll | boolean | false | Show unapproved testimonials (requires API key) | | className | string | '' | Additional CSS classes |

Layouts

Grid Layout (Default)

Perfect for showcasing multiple testimonials in a responsive grid.

<TestimonialWidget
  apiKey="your-api-key"
  layout="grid"
  maxItems={6}
/>

Carousel Layout

Auto-rotating carousel, great for hero sections.

<TestimonialWidget
  apiKey="your-api-key"
  layout="carousel"
  maxItems={3}
/>

List Layout

Single column layout, ideal for blog posts or narrow spaces.

<TestimonialWidget
  apiKey="your-api-key"
  layout="list"
  maxItems={5}
/>

Themes

Light Theme

Clean design for light backgrounds.

<TestimonialWidget apiKey="your-api-key" theme="light" />

Dark Theme

Modern dark design with glassmorphic cards.

<TestimonialWidget apiKey="your-api-key" theme="dark" />

Getting Your API Key

1. Sign up at www.testimon.in
2. Create a project
3. Copy your API key from the project dashboard
4. Use it in the widget

Examples

Next.js

'use client';

import { TestimonialWidget } from 'testimon-widget';

export default function TestimonialsSection() {
  return (
    <section className="py-20">
      <h2 className="text-3xl font-bold text-center mb-12">
        What Our Customers Say
      </h2>
      <TestimonialWidget
        apiKey={process.env.NEXT_PUBLIC_TESTIMON_API_KEY!}
        theme="dark"
        layout="grid"
        maxItems={6}
      />
    </section>
  );
}

React

import { TestimonialWidget } from 'testimon-widget';

function Testimonials() {
  return (
    <div className="container mx-auto px-4">
      <TestimonialWidget
        apiKey="your-api-key"
        theme="light"
        layout="carousel"
      />
    </div>
  );
}

With Custom Styling

<TestimonialWidget
  apiKey="your-api-key"
  className="my-custom-class"
  theme="dark"
/>

<style>
  .my-custom-class {
    max-width: 1200px;
    margin: 0 auto;
  }
</style>

Features

• ✨ Beautiful, modern design
• 🎨 Light and dark themes
• 📱 Fully responsive
• ⚡ Zero dependencies (except React)
• 🎯 TypeScript support
• 🔄 Auto-rotating carousel
• 🎭 Smooth animations
• 🎨 Customizable styling
• 🚀 Lightweight (~5KB gzipped)

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT

Support

• 📧 Email: [email protected]
• 🐛 Issues: GitHub Issues
• 📖 Docs: www.testimon.in/docs