How to Send "Embedded" PDF Invoice Previews in Emails
Here's a frustrating reality: you cannot embed a PDF directly into an HTML email body. Gmail, Outlook, and Apple Mail simply do not support it. You're forced to send a "blind" attachment or a plain text link, which leads to lower engagement and trust. Users hesitate to download unknown files from emails.
The solution? Convert the first page of your PDF invoice to an image and embed that in your email. To the recipient, it looks like the invoice is open right inside their inbox. They see the "Total Due" instantly, building trust and driving clicks to the full PDF download.
Quick Example: Convert PDF to Image
Here's how simple it is to convert a PDF's first page to an image using PHP and aPDF.io:
<?php
$ch = curl_init('https://apdf.io/api/pdf/file/to-image');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
'Authorization: Bearer YOUR_API_TOKEN',
'Accept: application/json',
'Content-Type: application/json'
]);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode([
'file' => 'https://example.com/invoice.pdf',
'image_type' => 'png',
'pages' => '1',
'dpi' => 150
]));
$response = curl_exec($ch);
curl_close($ch);
$result = json_decode($response, true);
echo $result[0]['file']; // URL to the PNG image of page 1That's it. You now have a high-resolution PNG image of your invoice that can be embedded in any HTML email.
Why This Approach Works
- Visual Trust: Recipients see the actual invoice content before clicking, not a generic attachment icon.
- Higher Engagement: Emails with inline images get more clicks than those with just text links.
- Email Client Compatibility: Images are universally supported in HTML emails, unlike PDFs.
- Quick Verification: Users can verify the invoice amount and details at a glance.
The Real-World Scenario
You're running an e-commerce platform or invoicing system. When a customer completes a purchase, your system generates a PDF invoice. Now you need to email it to them.
Instead of just attaching the PDF (which many users won't open), you want the email to display a preview of the invoice. When they click the preview image, it downloads or opens the full PDF.
Here's what we'll build:
- Convert: Take the PDF invoice and convert page 1 to a PNG image.
- Embed: Place the image inline in the HTML email template.
- Link: Wrap the image in a link to the full PDF download.
Step 1: Get Your API Token
- Go to aPDF.io.
- Sign up (it's free, no credit card required).
- Copy your API Token from the dashboard.
Step 2: The Complete PHP Script
This script converts a PDF invoice to an image, builds an HTML email, and demonstrates how to send it. We'll use a higher DPI (150) to ensure the image looks crisp on retina displays.
<?php
// Configuration
$apiToken = 'YOUR_API_TOKEN_HERE';
$apiEndpoint = 'https://apdf.io/api/pdf/file/to-image';
// The PDF invoice to convert (could be from your invoice generator)
$invoicePdfUrl = 'https://pdfobject.com/pdf/sample.pdf';
$invoiceNumber = 'INV-2024-001';
$customerEmail = 'customer@example.com';
$totalAmount = '$1,234.56';
// Step 1: Convert PDF first page to PNG image
$requestData = [
'file' => $invoicePdfUrl,
'image_type' => 'png', // PNG for crisp text
'pages' => '1', // Only the first page
'dpi' => 150 // Good balance between quality and file size
];
$ch = curl_init($apiEndpoint);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
'Authorization: Bearer ' . $apiToken,
'Accept: application/json',
'Content-Type: application/json'
]);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($requestData));
$response = curl_exec($ch);
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);
if ($httpCode !== 200) {
die("Error converting PDF: " . $response);
}
$result = json_decode($response, true);
// API returns an array of images (one per page requested)
$invoiceImageUrl = $result[0]['file'];
echo "Invoice image generated: " . $invoiceImageUrl . "\\n";
// Step 2: Build the HTML email template
$htmlEmail = <<<EMAIL
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Your Invoice {$invoiceNumber}</title>
</head>
<body style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px;">
<h1 style="color: #333;">Invoice {$invoiceNumber}</h1>
<p>Dear Customer,</p>
<p>Please find your invoice below. The total amount due is <strong>{$totalAmount}</strong>.</p>
<!-- The embedded invoice preview - clickable to download full PDF -->
<a href="{$invoicePdfUrl}" style="display: block; text-decoration: none;">
<img src="{$invoiceImageUrl}"
alt="Invoice {$invoiceNumber} Preview"
style="max-width: 100%; border: 1px solid #ddd; border-radius: 4px;"
/>
<p style="text-align: center; color: #0066cc; margin-top: 10px;">
Click to download the full PDF invoice
</p>
</a>
<p style="margin-top: 20px; color: #666; font-size: 12px;">
If you have any questions about this invoice, please reply to this email.
</p>
</body>
</html>
EMAIL;
// Step 3: Send the email (example using PHP mail function)
// In production, use a library like PHPMailer or a service like SendGrid
$headers = [
'MIME-Version: 1.0',
'Content-type: text/html; charset=UTF-8',
'From: billing@yourcompany.com',
'Reply-To: support@yourcompany.com'
];
// Uncomment to actually send:
// mail($customerEmail, "Invoice {$invoiceNumber}", $htmlEmail, implode("\\r\\n", $headers));
echo "\\n--- Generated Email HTML ---\\n";
echo $htmlEmail;Run the Script
Save the script as invoice_email.php and run it:
php invoice_email.phpOutput
Invoice image generated: https://apdf-files.s3.eu-central-1.amazonaws.com/abc123-1.png
--- Generated Email HTML ---
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Your Invoice INV-2024-001</title>
</head>
<body style="font-family: Arial, sans-serif; ...">
...
</body>
</html>Important: The image URL from the API is valid for 1 hour. For production use, download the image and host it on your own server or CDN, or use a CID attachment for inline images.
Production Tips: Inline Images with CID
For production email systems, instead of linking to an external image URL, you should embed the image directly in the email using Content-ID (CID). This ensures the image displays even if the user's email client blocks external images. Here's the concept:
<?php
// After getting the image URL from the API, download it
$imageContent = file_get_contents($invoiceImageUrl);
$base64Image = base64_encode($imageContent);
// When using PHPMailer:
// $mail->addStringEmbeddedImage($imageContent, 'invoice_preview', 'invoice.png', 'base64', 'image/png');
// Then reference it in HTML as: <img src="cid:invoice_preview">Choosing the Right Image Format
The aPDF.io API supports multiple image formats. For invoice previews:
- PNG: Best for invoices with text and sharp lines. Crisp rendering but larger file size.
- JPEG: Smaller file size, good for invoices with photos or complex graphics. Use quality 85-90.
// For text-heavy invoices (recommended)
'image_type' => 'png'
// For smaller file size
'image_type' => 'jpeg'DPI Settings for Email
The DPI (dots per inch) setting affects image resolution. For email previews:
- 72-96 DPI: Standard screen resolution. Smallest file size but may look fuzzy on retina displays.
- 150 DPI: Good balance for email. Looks sharp on most devices without being too large.
- 300 DPI: Print quality. Only use if users will print the preview image.
Next Steps
Now that you can embed invoice previews in emails, here are some related features to enhance your invoicing workflow:
- Generate the Invoice PDF: Use the Create endpoint to generate PDF invoices from your HTML templates.
- Password Protect Sensitive Invoices: Use the Security endpoint to add password protection before sending confidential documents.