Create Branded Email Templates

Updated on 10 Nov 2023
8 Minutes to read

Print
Share
Dark
Light

Article Summary

Share feedback

Thanks for sharing your feedback!

Create branded email templates using HTML directly in the Bringg Platform so that you can update customers easily during any critical stage of the fulfillment process you choose.

You can customize the content with the languages, variables, and CSS you wish, and decide whether the emails should include links for scheduling, picking up, or tracking orders.

Once you build your templates, you can then set up custom automations to ensure the branded emails reach customers at the necessary stage of the customer journey.

Before You Begin

Confirm you have a Bringg user of type Admin.
Make sure you are coordinated about the timing and content of sending messages.
Determine the HTML layout, timing, and content of each message you wish to send, including the subject of each email.
Customize your customer experience page to brand it with the appropriate look and feel you wish to use in communicating with your customers in Settings > Customer App.
Decide if you want different notification flows for different scenarios. For example, if you deliver both standard and specialty or white glove orders, you need separate order and notification flows for each order type.

Tip

Be careful not to over-communicate with your customers so they remain engaged with you. Select the notifications that are most important to advance your business while preserving customer trust.

Procedure

Step 1: Open the email template creation page by selecting Settings > Merchant Configuration > Email Templates.

Step 2: Begin creating a new email template by selecting Add Template.

Step 3: Set the template type as Customer Email.

Step 4: Name the template.
Choose a name that indicates the specific context for sending this type of email. For example, name a template "Customer Scheduling" for an email that goes to customers enabling them to choose a delivery slot.

Step 5: Choose a customer-facing subject line for the email. For example, for the "Customer Scheduling" template, you can use a subject line like "Schedule Your Delivery!".

Step 6: (Optional) Select the languages aside from English in which the emails will appear.

Note:

Each language you add requires its own HTML content in that language. We recommend saving each time you add a language's content.

Step 7: Customize your email content by pasting your company's email HTML and CSS in the free text field.

Include the applicable colors, fonts, text, and image links.

Select any relevant variables from the variable menu to personalize your emails you wish. For example, you can include the customer's name, delivery address, custom links, and so on.

See example:

TextText

<!doctype html>
<html>
<head>

    <style>

        /* What it does: Remove spaces around the email design added by some email clients. */
        /* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
        html,
        body {
            margin: 0 auto !important;
            padding: 0 !important;
            height: 100% !important;
            width: 100% !important;
        }

        /* What it does: Stops email clients resizing small text. */
        * {
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
        }

        /* What it does: Centers email on Android 4.4 */
        div[style*="margin: 16px 0"] {
            margin:0 !important;
        }

        /* What it does: Stops Outlook from adding extra spacing to tables. */
        table,
        td {
            mso-table-lspace: 0pt !important;
            mso-table-rspace: 0pt !important;
        }

        /* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
        table {
            border-spacing: 0 !important;
            border-collapse: collapse !important;
            table-layout: fixed !important;
            margin: 0 auto !important;
        }
        table table table {
            table-layout: auto;
        }

        /* What it does: Uses a better rendering method when resizing images in IE. */
        img {
            -ms-interpolation-mode:bicubic;
        }

        /* What it does: A work-around for iOS meddling in triggered links. */
        *[x-apple-data-detectors] {
            color: inherit !important;
            text-decoration: none !important;
        }

        /* What it does: A work-around for Gmail meddling in triggered links. */
        .x-gmail-data-detectors,
        .x-gmail-data-detectors *,
        .aBn {
            border-bottom: 0 !important;
            cursor: default !important;
        }

        /* What it does: Prevents Gmail from displaying an download button on large, non-linked images. */
        .a6S {
            display: none !important;
            opacity: 0.01 !important;
        }
        /* If the above doesn't work, add a .g-img class to any image in question. */
        img.g-img + div {
            display:none !important;
        }

        /* What it does: Prevents underlining the button text in Windows 10 */
        .button-link {
            text-decoration: none !important;
        }

        /* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89  */
        /* Create one of these media queries for each additional viewport size you'd like to fix */
        /* Thanks to Eric Lepetit @ericlepetitsf) for help troubleshooting */
        @media only screen and (min-device-width: 375px) and (max-device-width: 413px) { /* iPhone 6 and 6+ */
            .email-container {
                min-width: 375px !important;
            }
        }

        /*tr:last-child {*/
        /*border-bottom: none !important;*/
        /*}*/

    </style>

    <style>

        /* What it does: Hover styles for buttons */
        .button-td,
        .button-a {
            transition: all 100ms ease-in;
        }
        .button-td:hover,
        .button-a:hover {
            background: #555555 !important;
            border-color: #555555 !important;
        }

    </style>

