Design my own tracking email templates

Our simple email editor gives you the opportunity to create an immersive brand experience until delivery and is a powerful marketing tool. Use it to promote a sponsorship offer, a partnership, your brand’s values or anything your creative mind may think of. 

In this article we will cover:

  • How to create a template
  • How to set some basics properties such as a name for the sender, an email and a reply address
  • How to style emails
  • How to add the delivery satisfaction survey in your custom template

First things first

To create your own template:

  • scroll to the bottom
  • click on Add a template.

The  Edit page consists of two windows: the email editor on the left-hand side and the real-time email viewer on the right-hand.

Give your template a name: simply type in the field shown below.

11.png

Name, from & reply to

  • Choose the From email & name, as they will appear in your client's mailbox
  • You can also edit to Reply to fields, which your client will write to when replying to this email

Email editor

Our email editor supports both HTML + Handlebars and MJML + Handlebars. We highly recommend using MJML as it is lighter, it automatically handles responsiveness and has a set of pre-built components.

  • To learn how to use MJML, follow this step-by-step tutorial
  • Nurture your template with Bigblue data using Handlebars placeholders. Data available can be found by clicking on the eye at the top of the screen.

12.png 

For instance, to inject the tracking URL in your template, use the {{ tracking_url }} placeholder.

  • You may also edit and inject data into the email subject using Handlebars placeholders in the field shown below

13.png 

  • Do not forget to save the changes by clicking on the top-right corner button

14.png

  • If your template does not successfully render but you're in a rush, you are able to Save as draft (top-right corner) and come back to your work later. However, your template will not be available for use until finished.

Real-time viewer

Changes in the code are updated in real-time in the viewer next to it.

  • Look at the result on mobile or desktop by clicking on the right icon.

  15.png

  • Mock data is injected to simulate an email sent on your behalf to customers. Pick a status at the top to see what an email looks like for a specific order status.

  16.png

  • You may also change the placeholder data language with hovering over the flag next to Placeholder data

Delete or duplicate

Finally, you can delete or duplicate your template. To do so, hover over the ellipses on the top right-hand corner of the page.

17.png

Adding the buyer delivery satisfaction survey in custom emails

Want to enjoy the survey feature without losing your identity? Here is how to use it simply: just paste the matching code snippet below into the code editor where you want it to appear! 

To check wether you are using MJMl or HTML look the first marker at the top of the template. It is pretty straightforward: if it is <mjml> then you are using MJML and if it is <html>, then you are using HTML!

Case 1: You are using MJML

