On-site messaging (OSM) templates help you create engaging messages that drive conversions. You can create short surveys, generate leads, and set up banner messages with OSM templates. This article discusses OSM template types and their configurations.

Template Types

MoEngage's OSM editor provides a wide range of templates for various use cases.

Popup Templates

To create an OSM campaign with a popup template, follow these steps:

1. Type Popup in the template search box, or scroll to the Popup Templates section and select a template.
2. After you select a template, the OSM editor loads the template.
3. You can use the template as is or customize it as needed. To learn more, see Customizing the template with the OSM Editor.
4. To allow users to scroll the page behind the pop-up, click the icon, and then click the icon. Turn on the Scroll Page Behind toggle.
5. After you customize the template, enter the scheduling and delivery control options in step 3 of campaign creation, and then publish the campaign.

Nudge Templates

To create an OSM campaign with a nudge template, follow these steps:

1. Type Nudge in the template search box, or scroll to the Nudge Templates section and select a template.
2. After you select a template, the OSM editor loads the template.
3. You can use the template as is or customize it as needed. To learn more, see Customizing the template with the OSM Editor.
4. If you selected the countdown timer template, you can choose the date and time for the timer (for example, when a sale starts), customize the call to action, and add links to the button to redirect users to the target webpage.
5. If you selected the Subscribe or CTA template to collect user email addresses or mobile numbers, see Lead Generation Template Example to capture the information in MoEngage and use it to run campaigns.
6. After you customize the template, enter the scheduling and delivery control options in step 3 of campaign creation, and then publish the campaign.

Banner Templates

To create an OSM campaign with a banner template, follow these steps:

1. Type Banner in the template search box, or scroll to the Banner Templates section and select a template.
2. After you select a template, the OSM editor loads the template.
3. You can use the template as is or customize it as needed. To learn more, see Customizing the template with the OSM Editor.
4. If you selected a banner at the bottom to display GDPR cookie consent information, you can add a link for user consent and map attributes to store this information, as shown below.
5. If you selected a banner at the bottom to display offer-related notifications, you can customize the timer element, add links, and so on, as shown below.

   info	Information Top banners push the page content down and do not overlap with the content if the display settings are turned on and the website headers are not sticky. Banners at the bottom overlap with the page content, are non-intrusive, and span the full screen width.

Configure Accessibility for OSM

You can configure accessibility features for your on-site messages within MoEngage to ensure inclusivity for all users. To learn more about accessibility principles, see Accessible Campaigns in MoEngage.

Add Accessible Rich Internet Applications (ARIA) Labels for Visuals

Adding ARIA labels makes your images understandable to users who rely on screen readers.

• Using the drag-and-drop editor: When you add an Image or GIF element to your OSM campaign (for example, pop-ups, banners), add ARIA labels to ensure accessibility.
  To add ARIA labels, follow these steps:
  1. After you select the OSM template, click the desired element.
  2. Click Settings > Styling.
     
  3. On the Advanced tab, in the Custom Attributes box, type the ARIA label, as shown below:
     
• For custom HTML OSM: If you build your OSM message with custom HTML, you must add the alt attribute with a meaningful description to all your <img> tags directly in your code.
  Example: <img src="image_url.png" alt="Description of the image">

Ensure Keyboard Accessibility

Users must be able to interact with and dismiss your OSM campaigns by using only a keyboard.

• Dismissing OSM pop-ups (Escape key): OSM pop-ups created through MoEngage are generally configured to be dismissible by pressing the Escape key on the keyboard. This is a standard accessibility feature.
• Interacting using the Space key: When the focus is on an element, users can interact with it by using the Space key.
• Focus management:
  • Initial focus: When an OSM campaign appears, the MoEngage SDK typically shifts focus to the campaign, making it the active element for keyboard interaction.
  • Focus trapping (full-screen pop-ups): For full-screen OSM pop-ups, focus is usually "trapped" within the pop-up to prevent users from accidentally navigating to the underlying webpage while the pop-up is active.
  • Returning focus: When an OSM campaign is closed, focus should return to the element on the webpage that had focus before the OSM appeared.
