Build Email Features in Lovable with Blossu
Copy and paste these prompts to quickly integrate transactional emails and email analytics into your Lovable projects.
Lovable is the AI-powered platform that lets you build web applications using natural language. With these ready-to-use prompts, you can integrate Blossu's powerful email infrastructure into your Lovable projects in minutes.
Each prompt below includes complete code examples and implementation details. Simply copy the prompt, paste it into Lovable, and let AI handle the integration.
Integration Prompts
Initial Setup
Use this prompt to set up Blossu SDK in your Lovable project. You'll need your API key from the Blossu dashboard.
I need to set up Blossu email integration in my Lovable app. Please:
1. Install the @smashsend/node package
2. Create an environment variable for SMASHSEND_API_KEY
3. Set up a utility file at lib/smashsend.ts with the following code:
import { SmashSend } from '@smashsend/node';
if (!process.env.SMASHSEND_API_KEY) {
throw new Error('Missing SMASHSEND_API_KEY environment variable');
}
export const smashsend = new SmashSend(process.env.SMASHSEND_API_KEY);
Make sure to handle errors properly and provide TypeScript types for all functions.Send Transactional Emails
Use this prompt to implement email sending functionality in your Lovable app. Perfect for welcome emails, notifications, and password resets.
I need to send transactional emails using Blossu. Please:
1. Create an API route at app/api/send-email/route.ts:
import { smashsend } from '@/lib/smashsend';
import { NextResponse } from 'next/server';
export async function POST(request: Request) {
try {
const { to, subject, html, text, from } = await request.json();
const email = await smashsend.emails.send({
from: from || 'noreply@yourdomain.com',
to,
subject,
html,
text: text || subject, // Fallback to subject if no text provided
// Optional: Add tags for analytics
tags: ['transactional', 'api']
});
return NextResponse.json({
success: true,
emailId: email.id,
messageId: email.messageId
});
} catch (error) {
console.error('Error sending email:', error);
return NextResponse.json(
{ error: 'Failed to send email' },
{ status: 500 }
);
}
}
2. Create a function to call this API from the frontend:
export async function sendEmail(data: {
to: string;
subject: string;
html: string;
text?: string;
from?: string;
}) {
const response = await fetch('/api/send-email', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data),
});
if (!response.ok) {
throw new Error('Failed to send email');
}
return response.json();
}
3. Include proper error handling and loading states in the UIReact Email Templates
Use this prompt to create beautiful, responsive email templates using React Email components. Perfect for maintaining consistent branding across all your emails.
I need to send beautifully designed emails using React Email components with Blossu:
1. Install React Email dependencies:
- @react-email/components
- @react-email/render
2. Create an email template at components/emails/WelcomeEmail.tsx:
import {
Body,
Container,
Head,
Heading,
Html,
Link,
Preview,
Section,
Text,
} from '@react-email/components';
interface WelcomeEmailProps {
firstName: string;
loginUrl: string;
}
export default function WelcomeEmail({ firstName, loginUrl }: WelcomeEmailProps) {
return (
<Html>
<Head />
<Preview>Welcome to our platform!</Preview>
<Body style={main}>
<Container style={container}>
<Heading style={h1}>Welcome, {firstName}!</Heading>
<Text style={text}>
We're excited to have you on board. Get started by exploring
your dashboard and setting up your first project.
</Text>
<Section style={btnContainer}>
<Link style={button} href={loginUrl}>
Go to Dashboard
</Link>
</Section>
</Container>
</Body>
</Html>
);
}
const main = {
backgroundColor: '#f6f9fc',
fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
};
const container = {
backgroundColor: '#ffffff',
margin: '0 auto',
padding: '20px 0 48px',
marginBottom: '64px',
};
const h1 = {
color: '#333',
fontSize: '24px',
fontWeight: '600',
lineHeight: '24px',
margin: '16px 0',
};
const text = {
color: '#333',
fontSize: '16px',
lineHeight: '24px',
margin: '16px 0',
};
const btnContainer = {
textAlign: 'center' as const,
};
const button = {
backgroundColor: '#5469d4',
borderRadius: '5px',
color: '#fff',
fontSize: '16px',
fontWeight: '600',
textDecoration: 'none',
textAlign: 'center' as const,
display: 'inline-block',
padding: '12px 20px',
};
3. Update the API route to use React Email:
import { smashsend } from '@/lib/smashsend';
import { render } from '@react-email/render';
import WelcomeEmail from '@/components/emails/WelcomeEmail';
export async function POST(request: Request) {
const { to, firstName, loginUrl } = await request.json();
const emailHtml = render(
WelcomeEmail({ firstName, loginUrl })
);
const email = await smashsend.emails.send({
from: 'hello@yourdomain.com',
to,
subject: 'Welcome to Our Platform!',
html: emailHtml,
});
return NextResponse.json({ success: true, emailId: email.id });
}Webhook Integration
Use this prompt to implement webhook handling for real-time email event tracking. Track deliveries, opens, clicks, bounces, and more.
I need to set up Blossu webhooks to track email events. Please:
1. Create a webhook endpoint at app/api/webhooks/smashsend/route.ts:
import { smashsend } from '@/lib/smashsend';
import { NextResponse } from 'next/server';
export async function POST(request: Request) {
try {
// Get the raw body for signature verification
const body = await request.text();
const signature = request.headers.get('X-Smashsend-Signature') || '';
// Verify the webhook signature
const webhookSecret = process.env.SMASHSEND_WEBHOOK_SECRET!;
const isValid = smashsend.webhooks.verifySignature(
body,
signature,
webhookSecret
);
if (!isValid) {
return NextResponse.json(
{ error: 'Invalid signature' },
{ status: 401 }
);
}
// Parse the verified payload
const event = JSON.parse(body);
// Handle different event types
switch (event.type) {
case 'email.sent':
console.log('Email sent:', event.data.emailId);
// Update your database, trigger notifications, etc.
break;
case 'email.delivered':
console.log('Email delivered:', event.data.emailId);
break;
case 'email.opened':
console.log('Email opened:', event.data.emailId);
// Track engagement metrics
break;
case 'email.clicked':
console.log('Link clicked:', event.data.link);
// Track click-through rates
break;
case 'email.bounced':
console.log('Email bounced:', event.data.reason);
// Handle bounce, maybe update contact status
break;
case 'email.complained':
console.log('Spam complaint:', event.data.emailId);
// Immediately unsubscribe the contact
break;
default:
console.log('Unknown event type:', event.type);
}
// Always return 200 to acknowledge receipt
return NextResponse.json({ received: true });
} catch (error) {
console.error('Webhook error:', error);
return NextResponse.json(
{ error: 'Webhook processing failed' },
{ status: 500 }
);
}
}
2. Set up the webhook in Blossu dashboard or via API:
const webhook = await smashsend.webhooks.create({
url: 'https://yourdomain.com/api/webhooks/smashsend',
events: [
'email.sent',
'email.delivered',
'email.opened',
'email.clicked',
'email.bounced',
'email.complained'
],
description: 'Production webhook endpoint'
});
console.log('Webhook secret:', webhook.secret);
// Save this secret as SMASHSEND_WEBHOOK_SECRET in your environment variables
3. Make sure to handle webhook events asynchronously to avoid timeoutsReady to start building? Get your API key and begin integrating Blossu into your Lovable projects.
Start Building with Blossu
Join thousands of developers using Blossu to power their email infrastructure.