OSM Pro Templates

OSM Pro templates help you to craft powerful and captivating messages that drive engagement and conversion. You can create short surveys, generate leads and have banner messages with the help of OSM templates. The various OSM Pro template types are discussed below.

Template Types

With MoEngage's OSM Pro editor, you get a wide range of templates to choose from depending on your use case.

Template Type Description
Popup Templates

Use this template to communicate information in an intrusive manner with your visitors. For example, you can use popups for the following:

  1. Offers and Announcements
  2. Lead Generation
  3. Getting subscriptions
  4. Getting information from visitors/customers using Typeform surveys 

For more information, refer to Popup Templates.

Nudge Templates

Use this template to communicate non-intrusively with your website visitors. For example, you can use the nudge templates for the following:

  1. Getting subscriptions when users complete a purchase
  2. Nudge customers to contact sales teams - lead generation
  3. Show relevant or recommended content

For more information, refer to Nudge Templates.

Banner Templates

Use this template to display information across the website. Banners are typically added either at the top or at the bottom of the page and can be used for the following:

  1. Showing countdown timers
  2. Showing GDPR-compliant cookie information

For more information, refer to Banner Templates.

Blank Template

Use this template type to create the template from scratch. For more information, refer to Working with the OSM Pro Editor.

Popup Template

To create an OSM campaign with a popup template, do the following:

        1. Type Popup in the template search box or scroll to the Popup templates section and choose the template.
        2. Upon template selection, the template gets loaded in the OSM Pro editor.
        3. You can use the template as is or customize it as per your requirements. For more information, refer to customizing the template with the OSM Pro Editor.
        4. To allow users to scroll the page behind the popup, click on the Options and click ScrollPopup.png. Enable the Scroll Page Behind Toggle.ScrollPage
        5. Once the template has been customized, enter the scheduling and delivery control options in step 3 of campaign creation and publish the campaign.

Nudge Template

To create an OSM campaign with a nudge template, do the following:

        1. Type Nudge in the template search box or scroll to the Nudge templates section and choose the template.
        2. Upon template selection, the template gets loaded in the OSM Pro editor.
        3. You can use the template as is or customize it as per your requirements. For more information, refer to customizing the template with the OSM Pro Editor.
        4. If you've chosen the countdown timer template, you can choose the date and time for the timer (for example, when a sale is going live), customize the Call To Action, and add links to the button for redirecting the user to the intended web page.TimerTemplate.gif
        5. If you choose the Subscribe or CTA template, you can seek the user's email ID or mobile number, follow the steps mentioned in Lead Generation Template to capture the information in MoEngage, and use it to run campaigns.
        6. Once the template has been customized, enter the scheduling and delivery control options in step 3 of campaign creation and publish the campaign.

Banner Template

To create an OSM campaign with a banner template, do the following:

        1. Type Banner in the template search box or scroll to the Banner Templates section and choose the template.
        2. Upon template selection, the template gets loaded in the OSM Pro editor.
        3. You can use the template as is or customize it as per your requirements. For more information, refer to customizing the template with the OSM Pro Editor.
        4. If you've chosen the banner at the bottom to display GDPR Cookie Collection and Storage information for GDPR Policy Compliance, you can add the link to be used when the user consents and the attributes to be used for storing this information, as shown below.BannerTemplate_Bottom.gif
        5. If you've chosen the banner at the bottom to display offer-related notifications, you can customize the timer element, add links, and so on, as shown below.Banner_Top.gif
          info

          Note

          • Top banners push the page's contents down and do not overlap with the content if the display settings for the same are turned on, and the website's headers are not sticky.
          • Banners at the bottom overlap with the page's content, are non-intrusive, and occupy the entire width of the screen.

Use Cases

We've listed some of the popular use cases for the above-mentioned template types below.

Use Case

Description

Offers/Announcements

Use these templates when you want to convey information about upcoming or ongoing offers and announcements. These templates have various elements in them, such as countdown timers, call-to-action buttons, and images. For example, you can use this template type for the following:

      1. Flash Sales
      2. Seasonal/Holiday Sale offers
      3. Discount Deals/Lightning Deals
      4. Announcements about product launches, events

For more information, refer to Offer and Announcement Templates.

Lead Generation

Use these templates when you want to capture information from your website visitors. You could capture the Email Id, Mobile Number, or any other preferences and save it in the MoEngage user profiles of the users for re-targeting. For example, you can use this template for the following:

      1. Getting users to subscribe to newsletters
      2. Getting users to sign up to receive SMS messages

