Contents x
    Create Branded Email Templates
    • 10 Nov 2023
    • 13 Minutes to read
    • Print
    • Dark
      Light
    Contents

    Create Branded Email Templates

    • Updated on 10 Nov 2023
    • 13 Minutes to read
    • Print
    • Dark
      Light
    Article summary

    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.

    null



    Was this article helpful?
    What's Next