Free MJML Email Templates

For a quick way to get started sending messages, copy/paste the code for these templates into any editor that is configured to render MJML, such as the Dittofeed template editor.

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.

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 &amp; 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>
                &nbsp;&nbsp;"userId": "user-123",<br>
                &nbsp;&nbsp;"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 ☁️ &rarr;
</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 &rarr;
          </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.

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>

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.

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 &rarr;</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 &rarr;</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.

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.

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

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.

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>

Getting Started

Deployment

Integrations

Workspace Resources

User Guides

Contributing

Free MJML Email Templates

Product Release Email

Styled Onboarding Email

Plain Text Welcome

Abandoned Cart

New Product Release

Discount Code Drip

Minimal Unstyled Plain Text Email

Getting Started

Deployment

Integrations

Workspace Resources

User Guides

Contributing

​Product Release Email

​Styled Onboarding Email

​Newsletter/Product Update

​Plain Text Welcome

​Abandoned Cart

​New Product Release

​Discount Code Drip

​Minimal Unstyled Plain Text Email

Product Release Email

Styled Onboarding Email

Newsletter/Product Update

Plain Text Welcome

Abandoned Cart

New Product Release

Discount Code Drip

Minimal Unstyled Plain Text Email