Product Release Email
This is a variation of a product release email template we use at Dittofeed. Adapt the design, copy, and links to suit your company’s newsletter needs, then send it off with a Dittofeed broadcast!Code.
Code.
product-release.mjml
<mjml>
<mj-head>
<mj-attributes>
<mj-all font-family="Arial, sans-serif" />
<mj-text font-size="14px" color="#0f172a" line-height="1.5" align="left" />
<mj-divider border-color="#F57430" border-width="0.75px" width="100%" />
<mj-button font-size="14px" align="center" />
<mj-section padding="6px" />
</mj-attributes>
<mj-style inline="inline">
/* Headings */
.heading-alt {
color: #3B302D;
font-size: 21px;
font-weight: 500;
line-height: 1.25;
}
.section-heading {
color: #0f172a;
font-size: 18px;
line-height: 1.25;
font-weight: bold;
}
/* Dividers */
.divider-intro { border-color: #F57430; }
.divider-light { border-color: #F57430; }
/* Buttons */
.button-primary {
color: #334155;
font-weight: 700;
padding: 10px;
}
/* Footer text */
.footer-text {
font-size: 10px;
line-height: 1.25;
text-align: center;
}
/* Link styles */
.footer-link {
color: #939393;
text-decoration: underline;
}
.cta-link {
color: #939393;
font-weight: 700;
text-align: center;
text-decoration: none;
}
</mj-style>
</mj-head>
<mj-body>
<mj-wrapper padding="10px">
<!-- Intro Section -->
<mj-section padding-top="20px">
<mj-column>
<mj-text>
Hi everyone! Chandler from Dittofeed here. We have some great updates to share with you from this week's product release.
</mj-text>
<mj-divider css-class="divider-intro" padding-top="30px" />
<mj-text>
<p class="heading-alt">Release v0.21.0 - User Grouping & Improved Deliveries Table</p>
</mj-text>
<mj-divider css-class="divider-intro" />
</mj-column>
</mj-section>
<!-- User Grouping Section -->
<mj-section>
<mj-column>
<mj-text>
<p class="section-heading">New - User Grouping</p>
</mj-text>
<mj-text>
We have many users in health and education that need the ability to dynamically assign their customers to groups. For instance, family members of a patient or student need to be assigned to a group for that patient or student.
<p>Unlike segments which are predefined, groups allow you to dynamically assign users to a group by submitting a Group event using our Group endpoint. Example:
</mj-text>
<mj-text padding="0 25px">
<div style="background-color: #1F1E1D; border-radius: 7px; padding: 10px;">
<p style="font-family: monospace; color: #FFFFFF; margin: 10px; font-size: 14px; line-height: 1.4;">
POST /api/public/apps/group<br>
{<br>
"userId": "user-123",<br>
"groupId": "group-456"<br>
}
</p>
</div>
</mj-text>
<mj-button padding-top="24px" css-class="button-secondary" href="https://docs.dittofeed.com/resources/groups#groups">
Read the docs
</mj-button>
<mj-divider padding-top="40px" css-class="divider-light" />
</mj-column>
</mj-section>
<!-- Deliveries Table Section -->
<mj-section>
<mj-column>
<mj-text>
<p class="section-heading">New - Deliveries Table</p>
</mj-text>
<mj-text>
We've fully upgraded the deliveries interface, making it easier for you to navigate and analyze your delivery records.
<p>Additionally, you can now filter your delivery data by date to focus on specific timeframes.
</mj-text>
<mj-image padding-bottom="12px" src="https://storage.googleapis.com/dittofeed-public/deliveries-table.png" border-radius="5px" alt="Deliveries Table UI"></mj-image>
<mj-button css-class="button-primary" href="https://app.dittofeed.com/dashboard">
Try it out!
</mj-button>
<mj-divider padding-top="40px" css-class="divider-light" />
</mj-column>
</mj-section>
<!-- Improvements Section -->
<mj-section>
<mj-column>
<mj-text padding-top="10px">
<p class="section-heading">Improved - Backend & Performance Optimizations</p>
</mj-text>
<mj-text>
1 - Direct ClickHouse Read/Write for Assignments:
<p>Computed properties are now read directly from ClickHouse instead of being replicated to and read from Postgres. This accelerates your compute property intervals and broadcast deliveries by up to several minutes.
</mj-text>
<mj-text>
2 - Optimized Multi-Tenant Compute Properties:
<p>This change significantly reduces the cost and latency associated with compute property intervals when running Dittofeed in multi-tenant mode.
</mj-text>
<mj-text>
3 - Replaced Prisma with Drizzle:
<p>We’ve switched our ORM from Prisma to Drizzle, which improves overall performance and reduces memory footprint.
</mj-text>
<mj-text>
Beyond these improvements, we've added and fixed many smaller features, including adding an image block to our low-code email editor! To read more, check out the full release post.
</mj-text>
<mj-button css-class="button-secondary" href="https://www.dittofeed.com/post/release-v0-21-0">
Full release
</mj-button>
<mj-divider padding-top="40px" padding-bottom="30px" css-class="divider-light" />
<mj-button background-color="#D9D9D9" color="#1F1E1D" font-weight="600" border="1px solid #F57430" border-radius="3px" inner-padding="10px 20px" href="https://app.dittofeed.com/dashboard">
Try updates in Dittofeed Cloud ☁️ →
</mj-button>
<mj-divider padding-top="30px" padding-bottom="30px" css-class="divider-light" />
</mj-column>
</mj-section>
<!-- General Info Section -->
<mj-section padding="20px">
<mj-column>
<mj-image src="https://storage.googleapis.com/dittofeed-public/dittofeed-circle-graphic-logo.png" width="60px" alt="Dittofeed Graphic"></mj-image>
<mj-text align="center">
Dittofeed's release newsletter is great way to track the work we're doing developing the world's most flexible open-source messaging automation platform. The Dittofeed community would love to hear your thoughts!
</mj-text>
<mj-button background-color="#ffffff" color="#1F1E1D" font-weight="600" inner-padding="10px 20px" href="https://discord.gg/HajPkCG4Mm">
Join us on Discord →
</mj-button>
</mj-column>
</mj-section>
<!-- Footer Section -->
<mj-section padding-bottom="10px">
<mj-column>
<mj-text align="center" padding-top="20px">
<p class="footer-text">We send this newsletter once a month. To no longer receive these emails, <a class="footer-link" href="{% unsubscribe_url %}">unsubscribe</a> or <a class="footer-link" href="mailto:[email protected]">contact us</a>. Idea Market Inc., 2261 Market Street STE 5651 San Francisco, CA 94114.</p>
</mj-text>
</mj-column>
</mj-section>
</mj-wrapper>
</mj-body>
</mjml>
Styled Onboarding Email
Use this template for a more styled approach to onboarding. Great onboarding emails give recipients straightforward instructions. To improve overall usage metrics for your app, focus these emails on a specific feature that your target user segment hasn’t interacted with frequently (or at all).Code.
Code.
styled-onboarding.mjml
<mjml>
<mj-head>
<mj-style>
.header-link {
color: #334155;
text-decoration: none;
font-weight: bold;
}
@media only screen and (max-width: 480px) {
.small-header-link {
font-size: 10px;
}
}
</mj-style>
<mj-attributes>
<mj-all font-family="Arial, sans-serif"/>
<mj-text font-size="12px" line-height="1.5"/>
<mj-section padding="20px"/>
</mj-attributes>
</mj-head>
<mj-body background-color="#ffffff">
<!-- Header Section -->
<mj-section background-color="#ffffff">
<mj-group>
<mj-column width="50%">
<mj-image src="https://i.imgur.com/0jplLWS.png?1" alt="dittofeed logo" align="left" width="100px" css-class="logo-image"></mj-image>
</mj-column>
<mj-column width="50%">
<mj-text align="right">
<a href="#" class="header-link small-header-link">Log in to app →</a>
</mj-text>
</mj-column>
</mj-group>
</mj-section>
<!-- Main Section -->
<mj-section border-radius="10px" background-color="#f1f5f9">
<mj-column>
<mj-text align="left" font-size="30px" font-weight="bold" color="#333333" font-family="Arial, sans-serif" line-height="1.25">
Get started segmenting customers!
</mj-text>
<mj-text align="left" color="#555555" font-family="Arial, sans-serif" line-height="1.5">
Segmenting users with Dittofeed is simple. Select traits from your CDP or database, then copy the trait names into a new Dittofeed segment.
</mj-text>
<mj-button background-color="#49BBD4" color="white" align="left" font-family="Arial, sans-serif" href="#">
Create your first segment
</mj-button>
</mj-column>
</mj-section>
<!-- Steps Section -->
<mj-section background-color="#ffffff">
<mj-column>
<mj-text align="left" font-size="20px" font-weight="bold" color="#334155" font-family="Arial, sans-serif" line-height="1.25">
1️⃣ Connect customer data
</mj-text>
<mj-text align="left" css-class="steps-text" font-family="Arial, sans-serif" line-height="1.5">
Integrate Segment/Rudderstack CDP or submit events directly via the Dittofeed API.
</mj-text>
<mj-text align="left" padding-bottom="24px" css-class="header-link">
<a href="#" class="header-link">Integration docs →</a>
</mj-text>
<mj-text align="left" font-size="20px" font-weight="bold" color="#334155" font-family="Arial, sans-serif" line-height="1.25">
2️⃣ Create a new customer segment
</mj-text>
<mj-text align="left" css-class="steps-text" font-family="Arial, sans-serif" line-height="1.5">
From Dittofeed's segmentation page, create a segment with event names from your event logs.
</mj-text>
<mj-text align="left" padding-bottom="24px" css-class="header-link">
<a href="#" class="header-link">Segment node docs →</a>
</mj-text>
<mj-text align="left" font-size="20px" font-weight="bold" color="#334155" font-family="Arial, sans-serif" line-height="1.25">
3️⃣ Use segments in customer journeys
</mj-text>
<mj-text align="left" css-class="steps-text" font-family="Arial, sans-serif" line-height="1.5">
Load your segments into a new journey node to configure which customers receive messages.
</mj-text>
<mj-text align="left" padding-bottom="18px" css-class="header-link">
<a href="#" class="header-link">Journey docs →</a>
</mj-text>
</mj-column>
</mj-section>
<!-- Footer Section -->
<mj-section border-radius="10px" background-color="#f1f5f9">
<mj-column>
<mj-text align="left" css-class="footer-text" font-family="Arial, sans-serif" line-height="1.5">
For help setting up segments <a href="#">contact support</a>, or <a href="#"> watch our video tutorial</a> on using Dittofeed segmentation.
</mj-text>
<mj-text align="left" css-class="footer-text" font-family="Arial, sans-serif" line-height="1.5">
Alternatively, you can <a href="#">join our Slack community</a> and post to the "help-and-questions" channel.
</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>
Newsletter/Product Update
Regularly informing your users about what’s going on at your company with email newsletters and product updates is an important and simple way to keep them engaged. This template is used at Dittofeed for our product release update emails. Adapt the design, copy, and links to suit your company’s newsletter needs, then send it off with a Dittofeed broadcast!Code.
Code.
newsletter.mjml
<mjml>
<mj-body background-color="#FFFFFF">
<mj-section background-color="#f8fafc" padding-left="20px" padding-right="20px">
<mj-column>
<!-- Logo Section -->
<mj-section padding-bottom="0px" padding-top="30px">
<mj-column>
<mj-image src="https://i.imgur.com/0jplLWS.png?1" alt="Dittofeed Logo" width="300px"></mj-image>
<mj-divider border-color="#94a3b8" padding-top="30px" border-width=".5px" width="100%" />
<mj-text font-family="Arial" color="#64748b" font-size="21px" font-weight="500" line-height="1.25" align="left">Release v0.6.0 - Reverse ETL, Broadcasts UI, & Email Testing</mj-text>
<mj-divider border-color="#94a3b8" border-width=".5px" width="100%" />
</mj-column>
</mj-section>
<!-- Reverse ETL Section -->
<mj-section padding-top="0px" padding-bottom="0px">
<mj-column>
<mj-text color="#0f172a" padding-top="40px" padding-bottom="0px" font-family="Arial" font-size="18px" line-height="1.25" align="left">Reverse ETL via Polytomic</mj-text>
<mj-divider border-color="#cbd5e1" border-width=".5px" width="100%" />
<mj-text color="#0f172a" line-height="1.5" font-family="Arial" font-size="14px" align="left">Dittofeed now offers a reverse ETL integration with the help of Polytomic. Polytomic is a data platform which supports both ETL and reverse ETL. Reverse ETL is useful for allowing growth teams to track new events without blocking on the product engineering team.</mj-text>
<mj-button background-color="#f1f5f9" color="#334155" font-family="Arial" font-size="14px" font-weight="700" align="center" href="https://docs.dittofeed.com/integrations/sources/polytomic">Read the docs</mj-button>
<mj-image src="https://i.imgur.com/aU84tjC.jpg" border-radius="5px" alt="User Survey Image"></mj-image>
</mj-column>
</mj-section>
<!-- Broadcasts UI Section -->
<mj-section padding-top="20px" padding-bottom="0px">
<mj-column>
<mj-text color="#0f172a" padding-top="30px" padding-bottom="0px" font-family="Arial" font-size="18px" line-height="1.25" align="left">Broadcast UI Overhaul</mj-text>
<mj-divider border-color="#cbd5e1" border-width=".5px" width="100%" />
<mj-text color="#0f172a" line-height="1.5" font-family="Arial" font-size="14px" align="left">Our “broadcasts” feature has gotten a full UI overhaul to improve the ease of sending one-off messages like newsletters and product updates. It's what we're using to send these updates to you right now!</mj-text>
<mj-button background-color="#f1f5f9" color="#334155" font-family="Arial" font-size="14px" font-weight="700" align="center" href="https://docs.dittofeed.com/resources/broadcasts">Try it out!</mj-button>
<mj-image src="https://i.imgur.com/Q7Xrr6H.png" border-radius="5px" alt="Broadcast User Interface"></mj-image>
</mj-column>
</mj-section>
<!-- Test Email Section -->
<mj-section padding-top="20px" padding-bottom="0px">
<mj-column>
<mj-text color="#0f172a" padding-top="30px" padding-bottom="0px" font-family="Arial" font-size="18px" line-height="1.25" align="left">Email Testing</mj-text>
<mj-divider border-color="#cbd5e1" border-width=".5px" width="100%" />
<mj-text color="#0f172a" line-height="1.5" font-family="Arial" font-size="14px" align="left">You can now send test messages to yourself to ensure proper rendering in different email clients, validate ESP credentials, and more.</mj-text>
<mj-button background-color="#f1f5f9" color="#334155" font-family="Arial" font-size="14px" font-weight="700" align="center" href="https://app.dittofeed.com/dashboard">Start sending</mj-button>
<mj-image src="https://i.imgur.com/wibh1iY.png" border-radius="5px" alt="Email Testing"></mj-image>
</mj-column>
</mj-section>
<!-- General Info Section -->
<mj-section padding-top="30px" padding-bottom="0px">
<mj-column>
<mj-divider border-color="#cbd5e1" border-width=".5px" padding-bottom="30px" width="100%" />
<mj-image src="https://i.imgur.com/0W3RTdr.png" width="60px" alt="Dittofeed Graphic"></mj-image>
<mj-text color="#0f172a" line-height="1.5" font-family="Arial" font-size="14px" align="center">Our release newsletter is great way to track the work we're doing developing the first open source customer engagement platform. The Dittofeed community would love to hear your thoughts! </mj-text>
<mj-button background-color="#f8fafc" font-family="Arial" font-weight="600" color="#334155" align="center" padding-bottom="6px" font-size="14px" href="https://join.slack.com/t/dittofeed-community/shared_invite/zt-1u3lyts83-P6npff1AbjniNRLVlrlM5A">Join our Slack community →</mj-button>
</mj-column>
</mj-section>
<!-- Footer Section -->
<mj-section padding-top="10px" padding-bottom="10px">
<mj-column>
<mj-divider border-color="#cbd5e1" border-width=".5px" padding-bottom="30px" width="100%" />
<mj-text color="#0f172a" font-family="Arial" font-size="14px" line-height="1.5" align="center" >Check out the full release blog post for more details.</mj-text>
<mj-button font-family="Arial" href="https://dittofeed.com/blog/release-0-6-0" background-color="#f8fafc" color="#334155" font-weight="600" padding-bottom="6px" font-size="14px">Full release →</mj-button>
<mj-divider border-color="#cbd5e1" border-width=".5px" width="100%" />
<mj-text color="#0f172a" font-family="Arial" font-size="12px" line-height="1.25" align="left" padding-top="20px">We send this newsletter twice a month. If you would not like to receive these emails, unsubscribe {% unsubscribe_link here %} or <a href="mailto:[email protected]" >contact us</a>. Idea Market Inc., 2261 Market Street STE 5651
San Francisco, CA 94114.</mj-text>
</mj-column>
</mj-section>
</mj-column>
</mj-section>
</mj-column>
</mj-section>
</mj-body>
</mjml>
Plain Text Welcome
Most applications want to send a welcome email to new users. This email represents a great opportunity to assist users in onboarding, and to link them to relevant documentation. Many teams find it advantageous to send a plain text welcome email, as it feels more personal and less like a marketing email. With the exception of the footer containing the company address, and the unsubscribe link, this email is entirely unstyled.Code.
Code.
welcome.mjml
<mjml>
<mj-head>
<mj-style inline="inline">
.df-unsubscribe {
color: #a8a8a8;
text-decoration: underline;
}
</mj-style>
</mj-head>
<mj-body>
<mj-section>
<mj-column>
<mj-text font-size="16px" align="left">
Hi {{ user.firstName | default: "there"}}<br/><br/>
A warm welcome to CompanyName! During this 14-day trial, you have the opportunity to use our product to make a difference in your day-to-day. We'll be providing you with a VIP tour of how to make the most of CompanyName.<br/><br/>
To get started, we'll integrate your data into the platform.<br/><br/>
Take a look at our <a href="#" target="_blank">docs</a> for more info.
</mj-text>
</mj-column>
</mj-section>
<mj-section padding-top="10px">
<mj-column>
<mj-text font-size="12px" align="center" color="#a8a8a8">
MyCompany, Inc., 40 Rosewood Lane, New York, NY 10003<br/>
Don't want to receive these emails? You can {% unsubscribe_link %} from them here.<br/>
Powered by Dittofeed.
</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>
Abandoned Cart
Abandoned cart emails are a powerful tool for e-commerce businesses. They are sent to customers who have added products to their cart but did not complete the purchase. These emails serve as a reminder to customers about their unfinished transactions and often include a call to action to encourage them to complete their purchase. They can significantly help in recovering lost sales and improving conversion rates.Code.
Code.
cart_abandon_template.mjml
<mjml>
<mj-body>
<!-- Company Header -->
<mj-section
padding-bottom="0px"
background-color="#C488C6"
border-radius="10px 10px 0px 0px"
>
<mj-column>
<mj-image
width="150px"
padding-bottom="30px"
src="https://i.imgur.com/Noig4WH.png"
></mj-image>
<mj-divider border-width="0.75px" border-color="#915480"></mj-divider>
</mj-column>
</mj-section>
<!-- Slogan -->
<mj-section padding-bottom="0px" background-color="#C488C6">
<mj-column>
<mj-text
align="center"
color="#fefffe"
font-size="32px"
font-family="Helvetica Neue"
padding-bottom="30px"
>Oops! You left something...</mj-text
>
<mj-divider border-width="0.75px" border-color="#915480"></mj-divider>
</mj-column>
</mj-section>
<!-- Body Text -->
<mj-section padding-top="10px" background-color="#C488C6">
<mj-column width="450px">
<mj-text
align="center"
color="#fefffe"
font-size="18px"
line-height="1.5"
font-family="Helvetica Neue"
>There are some beautiful, colorful boards waiting to be part of your
kitchen! Visit your cart to take them home ⬇️</mj-text
>
</mj-column>
</mj-section>
<!-- Button -->
<mj-section padding-top="0px" background-color="#C488C6">
<mj-column>
<mj-button
border-radius="7px 7px 7px 7px"
height="50"
width="170px"
padding-top="20px"
padding-bottom="30px"
color="7533E0"
font-size="16px"
background-color="#F6B4B4"
href="#"
>Checkout</mj-button
>
<mj-divider
border-width="0.75px"
border-color="#915480"
padding-bottom="0px"
></mj-divider>
</mj-column>
</mj-section>
<!-- Footer Socials -->
<mj-section
align="center"
padding-top="0px"
border-radius="0px 0px 10px 10px"
background-color="#C488C6"
>
<mj-column></mj-column>
<mj-column>
<mj-table align="center">
<tr>
<td align="center" style="padding: 7px">
<a href="#">
<img
href="#"
src="https://uploads-ssl.webflow.com/63a478b78ec7275316525948/648a3e29a5c6b5c9b398ab1b_twitter.png"
width="20"
height="20"
/>
</a>
</td>
<td align="center" style="padding: 7px">
<a href="#">
<img
href="#"
src="https://uploads-ssl.webflow.com/63a478b78ec7275316525948/648a3e1da5c6b5c9b3989d82_linkedin.png"
width="18"
height="20"
/>
</a>
</td>
<td align="center" style="padding: 7px">
<a href="#">
<img
href="#"
src="https://uploads-ssl.webflow.com/63a478b78ec7275316525948/648a3e2938775d5c03b44c6b_youtube.png"
width="21"
height="20"
/>
</a>
</td>
<td align="center" style="padding: 7px">
<a href="#">
<img
src="https://uploads-ssl.webflow.com/63a478b78ec7275316525948/648a3e29ba92fc87d1be7b66_slack.png"
width="19"
height="19"
/>
</a>
</td>
</tr>
</mj-table>
</mj-column>
<mj-column></mj-column>
</mj-section>
</mj-body>
</mjml>
New Product Release
New product release emails are a great way to announce new products to your customers, especially if they’re targetted based on the their previous purchasing behavior. They can be used to build excitement and anticipation for the new product and drive sales.code
code
new_product_announcement.mjml
<mjml>
<mj-body>
<!-- Company Header -->
<mj-section
padding-bottom="0px"
background-color="#C488C6"
border-radius="10px 10px 0px 0px"
>
<mj-column>
<mj-image
width="150px"
padding-bottom="30px"
src="https://i.imgur.com/Noig4WH.png"
></mj-image>
<mj-divider border-width="0.75px" border-color="#915480"></mj-divider>
</mj-column>
</mj-section>
<!-- Slogan -->
<mj-section padding-bottom="0px" background-color="#C488C6">
<mj-column>
<mj-text
align="center"
color="#fefffe"
font-size="18px"
font-family="Helvetica Neue"
>Introducing</mj-text
>
<mj-text
align="center"
color="#78E4FC"
font-size="32px"
font-family="Helvetica Neue"
padding-bottom="30px"
>The Aqua Cheese Board</mj-text
>
<mj-divider border-width="0.75px" border-color="#915480"></mj-divider>
</mj-column>
</mj-section>
<!-- Body Text -->
<mj-section
padding-top="10px"
padding-bottom="10px"
background-color="#C488C6"
>
<mj-column width="450px">
<mj-text
align="center"
color="#fefffe"
font-size="18px"
line-height="1.5"
font-family="Helvetica Neue"
>A colorful new addition to the CCB collection.</mj-text
>
</mj-column>
</mj-section>
<!-- Body Image -->
<mj-section padding-top="0px" background-color="#C488C6">
<mj-column>
<mj-image
width="275px"
border-radius="7px 7px 7px 7px"
src="https://s7d1.scene7.com/is/image/terrain/66713280_040_a?$zoom2$"
></mj-image>
<mj-button
border-radius="7px 7px 7px 7px"
height="50"
width="170px"
padding-top="30px"
padding-bottom="30px"
color="7533E0"
font-size="16px"
background-color="#F6B4B4"
href="#"
>Buy Now!</mj-button
>
<mj-divider
border-width="0.75px"
border-color="#915480"
padding-bottom="0px"
></mj-divider>
</mj-column>
</mj-section>
<!-- Footer Socials -->
<mj-section
align="center"
padding-top="0px"
border-radius="0px 0px 10px 10px"
background-color="#C488C6"
>
<mj-column></mj-column>
<mj-column>
<mj-table align="center">
<tr>
<td align="center" style="padding: 7px">
<a href="#">
<img
href="#"
src="https://uploads-ssl.webflow.com/63a478b78ec7275316525948/648a3e29a5c6b5c9b398ab1b_twitter.png"
width="20"
height="20"
/>
</a>
</td>
<td align="center" style="padding: 7px">
<a href="#">
<img
href="#"
src="https://uploads-ssl.webflow.com/63a478b78ec7275316525948/648a3e1da5c6b5c9b3989d82_linkedin.png"
width="18"
height="20"
/>
</a>
</td>
<td align="center" style="padding: 7px">
<a href="#">
<img
href="#"
src="https://uploads-ssl.webflow.com/63a478b78ec7275316525948/648a3e2938775d5c03b44c6b_youtube.png"
width="21"
height="20"
/>
</a>
</td>
<td align="center" style="padding: 7px">
<a href="#">
<img
src="https://uploads-ssl.webflow.com/63a478b78ec7275316525948/648a3e29ba92fc87d1be7b66_slack.png"
width="19"
height="19"
/>
</a>
</td>
</tr>
</mj-table>
</mj-column>
<mj-column></mj-column>
</mj-section>
</mj-body>
</mjml>
Discount Code Drip
Discount code drip emails are a great way to reward your customers for their loyalty. They can be used to encourage repeat purchases and increase customer lifetime value.Code.
Code.
discount_code_drip_template.mjml
<mjml>
<mj-body>
<!-- Company Header -->
<mj-section
padding-bottom="0px"
background-color="#C488C6"
border-radius="10px 10px 0px 0px"
>
<mj-column>
<mj-image
width="150px"
padding-bottom="30px"
src="https://i.imgur.com/Noig4WH.png"
></mj-image>
<mj-divider border-width="0.75px" border-color="#915480"></mj-divider>
</mj-column>
</mj-section>
<!-- Slogan -->
<mj-section padding-bottom="0px" background-color="#C488C6">
<mj-column>
<mj-text
align="center"
color="#78E4FC"
font-size="32px"
font-family="Helvetica Neue"
padding-bottom="30px"
>30% Discount Code</mj-text
>
<mj-divider border-width="0.75px" border-color="#915480"></mj-divider>
</mj-column>
</mj-section>
<!-- Body Text -->
<mj-section
padding-top="10px"
padding-bottom="10px"
background-color="#C488C6"
>
<mj-column width="450px">
<mj-text
align="center"
color="#fefffe"
font-size="18px"
line-height="1.5"
font-family="Helvetica Neue"
>A discount for a loyal customer! Because you've previously purchased
a cutting board, enjoy 30% off a new Aqua Cheese Board with code:
AQA22
</mj-text>
</mj-column>
</mj-section>
<!-- Body Image -->
<mj-section padding-top="0px" background-color="#C488C6">
<mj-column>
<mj-image
width="275px"
border-radius="7px 7px 7px 7px"
src="https://s7d1.scene7.com/is/image/terrain/66713280_040_a?$zoom2$"
></mj-image>
<mj-button
border-radius="7px 7px 7px 7px"
height="50"
width="170px"
padding-top="30px"
padding-bottom="30px"
color="7533E0"
font-size="16px"
background-color="#F6B4B4"
href="#"
>Buy Now!</mj-button
>
<mj-divider
border-width="0.75px"
border-color="#915480"
padding-bottom="0px"
></mj-divider>
</mj-column>
</mj-section>
<!-- Footer Socials -->
<mj-section
align="center"
padding-top="0px"
border-radius="0px 0px 10px 10px"
background-color="#C488C6"
>
<mj-column></mj-column>
<mj-column>
<mj-table align="center">
<tr>
<td align="center" style="padding: 7px">
<a href="#">
<img
href="#"
src="https://uploads-ssl.webflow.com/63a478b78ec7275316525948/648a3e29a5c6b5c9b398ab1b_twitter.png"
width="20"
height="20"
/>
</a>
</td>
<td align="center" style="padding: 7px">
<a href="#">
<img
href="#"
src="https://uploads-ssl.webflow.com/63a478b78ec7275316525948/648a3e1da5c6b5c9b3989d82_linkedin.png"
width="18"
height="20"
/>
</a>
</td>
<td align="center" style="padding: 7px">
<a href="#">
<img
href="#"
src="https://uploads-ssl.webflow.com/63a478b78ec7275316525948/648a3e2938775d5c03b44c6b_youtube.png"
width="21"
height="20"
/>
</a>
</td>
<td align="center" style="padding: 7px">
<a href="#">
<img
src="https://uploads-ssl.webflow.com/63a478b78ec7275316525948/648a3e29ba92fc87d1be7b66_slack.png"
width="19"
height="19"
/>
</a>
</td>
</tr>
</mj-table>
</mj-column>
<mj-column></mj-column>
</mj-section>
</mj-body>
</mjml>
Minimal Unstyled Plain Text Email
Use this template structure if you want your emails to appear as natural as possible.plaintext.mjml
<mjml>
<mj-head>
<mj-attributes>
<mj-all font-family="inherit" />
</mj-attributes>
</mj-head>
<mj-body>
<mj-text>
My super plain text email!
</mj-text>
</mj-body>
</mjml>