</head>
<body style="margin: 0; mso-line-height-rule: exactly;">

    <div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: 'OpenSans';">
        none
    </div>

    <div style="max-width: 600px; margin: auto;" class="email-container">

        <table style="max-width: 490px;">
            <tr>
                <td style="padding: 20px 0; text-align: center">
                    
                </td>
            </tr>
        </table>

        <table style="max-width: 490px;">

            <tr>
                <td style="border-radius: 4px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);">
                    <table>
                        <tr>
                            <td style="padding: 40px; font-family: 'OpenSans'; font-size: 15px; line-height: 20px; color: #555555;">
                                <div style="text-align: center; color: #222947; font-size: 24px; font-weight: bold; letter-spacing: 0.4px;">
                                    Delay in your order delivery
                                </div>
                                <br /><br />
                                <div style="padding:0 10px;color: #222947; font-size: 16px; line-height: 1.44; letter-spacing: 0.2px; text-align: center;">
                                    Hello dear {{Customer name}},<br />
Your order is a bit late, it is expected to arrive at {{Order's delivery time window}} to {{Delivery address}}
                                </div>

                                <br /><br />
If you need to change your schedule click here: {{Schedule link}}
                                <br /><br />
                                <div style="color: #393f5d; font-size: 12px; line-height: 1.33;">
                                    
                                    If you think this is a mistake or you already received the package please ignore this or please email us at: <a href="mailto:support@acme.com" style="font-weight: bold; text-decoration: none; color: #393f5d; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">support@acme.com</a>
                                </div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>

            <tr>
                <td style="font-size: 0; line-height: 0;">
                     
                </td>
            </tr>

        </table>

        <table style="max-width: 600px;">
            <tr>

                <td style="padding: 0px 10px;width: 100%;font-size: 12px; font-family: 'OpenSans'; line-height:18px; text-align: center; color: #888888;" class="x-gmail-data-detectors">

                    <table style="margin: auto;">
                        <tr>
                            <td style="text-align: center; font-family: 'OpenSans';" class="button-td">
                                <a href style="color:#222947;text-decoration:none;word-break:break-word" target="_blank">
                                    <img src="https://task-images-prod-us1.s3.amazonaws.com/uploads/merchant_configuration/11862/f66f2784ba19b630f878e5c5823c12c5.jpg" width="71" height="71" style="outline:none;text-decoration:none;border:none;width:71px;min-height:71px; margin-right: auto; margin-left: auto; display:block; " />
                                    <div style="margin-top: 12px; font-family: 'OpenSans'; font-size: 14px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: normal; ">RealDeal</div>
                                    <div style="font-size: 12px; letter-spacing: 0.2px; font-family: 'OpenSans'; color: #222947">Same day sneaker delivery</div>
                                </a>
                            </td>
                        </tr>
                    </table>
                    
                    <div style="margin: 32px 0px; color: #9ea4b3; font-size: 12px;">
                        If you have any questions please email us at <a style="text-decoration:underline; color: #9ea4b3;" href="mailto:support@cnn.com">support@acme.com</a> Or reply to this email.
                        <br /><br />
                        You received this email because you are an existing customer. If you do not want to receive any more emails from us, please <a style="text-decoration:underline; color: #9ea4b3;" href="https://cnn.com">unsubscribe</a>.
                        <br /><br />
                        ©2023. RealDeal
                    </div>
                </td>
            </tr>
        </table>

    </div>

</body>
</html>

You can view a preview of how your email will appear with the HTML code using the display next to the free text field.

Variable	What it does…
Merchant	Inserts the name of your company or instance in Bringg.
Links	Inserts the applicable URL based on the specific link you choose. This often includes either a scheduling URL or the link to the Bringg customer page with real-time updates of the order status.
Customer Name	Inserts the customer's full name (first, middle and last name).
Driver Name	Inserts the assigned driver’s name.
Job Description	This is a free text field used for additional information related to the driver that appears in the Bringg customer page. It may insert the assigned driver’s job description like biker to walker, or the name of the delivery provider fulfilling the order.
Order title	Inserts the title of the order. For example, the name of the item purchased.
Order ID	Inserts your order ID.
Waypoint Customer’s Name	Inserts the name of the contact associated with the order's destination. For example, if a customer is sending someone a gift, this could be the gift recipient's name.
Customer First Name	Inserts the customer's first name. Use this, for example, in the start of a notification.
Order’s Delivery Time Window	Inserts the order's delivery time window as selected by the customer or assigned automatically. Before using this variable, check if you opted to Keep time window fixed on share.
Delivery Address	Inserts the address of the destination. Depending on what details you collect, this may include only the house number and street name, or it may also include city, state, zip code, and so on.
Team Description	Inserts a text field describing the team in a way that makes sense for the customer to see. For example, internally your teams might have names like Team A, Team B, and so on. However, the {{team_description}} the customer sees is simply the name you choose to publicly display.
Unique Notification ID	Inserts Bringg's order ID. This is different from {{id}} which inserts your assigned order ID.

Step 8: Send your self a test email to verify it looks as you want it to by selecting Test Mail.

Step 9: Preserve your template by selecting Save. All saved templates appear in the templates menu.

Step 10: Create or add to existing automation flows. Set automated triggers and conditions to send specific branded emails from your saved templates at whatever stages you choose of the fulfillment journey. Learn more.

Was this article helpful?

What's Next

Send Emails with Automations

Table of contents

Before You Begin
Procedure