The Testimonial element requires a Pro or Agency license. Learn about licensing.
Overview
The Testimonial element showcases customer reviews, quotes, and social proof in an attractive visual format. Testimonials build trust with potential customers by displaying feedback from real users.
Testimonials support two display modes: grid layout shows all testimonials visible at once in a responsive grid, while carousel layout displays one testimonial at a time with navigation controls.
Each testimonial entry can include the customer's name, role/company, quote text, avatar photo, and a 1-5 star rating. You can toggle visibility of ratings, avatars, and roles to match your design needs.
Settings
Configure the Testimonial element using these Inspector options:
| Setting | Description | Default |
|---|---|---|
| Items | Array of testimonial entries with customer details and quotes. | 3 sample testimonials |
| Display Type | Layout mode for testimonials. Options: grid (all visible), carousel (one at a time). | grid |
| Grid Columns | Number of columns for grid layout (1-4). Adjusts responsively on smaller screens. | 3 |
| Show Rating | Display star rating for each testimonial. | true |
| Show Avatar | Display customer photo. Falls back to initials if no image URL provided. | true |
| Show Role | Display job title and company information. | true |
| Card Class | CSS classes for each testimonial card container. | bg-white rounded-lg shadow p-6 |
Carousel-Specific Settings
When Display Type is set to "carousel", these additional options become available:
| Setting | Description | Default |
|---|---|---|
| Autoplay | Automatically advance to next testimonial. | false |
| Autoplay Speed | Time in milliseconds between auto-advances. | 5000 |
| Show Arrows | Display previous/next navigation arrows. | true |
| Show Dots | Display pagination dots below the carousel. | true |
| Pause on Hover | Pause autoplay when user hovers over the carousel. | true |
Item Structure
Each testimonial item in the items array contains these properties:
| Property | Description | Example |
|---|---|---|
| name | Customer's full name. | "John Doe" |
| role | Job title and company. | "CEO, Acme Corp" |
| quote | The testimonial text content. | "This product exceeded our expectations!" |
| avatar | Image URL for customer photo. Leave empty for initials fallback. | "https://example.com/photo.jpg" |
| rating | Star rating from 1-5. | 5 |
Examples
3-Column Grid Testimonials
Display multiple testimonials in a responsive grid layout.
{
"items": [
{
"name": "Sarah Johnson",
"role": "Marketing Director, TechCo",
"quote": "The best investment we've made for our team's productivity.",
"avatar": "",
"rating": 5
},
{
"name": "Mike Chen",
"role": "Startup Founder",
"quote": "Simple to use, powerful features. Exactly what we needed.",
"avatar": "",
"rating": 5
},
{
"name": "Emily Brown",
"role": "Designer, Creative Studio",
"quote": "Beautiful design options that match our brand perfectly.",
"avatar": "",
"rating": 4
}
],
"displayType": "grid",
"gridColumns": 3,
"showRating": true,
"showAvatar": true,
"showRole": true
}Single Testimonial Carousel
Show one large testimonial at a time with navigation, ideal for hero sections.
{
"displayType": "carousel",
"autoplay": true,
"autoplaySpeed": 5000,
"showArrows": true,
"showDots": true,
"cardClass": "bg-white rounded-xl shadow-lg p-8 text-center max-w-2xl mx-auto"
}Testimonials Without Avatars
A cleaner look with just names and quotes, no photos or ratings.
{
"displayType": "grid",
"gridColumns": 2,
"showRating": false,
"showAvatar": false,
"showRole": true,
"cardClass": "bg-gray-50 rounded-lg p-6 border-l-4 border-primary"
}For maximum impact, use real customer photos and include specific details in testimonials. Generic quotes like "Great product!" are less convincing than detailed feedback about specific features or results.