For more information, refer to Lead Gen Templates.

Typeform Surveys

Use this template type to capture information from your website visitors using a type form. For more information, refer to Typeform Survey Templates.

Offers/Announcements

To create an OSM campaign with an offer/announcement template, do the following:

      1. Type Offer or Announcement in the template search box and choose from one of the available templates.
      2. Upon template selection, the template gets loaded in the OSM Pro editor.
      3. You can use the template as is or customize it as per your requirements. For more information, refer to customizing the template with the OSM Pro Editor.
      4. To add a link to the button added to the template, click on the Button and add the link to which the user will be redirected when they click on the button. If a link is added to the button, a click will be tracked as the click event, and if the link has not been added, it will be tracked as the close event by default.
      5. Note: Click tracking is enabled for links by default. For links that are added to the template, click tracking information will be available in Campaign Analytics. For more information, refer to OSM Campaign Analytics.
      6. Personalizing messages: For personalizing your text or image URL, you can key in @ in the text box or image URL box.  Add the personalized attributes to be used in the message in the personalization pop-up that appears, as shown below.PersonalizedContent.gifFor more information, refer to Personalizing OSM messages.

Lead Generation

To create an OSM campaign with a lead gen template, do the following:

      1. Type Lead Gen in the template search box and choose from one of the available templates.
      2. Upon template selection, the template gets loaded in the OSM Pro editor.
      3. You can use the template as is or customize it as per your requirements. For more information, refer to customizing the template with the OSM Pro Editor.
      4. To capture leads, you have to map the user attribute that will store the response submitted by the user. For example, if you wish to capture the email id or mobile number of a user, you have to specify the attribute that would be storing the user's inputs in MoEngage. To map an attribute, click on the InputCapture__1_.png icon in the editor toolbar of the input field in the template. You get the following options:
          • Field - This tab lets you specify the type of the input field and whether it is a mandatory field. The following field types are available:
            Field Type Description
            Text Use this field type when you want to capture text inputs from the user.
            Email Use this field type when you want to capture the user's email address.
            Number Use this field type when you want to capture numeric inputs from the user.
            Paragraph Use this field type when you want to capture descriptive feedback from the user. For example, in templates where you request for information about the user's query or feedback when they unsubscribe, you can use the Paragraph field to capture information.
            Select Use this field type when you want to add a dropdown and provide choices for the user to select from.
            Radio Use this field type when you want to add radio buttons and provide choices for the user to select from.
            Checkbox Use this field type when you want to add a checbox and provide choices for the user to select from. For example, when you ask for subscription preferences, you can list the options and the user can select the categories he/she is interested in.
            Date Use this field type when you want to let the user choose a date. For example, when you wish to set up a meeting, you can ask for the user's preferred date and their preferred time (Time field type).
            URL Use this field type when you want to add radio buttons and provide choices for the user to select from.
            Time Use this field type when you want to let the user choose a time frame. For example, when you have request callback options, you can ask for the user's preferred  preferred time to get in touch with them.
            Tel Use this field type when you want to capture the user's phone number.
            Password Use this field type when you are adding sign-up or login options and the user has to type in their password.
          • Required - This toggle is turned on by default. If the field is non-mandatory, turn off the toggle.
          • Spacing - This field lets you specify the spacing between the input field and the element placed below it.
        • Advanced - The tab lets you specify the user attribute mapping for the input field. The following options are available:
            • Label - this option lets you specify if a label is required for the input field.
            • Placeholder - this option lets you specify if a placeholder is required for the input field.
            • User Attribute - this option lets you specify the user attribute mapping for the input field.
        • Background - This tab lets you specify the size of the input field. You can choose from one of the following options: S, M, and L.
      5. Once the template has been customized, test it using the Test campaign option and publish the campaign. For more information, refer to Create OSM Campaign.

    Lead Gen Template Example

    Let's take the case of a newsletter subscription lead gen template. To create an OSM campaign with the newsletter subscription template, do the following:

        1. Choose your target audience as desired in step 1.
        2. Select the Newsletter Subscription Lead Gen Template.
        3. Click on the email input text field.
        4. Click on the InputCapture__1_.png icon in the editor toolbar.
        5. If you wish to capture the email id of the user (the default configuration for the input field in the template), skip to the next step. If you wish to capture other information from the user, select the information type you want to capture in the type option. For example, if you wish to capture the mobile number of the user, choose Tel in type.
        6. The input field is marked as mandatory by default. You can mark the field as non-mandatory by tuning off the Required toggle.
        7. To map the information entered by the user, select the Advanced tab and choose the user attribute in which the information entered by the user should be stored, as shown below.
        8. To map custom attributes, do the following:
            1. Click on the Subscribe button to get the editor toolbar.
            2. Click on Styling to enter the custom attribute mapping.
            3. Enter the custom attributes and their mapping in the Custom Attributes section.

              Note: This can be done in the UI as explained above, or you can add the mapping maually as explained in this step.

        9. Once the template has been customized, enter the scheduling and delivery control options in step 3 of campaign creation and publish the campaign.

    LeadGenTemplate.gif

    Once a user subscribes to the newsletter, you can track the same in their user profile. When a user clicks on Subscribe in the campaign, the following happens:

        1. The MOE_RESPONSE_SUBMITTED event is fired.
        2. The user's inputs are stored in the user attribute mapped in the template. For example. if a user enters an email ID and clicks on subscribe, the email id gets stored in the Email user attribute and is available in the MOE_RESPONSE_SUBMITTED event in the user profile of the user, as shown below.ResponseSubmittedEvent.png

    Identifying Users who've submitted a response

    You can identify users who've performed the MOE_RESPONSE_SUBMITTED event and filter them based on their responses to create segments and analyze the data in them by doing the following:

        1. Navigate to the MoEngage Dashboard -> Segment -> Create Segment.
        2. In the Filter Users by tab, select User Property and add the Has executed event as MOE_RESPONSE_SUBMITTED.
        3. Specify the time range for the event and add the campaign ID of your OSM campaign to see the number of users who've submitted a response to the campaign, as shown below.Segmentation.gif
        4. You can create a campaign targetting this segment, analyze it or export its details, and run your own analysis on the segment data.

    Typeform Survey

    library_add_check

    Prerequisites

        • Create your Typeform survey and have the URL ready for it. This will be added to the template to fetch the survey.
        • If you are personalizing your Typeform URL with User Attributes, you need to pre-configure the hidden fields in your Typeform. For more information, refer to Using Hidden Fields in Typeform.

    To create an OSM campaign with a Typeform survey gen template, do the following:

        1. Type TypeForm survey in the template search box and choose the Typeform template.
        2. Upon template selection, the template gets loaded in the OSM Pro editor.
        3. You can use the template as is or customize it as per your requirements. For more information, refer to customizing the template with the OSM Pro Editor.
        4. Click on the empty Typeform element in the template to get the editor toolbar.
        5. Click the AddTypeForm.png icon and add the Typeform URL in the HTML editor that opens, as shown below.
        6. In the HTML that is displayed, look for the following variables - "data-url" and "src". Add your Typeform URL along with query parameters in both of the fields. Make sure you use " " instead of ' ' as shown in the example below
          <div data-id="IFRAME" id="survey-frame" class="moe-element moe-container frame" 
          data-url="https://typeformsales7.typeform.com/to/ZmQRUSIu?user_id={{UserAttribute['u_em']}}"
          style="z-index: 999999;">
          <div class="widget__WidgetWrapper-sc-1rxjz1n-0 NwqzB">
          <div class="widget__IframeWrapper-sc-1rxjz1n-2 cKLpKc" style="height: 400px; width: 600px;"><iframe
          frameborder="0" height="100%"
          id='typeform-iframe'
          src="https://typeformsales7.typeform.com/to/ZmQRUSIu?user_id={{UserAttribute['u_em']}}"
          width="100%" allow="camera; microphone; autoplay; encrypted-media; fullscreen;" data-qa="iframe"
          title="typeform-embed" style="border: 0px;"></iframe></div>
          </div>
          </div>
        7. You can personalize your survey URL with user attributes if you need to pass additional parameters for analysis. For example, if your Survey URL is  - https://typeformsales7.typeform.com/to/OLMOfS?user_id=xxxxx
          , you can pass the unique user id (User Attribute - ID) and save this in the response by updating the URL to: https://typeformsales7.typeform.com/to/OLUWfS?customer_id={{UserAttribute['uid']}}
          Note: For this to work, you would have to configure hidden fields on Typeform. Hidden Fields on Typeform allow you to pass additional parameters with the survey. 
        8. Once the template has been customized, enter the scheduling and delivery control options in step 3 of campaign creation and publish the campaign.TypeForm_Survey.gif

 

Was this article helpful?
0 out of 1 found this helpful

How can we improve this article?