• Custom HTML: If you use custom HTML for your OSM, ensure all interactive elements are keyboard navigable and that focus is managed correctly.

Configure Dynamic Content Announcements

If your OSM campaign includes content that updates dynamically (for example, a personalized greeting or a stock update):

• Platform handling: For standard dynamic content updates powered by MoEngage personalization, the platform makes these updates perceivable by assistive technologies.
• Custom implementations: If you implement highly custom dynamic content within an HTML-based OSM, you may need to use appropriate ARIA attributes (for example, aria-live) in your custom code to make these updates accessible.

Address TV Content Descriptions

If your on-site message is intended to be displayed on TV platforms or similar devices:

• Platform-specific needs: Consider how accessibility is handled on the target TV platform (for example, Tizen, Roku). Consider specific accessibility requirements and navigation patterns (for example, remote control interaction).
• Providing clear content: Ensure the accessibility configuration is clear and suitable for reading out or displaying on a TV interface. The specific TV browser or program displaying your website might handle the actual rendering of content descriptions.

Touch Target Sizes

• Templates: MoEngage's OSM templates meet touch target size accessibility guidelines.
• Custom HTML: If you create OSM campaigns with custom HTML, ensure your interactive elements (buttons, links) are large enough to be easily tapped on touch devices.

By configuring these elements in your OSM campaigns, you can significantly improve their accessibility. Always test your OSM messages on different devices and, if possible, with accessibility tools to ensure a good user experience.

Use Cases

This section lists popular use cases for the previous template types.

Offers/Announcements

To create an OSM campaign with an offer/announcement template, follow these steps:

1. Type Offer or Announcement in the template search box and select one of the available templates.
2. After you select a template, the OSM editor loads the template.
3. You can use the template as is or customize it as needed. To learn more, see Customizing the template with the OSM Editor.
4. To add a link to the button in the template, click the Button and add the link to redirect users when they click the button. If you add a link to the button, MoEngage tracks it as a click event. If no link is added, MoEngage tracks it as a close event by default.
5. Note: Click tracking is on for links by default. For links you add to the template, click tracking information appears in Campaign Analytics. To learn more, see OSM Campaign Analytics.
6. Personalize messages: To personalize your text or image URL, type @ (at sign) in the text box or image URL box. Add the personalized attributes to use in the message in the personalization pop-up window that displays, as shown below.To learn more, see Personalizing OSM messages.

Lead Generation

To create an OSM campaign with a lead generation template, follow these steps:

1. Type Lead Gen in the template search box and select one of the available templates.
2. After you select a template, the OSM editor loads the template.
3. You can use the template as is or customize it as needed. To learn more, see Customizing the template with the OSM Editor.
4. To capture leads, map the user attribute that stores the user's submitted response. For example, if you want to collect a user's email address or mobile number, specify the attribute to store the user's input in MoEngage. To map an attribute, click the icon in the editor toolbar of the input field in the template. The following options appear:
   • Field - Specify the type of the input field and whether it is a mandatory field. The following field types are available:

     Field Type	Description
     Text	Collect text input from the user.
     Email	Collect the user's email address.
     Number	Collect numeric input from the user.
     Paragraph	Collect descriptive feedback from the user. For example, use the Paragraph field in templates where you ask for information about a user's query or feedback when they unsubscribe.
     Select	Add a dropdown list for the user to select from.
     Radio	Add radio buttons for the user to select from.
     Checkbox	Add a checkbox for the user to select from. For example, when you ask for subscription preferences, you can list options and the user can select their interested categories.
     Date	Allow the user to choose a date. For example, when setting up a meeting, you can ask for the user's preferred date and time (Time field type).
     URL	Add radio buttons for the user to select from.
     Time	Allow the user to choose a time frame. For example, when you have request callback options, you can ask for the user's preferred time to contact them.
     Tel	Collect the user's phone number.
     Password	Use this field type when adding sign-up or login options where the user types their password.

   • Required - This toggle is on by default. If the field is not mandatory, turn off the Required toggle.
   • Spacing - This field controls the spacing between the input field and the element below it.
