testimon-widget

Beautiful, embeddable React widget for displaying testimonials from testimon.

Installation

``bash
npm install testimon-widget


or

yarn add testimon-widget

or

pnpm add testimon-widget
`

Quick Start

`tsx
import { TestimonialWidget } from 'testimon-widget';

function App() {
return (
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

$3

Perfect for showcasing multiple testimonials in a responsive grid.

`tsx
apiKey="your-api-key"
layout="grid"
maxItems={6}
/>
`

$3

Auto-rotating carousel, great for hero sections.

`tsx
apiKey="your-api-key"
layout="carousel"
maxItems={3}
/>
`

$3

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

`tsx
apiKey="your-api-key"
layout="list"
maxItems={5}
/>
`

Themes

$3

Clean design for light backgrounds.

`tsx

`

$3

Modern dark design with glassmorphic cards.

`tsx

`

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

$3

`tsx
'use client';

import { TestimonialWidget } from 'testimon-widget';

export default function TestimonialsSection() {
return (


What Our Customers Say

apiKey={process.env.NEXT_PUBLIC_TESTIMON_API_KEY!}
theme="dark"
layout="grid"
maxItems={6}
/>


);
}
`

$3

`tsx
import { TestimonialWidget } from 'testimon-widget';

function Testimonials() {
return (



);
}
`

$3

`tsx
apiKey="your-api-key"
className="my-custom-class"
theme="dark"
/>


``

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: support@testimon.in
- 🐛 Issues: GitHub Issues
- 📖 Docs: www.testimon.in/docs