Home / Docs / Examples / How to Generate Testimonial Card Images | HTML to Image Docs

How to Generate Testimonial Card Images

Render a testimonial card as a PNG. Useful for social proof on landing pages, sales emails and conference slides.

Want it faster? Use the Quote Card template and skip the markup. Send the quote, author and rating as JSON.

HTML Content

<div class="testimonial-card">
    <div class="quote-icon">❝</div>
    <div class="content">
        <p class="quote">
            HTML to Image has transformed our workflow. We can now automatically 
            generate social media images at scale, saving hours of manual work 
            each week. The API is reliable and the support is excellent!
        </p>
        <div class="author">
            <img 
                src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" 
                alt="John Doe"
                class="avatar"
            />
            <div class="author-info">
                <div class="name">John Doe</div>
                <div class="title">CTO at TechCorp</div>
            </div>
        </div>
        <div class="rating">
            <span class="star">★</span>
            <span class="star">★</span>
            <span class="star">★</span>
            <span class="star">★</span>
            <span class="star">★</span>
        </div>
    </div>
</div>

CSS Styles

body {
    margin: 0;
    padding: 24px;
    background: white;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.testimonial-card {
    width: 400px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    padding: 32px;
    position: relative;
}

.quote-icon {
    position: absolute;
    top: -10px;
    left: 24px;
    font-size: 80px;
    color: #3b82f6;
    opacity: 0.1;
    font-family: Georgia, serif;
}

.content {
    position: relative;
}

.quote {
    color: #1f2937;
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 24px;
}

.author {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-right: 16px;
    object-fit: cover;
}

.author-info {
    flex-grow: 1;
}

.name {
    color: #111827;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 4px;
}

.title {
    color: #6b7280;
    font-size: 14px;
}

.rating {
    color: #fbbf24;
    font-size: 20px;
    letter-spacing: 2px;
}

.star {
    display: inline-block;
}

API Request

POST https://app.html2img.com/api/html

{
    "html": "<div class=\"testimonial-card\"><div class=\"quote-icon\">❝</div><div class=\"content\"><p class=\"quote\">HTML to Image has transformed our workflow. We can now automatically generate social media images at scale, saving hours of manual work each week. The API is reliable and the support is excellent!</p><div class=\"author\"><img src=\"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e\" alt=\"John Doe\" class=\"avatar\" /><div class=\"author-info\"><div class=\"name\">John Doe</div><div class=\"title\">CTO at TechCorp</div></div></div><div class=\"rating\"><span class=\"star\">★</span><span class=\"star\">★</span><span class=\"star\">★</span><span class=\"star\">★</span><span class=\"star\">★</span></div></div></div>",
    "width": 490,
    "height": 320,
    "css": "body{margin:0;padding:10px;background:white;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif}.testimonial-card{width:400px;background:white;border-radius:16px;box-shadow:0 4px 24px rgba(0,0,0,0.08);padding:32px;position:relative}.quote-icon{position:absolute;top:-10px;left:24px;font-size:80px;color:#3b82f6;opacity:0.1;font-family:Georgia,serif}.content{position:relative}.quote{color:#1f2937;font-size:16px;line-height:1.6;margin:0 0 24px}.author{display:flex;align-items:center;margin-bottom:16px}.avatar{width:48px;height:48px;border-radius:50%;margin-right:16px;object-fit:cover}.author-info{flex-grow:1}.name{color:#111827;font-weight:600;font-size:16px;margin-bottom:4px}.title{color:#6b7280;font-size:14px}.rating{color:#fbbf24;font-size:20px;letter-spacing:2px}.star{display:inline-block}"
}

Replace the avatar image URL and testimonial content with your own. Make sure the image is publicly accessible.

How it Works

Modern card design with subtle shadow and rounded corners
Professional typography with proper line height and spacing
Circular avatar image with object-fit for proper scaling
Star rating system using Unicode stars
Decorative quote mark for visual interest

External avatar images must be publicly accessible. Cache them on a CDN you control to avoid 404s during render.

Code in other languages

Node.js

const response = await fetch('https://app.html2img.com/api/html', {
  method: 'POST',
  headers: { 'X-API-Key': process.env.HTML2IMG_API_KEY, 'Content-Type': 'application/json' },
  body: JSON.stringify({ html: testimonialHtml, css: testimonialCss, width: 600, height: 400 }),
});
const { url } = await response.json();

Python

import os, requests
response = requests.post(
    'https://app.html2img.com/api/html',
    headers={'X-API-Key': os.environ['HTML2IMG_API_KEY']},
    json={'html': testimonial_html, 'css': testimonial_css, 'width': 600, 'height': 400},
)
url = response.json()['url']

PHP

$ch = curl_init('https://app.html2img.com/api/html');
curl_setopt_array($ch, [
    CURLOPT_RETURNTRANSFER => true, CURLOPT_POST => true,
    CURLOPT_HTTPHEADER => ['X-API-Key: ' . getenv('HTML2IMG_API_KEY'), 'Content-Type: application/json'],
    CURLOPT_POSTFIELDS => json_encode(['html' => $testimonialHtml, 'css' => $testimonialCss, 'width' => 600, 'height' => 400]),
]);
$url = json_decode(curl_exec($ch), true)['url'];

Common pitfalls

Quote runs longer than the card. Cap quote length in your data layer or use text-overflow: ellipsis.
Avatar fails to load. A broken image icon shows in the render. Cache avatars on your own CDN.
Star rating uses Unicode glyphs. Some fonts render filled stars differently. Use SVG or self-host a star icon font for consistency.

Documentation