The Recharge Subscription Started event triggers a Listrak Custom Event when a customer starts a new subscription for a product in Recharge. In the journey, you can email a customer to confirm their subscription, display their billing details, and display the items included in the subscription.
This guide will outline the personalization options to customize the journey and messages triggered by the Recharge integration.
Personalizing the Journey with Custom Event Properties
The Custom Event called Recharge Subscription Started [[Your Store Name]] is automatically created as part of the integration process. Recharge passes the following payload to Listrak customized with the specific product information for the subscription.
{
"eventCategory": "subscription",
"eventType": "SubscriptionStarted",
"eventTimestamp": "2026-04-30T10:00:00.0000000+00:00",
"customer": {
"email": "[email protected]",
"firstName": "Jane",
"lastName": "Smith",
"externalCustomerId": "24662915678374",
"billingCity": "Philadelphia",
"billingProvince": "Pennsylvania"
},
"subscription": {
"id": "784594001",
"status": "active",
"createdAt": "2026-04-30T10:00:00+00:00",
"updatedAt": "2026-04-30T10:00:00+00:00",
"cancelledAt": null,
"cancellationReason": null,
"orderIntervalUnit": "month",
"orderIntervalFrequency": 1,
"nextChargeScheduledAt": "2026-05-30"
},
"product": {
"title": "Classic Cotton T-Shirt",
"price": "18.74",
"quantity": 1,
"productId": "15268877402278",
"variantId": "56305470505126",
"sku": "T100",
"imageUrl": "https://cdn.example.com/tshirt.jpg",
"linkUrl": "https://store.example.com/products/classic-cotton-t-shirt",
"productHandle": "classic-cotton-t-shirt"
}
}
The JSON is saved to a Custom Event field and used to personalize the message. The table below outlines all fields created in Custom Event. Fields other than the JSON can be used as criteria in a Custom Event Decision Split, allowing customers to receive different messages or different logic based on the values of these fields.
Property Name | Data Type |
CustomJson | String |
product_title | String |
customer_billing_city | String |
customer_billing_province | String |
📌 Use the Custom Event Details Split to customize message content, for example additional instructions required when food products are shipped frozen.
Personalizing the Message with Recharge Data
You can customize any message(s) in the journey based on the data passed in the JSON. The table below outlines the fields you can include in a message to display the data about a customer's new subscription. The field values will match what is included in the payload mentioned in the previous section.
Object | Fields Used |
|
|
|
|
|
|
You have the option to create a fully coded HTML email from scratch or to edit the template that includes the basic design elements listed below.
If you code a message yourself, you can add any or all of fields from the table above. To display the personalized data, you will use the format {{object.fieldname}}. For example, to display the customer's first name uses the following tag. {{customer.firstName}}.
Example Template
You can also use the example template as a starting point.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Subscription Confirmation</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet"/>
<style>
body, table, td, p, a, li, blockquote { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; padding: 0; background-color: #f4f5f7; }
table { border-collapse: collapse; }
img { border: 0; display: block; max-width: 100%; }
.email-wrapper { background-color: #f4f5f7; padding: 40px 16px; font-family: 'Inter', Helvetica, Arial, sans-serif; }
.email-container { max-width: 600px; margin: 0 auto; background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.email-header { background-color: #1a2b4a; padding: 28px 40px; text-align: center; }
.email-header .brand { font-size: 22px; font-weight: 700; color: #ffffff; letter-spacing: 0.5px; }
.email-header .brand span { color: #00bfa5; }
.email-hero { background: linear-gradient(135deg, #1a2b4a 0%, #0d3b6e 100%); padding: 40px 40px 48px; text-align: center; }
.email-hero h1 { margin: 0 0 10px; font-size: 28px; font-weight: 700; color: #ffffff; line-height: 1.3; }
.email-hero p { margin: 0; font-size: 15px; color: #a8c0d6; line-height: 1.6; }
.email-body { padding: 36px 40px; }
.greeting { font-size: 16px; color: #1a2b4a; margin: 0 0 24px; line-height: 1.6; }
.greeting strong { color: #0d3b6e; }
.product-card { border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; margin: 0 0 28px; }
.product-card img { width: 100%; height: 220px; object-fit: cover; }
.product-info { padding: 20px 24px; }
.product-info .product-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #00bfa5; margin: 0 0 6px; }
.product-info h2 { margin: 0 0 12px; font-size: 19px; font-weight: 700; color: #1a2b4a; }
.product-meta { display: flex; gap: 20px; }
.product-meta .meta-item { font-size: 13px; color: #64748b; }
.product-meta .meta-item strong { display: block; font-size: 15px; color: #1a2b4a; font-weight: 600; }
.section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #00bfa5; margin: 0 0 14px; }
.detail-table { width: 100%; border-collapse: collapse; margin: 0 0 28px; }
.detail-table td { padding: 11px 14px; font-size: 14px; border-bottom: 1px solid #f1f5f9; }
.detail-table tr:last-child td { border-bottom: none; }
.detail-table .label { color: #64748b; width: 45%; font-weight: 500; }
.detail-table .value { color: #1a2b4a; font-weight: 600; }
.detail-table tr:nth-child(even) { background-color: #f8fafc; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; background-color: #dcfce7; color: #16a34a; text-transform: capitalize; }
.cta-wrap { text-align: center; margin: 8px 0 32px; }
.cta-btn { display: inline-block; background-color: #00bfa5; color: #ffffff; text-decoration: none; font-size: 15px; font-weight: 700; padding: 14px 36px; border-radius: 6px; letter-spacing: 0.3px; }
.email-footer { background-color: #1a2b4a; padding: 28px 40px; text-align: center; }
.email-footer p { margin: 0 0 6px; font-size: 12px; color: #7a92aa; line-height: 1.6; }
.email-footer a { color: #00bfa5; text-decoration: none; }
.email-footer .footer-brand { font-size: 13px; font-weight: 600; color: #ffffff; margin-bottom: 10px; }
.divider { border: none; border-top: 1px solid #e2e8f0; margin: 0 0 24px; }
</style>
</head>
<body>
[[HB BlockType="Custom" Source="Custom.customJson"]]
<div class="email-wrapper">
<div class="email-container">
<div class="email-header"><div class="brand">Your<span>Store</span></div></div>
<div class="email-hero">
<h1>You're officially subscribed! 🎉</h1>
<p>Thanks for joining, {{customer.firstName}}. Your subscription is confirmed and active.</p>
</div>
<div class="email-body">
<p class="greeting">Hi <strong>{{customer.firstName}} {{customer.lastName}}</strong>,<br/><br/>We're excited to have you on board. Below are the details of your new subscription.</p>
<div class="product-card">
<img src="{{product.imageUrl}}" alt="{{product.title}}" />
<div class="product-info">
<p class="product-label">Your Subscription Item</p>
<h2>{{product.title}}</h2>
<div class="product-meta">
<div class="meta-item">Price<strong>${{product.price}}</strong></div>
<div class="meta-item">Quantity<strong>{{product.quantity}}</strong></div>
<div class="meta-item">SKU<strong>{{product.sku}}</strong></div>
</div>
</div>
</div>
<p class="section-label">Subscription Details</p>
<table class="detail-table">
<tr><td class="label">Status</td><td class="value"><span class="badge">{{subscription.status}}</span></td></tr>
<tr><td class="label">Billing Frequency</td><td class="value">Every {{subscription.orderIntervalFrequency}} {{subscription.orderIntervalUnit}}(s)</td></tr>
<tr><td class="label">Next Charge Date</td><td class="value">{{subscription.nextChargeScheduledAt}}</td></tr>
<tr><td class="label">Subscription ID</td><td class="value">{{subscription.id}}</td></tr>
</table>
<hr class="divider"/>
<div class="cta-wrap"><a href="#" class="cta-btn">Manage My Subscription</a></div>
<p style="font-size:13px; color:#64748b; text-align:center; margin:0;">Questions? Contact us at <a href="mailto:[email protected]" style="color:#00bfa5;">[email protected]</a></p>
</div>
<div class="email-footer">
<p class="footer-brand">YourStore</p>
<p>This email was sent to {{customer.email}}</p>
<p>{{customer.billingCity}}, {{customer.billingProvince}}</p>
<p style="margin-top:10px;"><a href="#">Unsubscribe</a> | <a href="#">Manage Subscription</a> | <a href="#">Privacy Policy</a></p>
</div>
</div>
</div>
[[/HB]]
</body>
</html>