search
Getting startedCommunityAppfarm Create

Add custom email templates

Email templates are used within the Send Email action node and when customizing the default authentication emails. We have provided some example templates that leverage best practices to help you quickly start sending customized emails.

The templates are written using MJMLarrow-up-right. MJML is a markup language and framework for easily generating responsive emails that render on most email clients. When working with MJML you need to copy the HTML generated by MJML into Appfarm Create, and not the MJML code itself.

Plain text versions of each email must also be included as a fallback option.

Email deliverability is an expansive topic that won't be explored here, but you should be familiar with some of the key principles before you begin creating your own templates or heavily modifying the examples.

hashtag
Authentication

It is possible to customize the default authentication emails that are sent to users by Appfarm when they initiate a login request. The examples below are based on the default emails sent by Appfarm. These make a great starting point for customization, particularly if you simply wish to modify the text.

The parameters surrounded by {{double braces}} will be automatically populated by Appfarm when an email is sent.

Text surrounded by [[square brackets]] should be edited to suit your solution.

hashtag
Welcome

The welcome email can be sent when a user is added to a solution via the Create User Account action.

Open template on mjml.io to edit and view HTMLarrow-up-right.

MJML
<mjml lang="en">
  <mj-head>
    <mj-title>Welcome to [[SOLUTION NAME]]</mj-title>
    <mj-preview>Sign in to your new account.</mj-preview>
    <mj-attributes>
      <mj-all font-family="-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Cantarell,Fira Sans,Helvetica Neue,sans-serif" font-size="16px" line-height="1.5" color="#111827" />
    </mj-attributes>
    <mj-style>
      .button:hover a { background-color: #286db0 !important; }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text>Hi {{firstName}},</mj-text>
        <mj-text>You have been added as a user for <strong>[[SOLUTION NAME]]</strong>.
</mj-text>
        <mj-text>Click the button below to sign in.</mj-text>
        <mj-button css-class="button" background-color="#3a99f7" color="#ffffff" font-weight="600" align="left" border-radius="6px" href="{{loginLink}}">
          Sign in to [[SOLUTION NAME]]
        </mj-button>
        <mj-text>Or, copy and paste this link into your browser:<br />
          {{loginLink}}</mj-text>
        <mj-text color="#999999">This email was sent by <a href="https://appfarm.io" target="_blank" style="color: #999999;">Appfarm</a> on behalf of [[SOLUTION NAME]]. If you did not request this email, please reply and let us know.</mj-text>
      </mj-column>
    </mj-section>
    <mj-section padding-bottom="20px" padding-top="10px" background-color="#f6f6f6">
      <mj-column>
        <mj-image width="100px" src="[[SOLUTION/COMPANY LOGO]]" />
        <mj-text align="center" color="#999999" font-size="12px" line-height="1.33">[[COMPANY NAME]]<br />
          [[STREET ADDRESS]]<br />
          [[POSTCODE]] [[CITY]]<br />
          [[COUNTRY]]</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

hashtag
Login link

The login link email is sent when a user requests a login link to log in to an app.

Open template on mjml.io to edit and view HTMLarrow-up-right.

hashtag
Access code (one-time password)

The access code (one-time password) email is sent when a user requests an access code to log in to an app.

Open template on mjml.io to edit and view HTMLarrow-up-right.

hashtag
Set password

The set password email is sent when a user requests to set or reset their password.

Open template on mjml.io to edit and view HTMLarrow-up-right.

hashtag
Order confirmation

This generic order confirmation is an example of an email that can be customized for use in the Send Email action node.

Note: This is just a design template. If you wish to iterate over an object when the email is sent, for example to display multiple order lines, you will need to edit the generated HTML accordingly.

Open template on mjml.io to edit and view HTMLarrow-up-right.

PreviousChange the active themeNextEnhance your app

Last updated

Was this helpful?