5. Advanced - This tab controls the user attribute mapping for the input field. The following options are available:
   • Label - Specify if a label is required for the input field.
   • Placeholder - Specify if a placeholder is required for the input field.
   • User Attribute - Map a user attribute to the input field.
6. Background - This tab controls the size of the input field. You can select from the following options: S, M, and L.
7. After you customize the template, test it by using the Test campaign option, and then publish the campaign. To learn more, see Create OSM Campaign.

Lead Generation Template Example

Consider a newsletter subscription lead generation template. To create an OSM campaign with the newsletter subscription template, follow these steps:

1. Select your target audience as desired in step 1.
2. Select the Newsletter Subscription Lead Gen Template.
3. Click the email input field.
4. Click the icon in the editor toolbar.
5. If you want to collect the user's email address (the default configuration for the input field in the template), skip to the next step. If you want to collect other information from the user, select the information type in the Type option. For example, if you want to collect the user's mobile number, select Tel in Type.
6. The input field is mandatory by default. You can make the field non-mandatory by turning off the Required toggle.
7. To map the user input, select the Advanced tab and select the user attribute in which to store the user's input, as shown below.
8. To map custom attributes, follow these steps:
   1. Click the Subscribe button to display the editor toolbar.
   2. Click Styling.
   3. Enter the custom attributes and their mapping in the Custom Attributes section.

      You can map attributes in the UI or manually, as explained in this step.

9. After you customize the template, enter the scheduling and delivery control options in step 3 of campaign creation, and then publish the campaign.

After a user subscribes to the newsletter, you can track the subscription in their user profile. When a user clicks Subscribe in the campaign, the following occurs:

1. The MOE_RESPONSE_SUBMITTED event fires.
2. MoEngage stores the user input in the mapped user attribute. For example, if a user enters an email address and clicks Subscribe, MoEngage stores the email address in the Email user attribute, and it appears in the MOE_RESPONSE_SUBMITTED event in the user's profile, as shown below.

Identify Users who submitted a response

You can identify users who performed the MOE_RESPONSE_SUBMITTED event and filter them by their responses to create segments and analyze the data. Follow these steps:

1. In MoEngage Dashboard, go to Segment Create Segment.
2. In the Filter Users by tab, select User Property and add the MOE_RESPONSE_SUBMITTED event.
3. Specify the time range for the event and add your OSM campaign ID to view the number of users who submitted a response to the campaign, as shown below.
4. You can create a campaign targeting this segment, analyze it, or export segment details to run your own analysis on the segment data.

Typeform Survey

To create an OSM campaign with a Typeform survey template, follow these steps:

1. Type Typeform survey in the template search box and select the Typeform template.
2. After you select a template, the OSM editor loads the template.
3. You can use the template as is or customize it as needed. To learn more, see Customizing the template with the OSM Editor.
4. Click the empty Typeform element in the template to display the editor toolbar.
5. Click the icon and add the Typeform URL in the HTML editor that appears, as shown below.
6. When the HTML displays, find the data-url and src variables. Add your Typeform URL, including query parameters, to both fields. Use double quotation marks (") instead of single quotation marks ('), as shown in the example:

   <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. To personalize your survey URL with user attributes and pass additional parameters for analysis, update the URL. For example, if your survey URL is https://typeformsales7.typeform.com/to/OLMOfS?user_id=xxxxx, update the URL to https://typeformsales7.typeform.com/to/OLUWfS?customer_id={{UserAttribute['uid']}}. To enable this, configure hidden fields in Typeform. Hidden Fields in Typeform allow you to pass additional parameters with the survey.
8. After you customize the template, enter the scheduling and delivery control options in step 3 of campaign creation, and then publish the campaign.