{{# if (equal status "DELIVERED")}}
          <mj-text mj-class="default" font-weight="600">How was the delivery?</mj-text>
          <mj-table padding-top="0" padding-bottom="24px">
            <tr>
              <td style="width:49%;padding-right: 1%; border-collapse:collapse!important;">
                <a style="display: block; color: #222B45; text-decoration: none;" href="https://prod-buyer-sat.web.app/{{ buyer_sat_submission_id }}?r=1&logo={{ tenant_logo_url }}" target="_blank">
                  <span style="display:inline-block;background-color:#EDF1F7; border-radius: 3px; text-align:center;vertical-align:top;width:100%;height:auto">
                    <div style="background-image:url(<https://cdn.bigblue.co/npsbuyer/thumbub-darkgrey-filled.png>);width:35px;height:60px;margin:4px 8px 0px 8px;display:inline-block;background-size:cover;background-repeat:no-repeat;background-position:center;vertical-align:middle"></div>
                    <span style="display:inline-block;line-height:16px; font-size: 16px; margin-top:10px;padding:5px 0; margin-right: 8px;">Great</span>
                  </span>
                </a>
              </td>
              <td style="width:49%;padding-left: 1%; border-collapse:collapse!important;">
                <a style="display: block; color: #222B45; text-decoration: none;" href="<https://prod-buyer-sat.web.app/>{{ buyer_sat_submission_id }}?r=-1&logo={{ tenant_logo_url }}" target="_blank">
                  <span style="display:inline-block;background-color:#EDF1F7; border-radius: 3px; text-align:center;vertical-align:top;width:100%;height:auto">
                    <div style="background-image:url(<https://cdn.bigblue.co/npsbuyer/thumbdown-darkgrey-filled.png>);width:35px;height:60px;margin:0 8px 4px 8px;display:inline-block;background-size:cover;background-repeat:no-repeat;background-position:center;vertical-align:middle"></div>
                    <span style="display:inline-block;line-height:16px; font-size: 16px; margin-top:10px;padding:5px 0; margin-right: 8px;">Poor</span>
                  </span>
                </a>
              </td>
            </tr>
          </mj-table>
{{/if}}

🎨 If you want the buttons to match your email colors and look, you can style them as you would do for other components following the MJML tutorial given above. If your buttons are nested under an MJML class, you won't have to add anything!

Case 2: You are using HTML (for example you design your emails in Mailchimp)

{{# if (equal status "DELIVERED")}}
                                <table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0; table-layout:fixed" width="100%">
                                  <tbody>
                                    <tr>
                                      <td style="border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0; table-layout:fixed" valign="top">
                                        <table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0; table-layout:fixed" width="100%">
                                          <tbody>
                                            <tr>
                                              <td style='border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0; table-layout:fixed; color:#595959; font-family:"Helvetica Neue", Arial; font-size:14px; letter-spacing:0; line-height:1.3; max-width:100%; text-align:left; word-wrap:break-word; padding-top:18px; padding-bottom:0; padding-left:15px; padding-right:15px' valign="top">
                                                <p style="margin-bottom:0; margin-left:0; margin-right:0; margin-top:10px; padding-bottom:0; padding:0; text-size-adjust:100%; font-family:Helvetica; font-size:16px; line-height:24px; text-align:center">Comment s'est déroulée la livraison ?</p>
                                              </td>
                                            </tr>
                                          </tbody>
                                        </table>
                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                                <table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0; table-layout:fixed; width:100%" width="100%">
                                  <tbody>
                                    <tr>
                                      <td align="center" style="border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0; table-layout:fixed; min-width:60px; padding:9px 18px; padding-top:9; padding-bottom:9; padding-left:18; padding-right:18" valign="top">
                                        <table style="width: 100%; max-width: 400px;">
                                          <tr>
                                            <td style="width:49%;padding-right: 1%; border-collapse:collapse!important;">
                                              <a style="display: block; color: #222B45; text-decoration: none;" href="https://prod-buyer-sat.web.app/{{ buyer_sat_submission_id }}?r=1&logo={{ tenant_logo_url }}" target="_blank">
                                                <span style="display:inline-block;background-color:#EDF1F7; border-radius: 3px; text-align:center;vertical-align:top;width:100%;height:auto">
                                                  <div style="background-image:url(https://cdn.bigblue.co/npsbuyer/thumbub-darkgrey-filled.png);width:35px;height:60px;margin:4px 2px 0px 2px;display:inline-block;background-size:cover;background-repeat:no-repeat;background-position:center;vertical-align:middle"></div>
                                                  <span style='display:inline-block;line-height:16px;font-family:"Helvetica Neue", Arial; font-size: 16px; margin-top:10px;padding:5px 0; margin-right: 8px;'>Excellent</span>
                                                </span>
                                              </a>
                                            </td>
                                            <td style="width:49%;padding-left: 1%; border-collapse:collapse!important;">
                                              <a style="display: block; color: #222B45; text-decoration: none;" href="https://prod-buyer-sat.web.app/{{ buyer_sat_submission_id }}?r=-1&logo={{ tenant_logo_url }}" target="_blank">
                                                <span style="display:inline-block;background-color:#EDF1F7; border-radius: 3px; text-align:center;vertical-align:top;width:100%;height:auto">
                                                  <div style="background-image:url(https://cdn.bigblue.co/npsbuyer/thumbdown-darkgrey-filled.png);width:35px;height:60px;margin:0 2px 4px 2px;display:inline-block;background-size:cover;background-repeat:no-repeat;background-position:center;vertical-align:middle"></div>
                                                  <span style='display:inline-block;line-height:16px; font-family:"Helvetica Neue", Arial; font-size: 16px; margin-top:10px;padding:5px 0; margin-right: 8px;'>Insuffisant</span>
                                                </span>
                                              </a>
                                            </td>
                                          </tr>
                                        </table>
                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                                {{/if}}

🎨 You can style your email exactly as you did for other components!

Please note that a new version  of tracking emails is now available. Check it out here

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us