Wire Stripo → HubSpot: API-Built Emails with Gamma Content
Transform your email workflow by connecting Stripo's powerful template engine with HubSpot's marketing platform, using content generated from Gamma. This comprehensive guide provides a clear, copy-paste path to get your first API-built email campaign running smoothly.
Prerequisites: What You'll Need
Stripo Requirements
Your Stripo project needs a custom template with at least one generation area. You'll also need the module IDs you plan to use—such as structure_with_hero_section or blog_teaser—along with your JWT authentication token from Stripo Project Settings.
This JWT acts as your Stripo-Api-Auth header for all API calls. Keep it secure and never expose it in client-side code.
HubSpot Configuration
Ensure your HubSpot account has Marketing Email enabled. You'll need API access to create and send emails programmatically, which requires proper authentication credentials.
Familiarize yourself with HubSpot's Marketing Email API documentation to understand the endpoints and data structures you'll be working with throughout this integration.
Step 1: Prepare Your Stripo Template
Creating a robust template structure is the foundation of your automated email system. In Stripo, navigate to your project and create a custom template—not a public or basic one. Custom templates give you full control over generation areas and module placement.
01
Create Custom Template
Start by building a new custom template in your Stripo project dashboard. This template will serve as the container for your dynamically generated content.
02
Add Generation Area
Insert at least one generation area into your template. Name it descriptively, such as "newsletter-main" so you can reference it easily in your API calls.
03
Configure Module Library
Save the reusable blocks you'll need in your Module Library. Keep module IDs stable using snake_case naming conventions for predictable API integration.
Essential Modules for Your Newsletter
Building a newsletter from Gamma content requires three core module types. Each serves a specific purpose in your email structure, from static headers to dynamic content blocks that populate automatically from your data source.
structure_with_title_and_cta
A static module providing your email's header section. This typically includes your newsletter title, brand elements, and a primary call-to-action button that remains consistent across all sends.
structure_empty_3_containers
The shell module that acts as a flexible container. It holds multiple dynamic content blocks and adapts to however many items your data source provides during generation.
blog_teaser
Your dynamic content workhorse with smart properties including url, title, excerpt, image, tag, and read_time. This module repeats for each Gamma document in your feed.
Step 2: Map Gamma Content to Stripo JSON
The bridge between your Gamma content and Stripo templates is canonical JSON. You have two approaches: start with a quick win using inline data, or build a scalable solution with an external data source. Both methods use the same JSON structure—only the delivery mechanism differs.
Option A: Quick Win (RAW Type)
Perfect for prototyping and first implementations. Copy your Gamma items—title, image, link, and summary—into a RAW array that directly feeds your blog_teaser modules.
This approach eliminates external dependencies while you're learning the integration. You can iterate quickly without worrying about hosting or endpoint availability.
Option B: External Source (LINK Type)
For production workflows, host a small endpoint that returns your JSON data. Stripo fetches from this URL during each generation, keeping content fresh without code changes.
Set your data source type to "LINK" and provide the URL. Stripo handles the HTTP request and caching automatically, simplifying your workflow.
JSON Structure Example
Here's the canonical format Stripo expects. This structure defines your email's layout hierarchy, starting with static elements and progressing to dynamic content containers. Each module ID references components from your Module Library.
[
{
"id": "structure_with_title_and_cta"
},
{
"id": "structure_empty_3_containers",
"content": [
{
"id": "blog_teaser",
"values": {
"url": "https://gamma.app/doc-1",
"title": "Doc 1 title",
"excerpt": "1-2 sentence synopsis from Gamma.",
"image": "https://cdn.example.com/doc1.jpg",
"tag": "AI Docs",
"read_time": "5 min read"
}
},
{
"id": "blog_teaser",
"values": {
"url": "https://gamma.app/doc-2",
"title": "Doc 2 title",
"excerpt": "Short synopsis from second doc.",
"image": "https://cdn.example.com/doc2.jpg"
}
}
]
}
]Notice how the structure_empty_3_containers acts as a wrapper, with blog_teaser modules nested inside the content array. Each teaser gets its own values object with the smart properties your template expects.
Step 3: Call the Stripo Generation API
With your template prepared and JSON structured, you're ready to make the magic happen. The Email Generation API endpoint combines your template, data sources, and composers to produce a fully-rendered email. This single POST request orchestrates the entire generation process.
1
Endpoint Configuration
POST to https://my.stripo.email/emailgeneration/v1/email with two critical headers: Content-Type as application/json and Stripo-Api-Auth with your JWT token.
2
Request Body Structure
Your JSON body includes dataSources (your Gamma content), composers (mapping rules), templateId, and metadata like emailName, title, and preheader text for the generated email.
3
Response Handling
On success, Stripo returns metadata about your generated email. You'll use this response to retrieve the final HTML in the next step. Always check for HTTP 200 status.
Complete API Request Body
This comprehensive JSON body shows every required field for email generation. Replace the placeholder values with your actual template ID, module IDs, and content data. The transformers array remains empty for basic implementations—you'll only need it for advanced data manipulation.
{
"dataSources": [
{
"name": "API_canonical",
"type": "RAW",
"value": [
{
"id": "structure_with_title_and_cta"
},
{
"id": "structure_empty_3_containers",
"content": [
{
"id": "blog_teaser",
"values": {
"url": "https://gamma.app/doc-1",
"title": "Doc 1 title",
"excerpt": "Short synopsis from Gamma.",
"image": "https://cdn.example.com/doc1.jpg",
"tag": "AI Docs",
"read_time": "5 min read"
}
}
]
}
]
}
],
"transformers": [],
"composers": [
{
"type": "canonical",
"source": "API_canonical",
"templateArea": "newsletter-main"
}
],
"templateId": YOUR_TEMPLATE_ID,
"emailId": 0,
"emailName": "Gamma_Newsletter",
"title": "What's new this week",
"preheader": "Highlights from Gamma"
}Implementation: cURL Example
The quickest way to test your integration is with cURL from your command line. Save your JSON body to a file called body.json, then execute this command. It's perfect for debugging and verifying your authentication works correctly.
curl -X POST https://my.stripo.email/emailgeneration/v1/email \
-H "Content-Type: application/json" \
-H "Stripo-Api-Auth: YOUR_JWT_TOKEN" \
-d @body.jsonWatch for a 200 response with email metadata. Common issues include malformed JSON, invalid JWT tokens, or referencing non-existent template IDs. The error messages are descriptive and will guide you toward the fix.
Implementation: Node.js Example
For production systems, Node.js provides a robust foundation. This fetch-based implementation handles authentication, error checking, and response parsing. Store your JWT in environment variables to keep credentials secure and separate from your codebase.
const token = process.env.STRIPO_JWT;
const res = await fetch(
"https://my.stripo.email/emailgeneration/v1/email",
{
method: "POST",
headers: {
"Content-Type": "application/json",
"Stripo-Api-Auth": token
},
body: JSON.stringify({
/* your JSON body */
})
}
);
if (!res.ok) {
throw new Error(`Stripo HTTP ${res.status}`);
}
const generated = await res.json();
console.log("Email generated:", generated);This code works in Node.js 18+ or any modern JavaScript environment with native fetch support. For older Node versions, use node-fetch or axios as alternatives.
Step 4: Retrieve HTML from Stripo
After successful generation, Stripo stores your email's HTML and CSS internally. You need to make a second API call to retrieve the compiled, production-ready HTML. This separation allows Stripo to optimize rendering and apply any last-minute processing rules.
The "Get raw HTML & CSS" endpoint in Stripo's documentation provides the exact path and authentication requirements. You'll pass the email ID from the generation response and receive a complete HTML string ready for HubSpot.
This HTML includes inline styles, responsive meta tags, and proper email client compatibility fixes. Store this string—it's what you'll send to HubSpot in the next step. Keep both HTML and plain text versions for best deliverability practices.
Step 5: Push to HubSpot
With your Stripo-generated HTML in hand, you're ready to create the actual marketing email in HubSpot. Choose between manual insertion for quick testing or API automation for production workflows. Both approaches work—start simple, then scale.
Path A: Manual Upload
In HubSpot, create a Custom HTML email or custom module. Paste the Stripo HTML as the body content, preserving HubSpot's tracking pixels and unsubscribe components that wrap your content.
Path B: API Automation
Program the complete flow: Generate with Stripo → Extract HTML → Create HubSpot marketing email via API → Send or schedule. This is the production-grade approach for recurring newsletters.
Manual HubSpot Integration
The manual approach is ideal for your first few runs while learning the integration. It's also useful for one-off campaigns or when your email content changes infrequently. This method gives you complete visual control and lets you preview exactly how HubSpot will render your Stripo design.
01
Create Custom HTML Email
Navigate to Marketing → Email in HubSpot. Click Create email and select the Custom HTML option. This gives you a blank canvas for your Stripo-generated code.
02
Paste Stripo HTML
Copy your retrieved HTML from Stripo and paste it into HubSpot's HTML editor. Review the preview to ensure all images and styles rendered correctly across different email clients.
03
Add HubSpot Components
Keep HubSpot's tracking pixels and unsubscribe links intact. These are legal requirements and provide valuable analytics. HubSpot usually preserves them automatically when using Custom HTML.
04
Test and Send
Use HubSpot's built-in testing tools to send preview emails. Check rendering in multiple clients, then schedule or send to your contact list.
API Automation Flow
Automating the entire pipeline eliminates manual steps and enables scheduled, recurring newsletters. This workflow typically runs on a cron job or scheduled function, fetching fresh Gamma content, generating the email with Stripo, and pushing to HubSpot without human intervention.
1
Fetch Gamma Content
Query your Gamma data source or API endpoint to retrieve the latest documents, articles, or updates you want to feature in the newsletter.
2
Generate with Stripo
Call Stripo's generation API with your fresh Gamma data mapped to the canonical JSON format. Wait for the generation to complete successfully.
3
Retrieve HTML
Fetch the compiled HTML and CSS from Stripo using the email ID from the generation response. Store this HTML for the next step.
4
Create HubSpot Email
Use HubSpot's Marketing Email API to create a new email object with your Stripo HTML as the body content. Set all required metadata fields.
5
Schedule or Send
Either send immediately to your contact list or schedule for optimal delivery time. Monitor the campaign through HubSpot's analytics dashboard.
HubSpot Marketing Email API
HubSpot's Marketing Email API provides programmatic control over email creation, scheduling, and sending. The key endpoint accepts your Stripo HTML along with campaign metadata, recipient lists, and send settings. Always reference HubSpot's latest API specification for current field names and authentication requirements.
Authentication
HubSpot requires API key or OAuth token authentication. Include your credentials in the Authorization header for every request. Never expose these credentials in client-side code or version control.
Consider using OAuth for user-specific integrations or private app access tokens for server-to-server communication. Both methods provide secure, auditable API access.
Required Fields
Your API request must include the email HTML body, subject line, from name and address, recipient list ID, and campaign type. Optional fields control scheduling, A/B testing, and advanced personalization.
The HTML body accepts your complete Stripo-generated markup. HubSpot automatically appends its tracking and unsubscribe components to maintain compliance and analytics.
Step 6: Make Gamma → JSON Repeatable
For zero-maintenance automation, expose your Gamma content as a JSON endpoint that Stripo can fetch directly. This eliminates copy-paste workflows and ensures your newsletters always feature the latest content. A tiny serverless function or API route provides the perfect solution.
Export Gamma Content
Create an endpoint that queries your Gamma workspace and formats the response as the canonical JSON structure Stripo expects. Include all required fields: url, title, excerpt, image, tag, and read_time for each item.
Switch Data Source Type
In your Stripo API call, change the dataSource type from "RAW" to "LINK". Set the value to your endpoint URL: https://your.api/newsletter.json. Stripo now fetches fresh data on every generation.
Add Caching Layer
Consider implementing response caching if your Gamma content doesn't change frequently. A 15-minute cache reduces API calls while keeping content reasonably fresh for most newsletter workflows.
JSON Endpoint Implementation
Building a production-ready JSON endpoint requires careful consideration of error handling, response formatting, and performance. This example shows a minimal but robust Node.js implementation suitable for deployment to Vercel, Netlify Functions, or AWS Lambda.
// Example serverless function
export default async function handler(req, res) {
try {
// Fetch from your Gamma API or database
const gammaItems = await fetchLatestGammaContent();
// Transform to Stripo canonical format
const stripoData = [
{ "id": "structure_with_title_and_cta" },
{
"id": "structure_empty_3_containers",
"content": gammaItems.map(item => ({
"id": "blog_teaser",
"values": {
"url": item.url,
"title": item.title,
"excerpt": item.summary,
"image": item.thumbnail,
"tag": item.category,
"read_time": item.readTime
}
}))
}
];
// Return with proper caching headers
res.setHeader('Cache-Control', 's-maxage=900');
res.status(200).json(stripoData);
} catch (error) {
res.status(500).json({ error: 'Failed to fetch content' });
}
}Step 7: Deliverability Quick Checks
Technical excellence means nothing if your emails land in spam folders. Email deliverability requires attention to authentication, content quality, and recipient engagement signals. These quick checks ensure your Stripo + HubSpot emails reach inboxes consistently.
Authenticate Your Domain
Configure SPF, DKIM, and DMARC records for your sending domain. HubSpot provides detailed instructions for domain authentication. These DNS records prove your emails are legitimate and significantly improve inbox placement.
Keep HTML Lean
Stripo generates clean, optimized HTML, but always review the final output. Remove unnecessary inline styles, excessive div nesting, or bloated image references. Lighter emails load faster and avoid spam filters.
Include Plain Text Version
Always send a multipart email with both HTML and plain text versions. Some recipients prefer plain text, and many spam filters flag HTML-only emails as suspicious. HubSpot can auto-generate plain text from your HTML.
Clear Unsubscribe Link
Make your unsubscribe process obvious and one-click easy. This is legally required under CAN-SPAM and GDPR, and it builds trust with recipients. HubSpot automatically includes proper unsubscribe functionality.
Troubleshooting Common Issues
Even with careful implementation, integration challenges arise. Here are the most common issues developers encounter when wiring Stripo, HubSpot, and Gamma together, along with proven solutions that get you back on track quickly.
Authentication Failures
Double-check your JWT token from Stripo and HubSpot API credentials. Tokens expire, so refresh them if you're getting 401 errors. Verify the header name is exactly "Stripo-Api-Auth" with correct capitalization.
Module ID Mismatches
Ensure your JSON references match the exact module IDs in your Stripo library. IDs are case-sensitive and must use the snake_case format. A single typo causes generation failures with cryptic error messages.
Missing Images
Verify all image URLs are publicly accessible and use HTTPS. Email clients won't load images from localhost or private networks. Test URLs in an incognito browser window to confirm public access.
Rendering Issues
Some email clients display HTML differently than browsers. Always test in multiple clients using HubSpot's preview tools or Litmus. Common culprits include unsupported CSS properties and complex flexbox layouts.
Your Next Steps
You now have the complete blueprint for integrating Stripo, HubSpot, and Gamma into a powerful, automated email system. Start with the manual approach to understand each component, then progressively automate as your confidence grows. The investment in this workflow pays dividends through consistent, professional newsletters that require minimal ongoing effort.
3
APIs Integrated
Stripo, HubSpot, and Gamma working in harmony
75%
Time Savings
Compared to manual email production workflows
100%
Automation Potential
From content to inbox with zero manual intervention
Remember: this integration is a foundation, not a ceiling. As you become comfortable with the basic flow, explore advanced features like A/B testing, dynamic personalization, and sophisticated analytics. The modular architecture you've built makes these enhancements straightforward additions rather than ground-up rewrites.