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

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.

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

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>

Plain text

Hi {{firstName}},

You have been added as a user for [[SOLUTION NAME]]. Use the following link to sign in.

{{loginLink}}

This email was sent by Appfarm on behalf of [[SOLUTION NAME]]. If you did not request this email, please let us know by replying to this email.

------

[[COMPANY NAME]]
[[STREET ADDRESS]]
[[POSTCODE]] [[CITY]]
[[COUNTRY]]

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

MJML

<mjml lang="en">
  <mj-head>
    <mj-title>Sign in to [[SOLUTION NAME]]</mj-title>
    <mj-preview>Click this link to sign in.</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>Please click the button below to sign in to <strong>[[SOLUTION NAME]]</strong>. The link will expire in 5 minutes.</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>

Plain text

Hi {{firstName}},

Please use the following link to log in to [[SOLUTION NAME]]. The link will expire in 5 minutes.

{{loginLink}}

This email was sent by Appfarm on behalf of [[SOLUTION NAME]]. If you did not request this email, please let us know by replying to this email.

------

[[COMPANY NAME]]
[[STREET ADDRESS]]
[[POSTCODE]] [[CITY]]
[[COUNTRY]]

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

MJML

<mjml lang="en">
  <mj-head>
    <mj-title>Sign in to [[SOLUTION NAME]]</mj-title>
    <mj-preview>Use access code {{oneTimePassword}}.</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-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text>Hi {{firstName}},</mj-text>
        <mj-text>Please use the following access code to sign in to <strong>[[SOLUTION NAME]]</strong>. The access code will expire in 5 minutes.</mj-text>
        <mj-text color="#286db0" font-size="24px" font-weight="700" letter-spacing="2px">
        {{oneTimePassword}}
        </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/COMPANY 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>

Plain text

Hi {{firstName}},

Please use the following access code to log in to [[SOLUTION NAME]]. The access code will expire in 5 minutes.

{{oneTimePassword}}

This email was sent by Appfarm on behalf of [[SOLUTION NAME]]. If you did not request this email, please let us know by replying to this email.

------

[[COMPANY NAME]]
[[STREET ADDRESS]]
[[POSTCODE]] [[CITY]]
[[COUNTRY]]

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

MJML

<mjml lang="en">
  <mj-head>
    <mj-title>Set new password for [[SOLUTION NAME]]}</mj-title>
    <mj-preview>Use this link to set a password.</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>We have received a request to set a new password for your <strong>[[SOLUTION NAME]]</strong> account {{email}}.
</mj-text>
        <mj-text>Please click the button below to set a new password. The link will expire in 15 minutes.</mj-text>
        <mj-button css-class="button" background-color="#3a99f7" color="#ffffff" font-weight="600" align="left" border-radius="6px" href="{{resetLink}}">
          Set password
        </mj-button>
        <mj-text>Or, copy and paste this link into your browser:<br />
          {{resetLink}}</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>

Plain text

Hi {{firstName}},

We have received a request to set a new password for your [[SOLUTION NAME]] account {{email}}.

Please use the following link to set a new password. The link will expire in 15 minutes.

{{resetLink}}

This email was sent by Appfarm on behalf of [[SOLUTION NAME]]. If you did not request this email, please let us know by replying to this email.

------

[[COMPANY NAME]]
[[STREET ADDRESS]]
[[POSTCODE]] [[CITY]]
[[COUNTRY]]

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

MJML

<mjml lang="en">
  <mj-head>
    <mj-title>Order confirmation</mj-title>
    <mj-preview>Your order #${order.orderNumber} is confirmed.</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: #4c1d95 !important; }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-section padding-bottom="0px">
      <mj-column>
        <mj-text>Hi ${firstName},</mj-text>
        <mj-text>Your order is confirmed. Please find a summary of your order below.</mj-text>
        <mj-text align="center" font-size="20px" font-weight="600" padding-top="24px">
          Order #${order.orderNumber}
        </mj-text>
      </mj-column>
    </mj-section>

    <mj-section padding-top="0px" padding-bottom="0px">
      <mj-column>
        <mj-text><span style="font-weight: 600;">${customer.name}</span><br />
          ${customer.street}<br />
          ${customer.postcode} ${customer.city}<br />
          ${customer.country}</mj-text>
      </mj-column>

      <mj-column>
        <mj-text><span style="font-weight: 600;">Order received:</span> ${order.orderDate}<br />
          <span style="font-weight: 600;">Payment type:</span> ${order.paymentType}<br />
          <span style="font-weight: 600;">Terms:</span> ${order.paymentTerms}
        </mj-text>
      </mj-column>
    </mj-section>

    <mj-section>
      <mj-column>
        <mj-table>
          <tr style="border-bottom:1px solid #ecedee;text-align:left;padding:15px 0;">
            <th style="padding: 0 15px 0 0;">Serial #</th>
            <th style="padding: 0 15px;">Quantity</th>
            <th style="padding: 0 15px;">Product</th>
            <th style="padding: 0 0 0 15px;">Price</th>
          </tr>
          <tr>
            <td style="padding: 0 15px 0 0;">${orderLine.serialNumber}</td>
            <td style="padding: 0 15px;">${orderLine.quantity}</td>
            <td style="padding: 0 15px;">${orderLine.productName}</td>
            <td style="padding: 0 0 0 15px;">${orderLine.price}</td>
          </tr>
          <tr>
            <td colspan="3" align="right" style="padding: 20px 0 0 0; font-weight: 600;">Total</td>
            <td style="padding: 20px 0 0 15px;">${total}</td>
          </tr>
        </mj-table>
      </mj-column>
    </mj-section>

    <mj-section padding-top="0px">
      <mj-column>
        <mj-button css-class="button" background-color="#6d28d9" color="#ffffff" font-weight="600" align="center" border-radius="6px" href="https://${hostname}/orders/status?id=${order.randomIdentifier}">
          Check order status
        </mj-button>
      </mj-column>
    </mj-section>

    <mj-section padding-bottom="20px" padding-top="20px" background-color="#f5f3ff">
      <mj-column>
        <mj-image width="100px" src="https://storage.googleapis.com/appfarm-public/618bb78c8c37aa821c22194b/Lh5YR6lEWw" />
        <mj-text align="center" color="#111827" font-size="12px" line-height="1.33">Appfarm AS<br />
          Universitetsgata 2<br />
          0164 Oslo<br />
          Norway</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>