Free 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.

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>

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.

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://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:[e-mail]" >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>