Customize your Email Content

You can customize your email content by adding browser links, sender images, Gmail markups, and using custom fonts. This article describes how you can use these options to customize your content for email campaigns.

Custom positioning of View in Browser (VIB) Link

library_add_check

Prerequisites

The View in Browser Link position can be modified only if the View in Browser feature is enabled. To enable the feature, contact us from your MoEngage Dashboard -> Need Help? -> Contact Support or send an email to support@moengage.com.

View in browser link in an email enables users to view the email content in the web browser. In the MoEngage Email Campaign module, the view in browser option is positioned at the top of the email campaign, above the header by default.

Modifying the Position of View in Browser link

To customize the position of the View in Browser link, place the following HTML tag in the required position.

HTML
<a id="moe_email_vib">Enter text here</a>

The HTML tag can be added inside an HTML block in the Drag and Drop editor or directly in the HTML code editor and can be styled using CSS elements to customize the appearance, such as color and font. 

info

Note

  • View in Browser is not included in click tracking. The email click event is not recorded if the link is clicked in the Browser. 
  • VIB links render the user attributes used in personalization, while event attributes are not rendered.

Adding Sender Image for the Email

To add the sender image for all your email campaigns, use any one of the following methods:

    • Using BIMI

      BIMI is a verification framework that authenticates the brand and enables the display of the brand logo in the avatar field of emails. Yahoo! Mail and Google have adopted the BIMI method. For more information on implementing BIMI, refer to Why, What, and How BIMI and How BIMI differs from other authentication methods.

      Ensure the following:

            • Ensure that DMARC authentication is based on organizational policy. Set it to either quarantine or reject.
            • Publish the BIMI record to your DNS, which has the logo indicator in SVG format or a Verified Mark Certificate (VMC).
            • You can get in touch with us by dropping an email to support@moengage.com.
    • Using your email account

      To use your email account for adding a sender image, the following prerequisites need to be met:

        • Ensure that your sending address has a mailbox or emailing account.
        • Ensure that you can easily add a sender image in the mailbox or emailing account. 

      Navigate to Settings and use the option to upload or change your sender image. For more information about adding sender images for Outlook and Google, refer to Outlook and Google.

  • Using Custom Fonts in Email

    MoEngage Email campaign and channel support only web-safe fonts. The MoEngage HTML WYSIWYG Editor and the Drag and Drop WYSIWYG Editor support the following fonts:

            • Arial
            • Courier
            • Georgia
            • Helvetica
            • Lucida Sans
            • Tahoma
            • Times New Roman
            • Trebuchet MS
            • Verdana
            • ヒラギノ角ゴ Pro W3
            • メイリオ
            • Bitter
            • Droid Serif
            • Lato
            • Open Sans
            • Roboto
            • Source Sans Pro
            • Montserrat
            • Ubuntu
    info

    Font Support for Gmail and Outlook

    • Gmail only supports a few web-safe fonts.
    • Outlook does not support custom or web fonts but only traditional web-safe fonts.

     

  • Using Gmail Markups

    Markups help users interact with an email in Gmail without opening it by adding call-to-action buttons or links in the subject line. Gmail uses schema.org, a markup vocabulary, an open standard that can be used to add code (markup) to your email templates. With markups, you can highlight important information and improve conversions (click-through rates). For example, you can use Gmail markup to bring up cards in the inbox that highlight the travel information of the user (such as departure time, date, flight information, and so on). Similarly, you can add order confirmation, shipping/delivery information, and reservation details and highlight them or help users take action by adding actions to the email.

    library_add_check

    Prerequisites

    Your domain should be registered with Google for the markups to work. For more information, refer to Registering with Google.

    Adding Markups to Email Template

    To add a markup to your email template, do the following:

            1. Choose the desired markup from the type that you want to add and navigate to it from here. For example, to add a one-click action to the email template, navigate to the one-click action reference page.
            2. Copy the Micro Data (not the JSON-LD) for the desired action and paste it to your Email Template in MoEngage during campaign creation.

    Example

    To show the flight details on a card in the flight reservation confirmation email, do the following:

          1. Copy the micro data from Flight Reservation. MicroData__1_.png
          2. Add this to the body of your Email Template (either past the code inside the custom HTML template's Body or add an HTML block in the drag and drop editor and paste this code inside it) and publish the campaign.AddMarkuptoEmail.gif
          3. Preview of Email delivered to the inboxEmailPreview.gif

Was this article helpful?
2 out of 5 found this helpful

How can we improve this article?