OSM Pro Editor

Getting started

The OSM Pro editor can be accessed by clicking the AddElement_Icon.png icon available at the top left corner of the screen.

Actions available in the OSM Pro Editor

  1. Add Element - This option lets you add any of the following elements to the screen. To add an element, drag and drop the element into the canvas.
    1. Column - Drag and drop this element to add a column.
    2. Row - Drag and drop this element to add a row. You can use the column and row elements to create a layout for your On-site message and then add other elements to it.AddColumnRow.gif
    3. Essential Elements - This section contains the following elements: Text, Image, Button, Icon, Spacer, Map, Form, and Line. For more information, refer to Essential Elements.
    4. Media Elements - This section contains the following elements: Gallery, Video, Audio, and Playlist. For more information, refer to Media Elements. 
    5. Content Elements - This section contains the following elements: Icon Box, Embed, Rating, Alert, Counter, Countdown, Progress, Calendly, Carousel, Tabs, Accordion, Switcher, Table, and Timeline. For more information, refer to Content Elements.
  2. Search element - The Search element search box helps you search for an element by typing its name'SearchElement.gif 
  3. Edit - This option lets you choose which of the elements are required in the Add Elements panel. Click on the element you want to hide, and it gets deselected (a dark circle at the top left corner of the element). By default, all the elements that are visible are selected and have a tick mark around the top left corner of the element. For example, if the Row element is selected, it would appear as SelectedElement.png and when it hasn't been selected, it would appear as DeselectedElement.png .EditElement.gif

Common Styling Options for Elements

The following styling options are available for most of the elements in the OSM Pro editor.

Typography Colors Link Settings Other Options

You can add typography options to an element by clicking the OSMPro_TypographyOptions.png icon. The following options are available here:

  • Change the Font by selecting from the available options
  • Add New Font - To add a new font, click + Add New Font and add a new Font from Google Font or choose from one of the fonts available in the Fonts tab.
  • You can choose a style for the text from one of the available options in the dropdown - Custom, Paragraph, Subtitle, Above Title, Heading 1, Heading 2, Heading 3, Heading 4, Heading 5, Heading 6, and Button.
  • You can choose the Font size, weight, line height, and letter spacing in the Typography section.
  • To add personalization, click the OSMPro_Personalization.png icon and select Others. Choose the desired personalization attribute and fallback. For more information, refer to Personalizing On-site messages.

OSMPro_TypographyOptions__1_.png

Essentials

This section contains the elements that you can begin with to create your OSM - a put-together starter kit of sorts that will help you create the draft of your OSM. You can add media elements and effects to the message to make it more appealing.

The Essentials section contains the following elements:

  1. Text - The Text element lets you add text to your message. You can edit the text directly on the screen, and you can add font and styling options to it by clicking inside the text block, which will open the editor toolbar below the text block.TextElement.png You can edit the following: font family, font size, basic formatting, text alignment, numbered and non-numbered bullets, font color, add padding (gaps) above and below the text, choose the style for the text in HTML (whether it will be a paragraph element (<p> tag or a heading and so on), add links, and choose the styling and effects. You can also copy text and delete it.
  2. Image - The Image element lets you add an image to the OSM. Drag and drop the image element to the screen and click on it to get the edit options. You can do the following with the image editor:
    • Upload an image, and add filters, tags, and masks to it.
    • You can edit the height and width of the image and use the aspect ratio of your choice for it. To specify height and width for an image, click on the image and in the image editor toolbar, click  Settings__2_.png . Specify the height and width (in percentage) in the popup. You can also resize the image manually.
    • Adding Background color, body color, border color, and shadows to the image.
    • Adding links to the image. This section has the following options: URL, Block, File, and Action.
    • Placement of the image - Styling and Effects
    • Duplicate the image
    • Delete the image
  3. Button - The Button element lets you add a button to the OSM. You can style the buttons and add actions to them as well. Drag and drop the button to the screen and click on it to get the edit options. You can do the following with the button editor:
    • Size (width and height) and positioning of the button/icon along with the corner shapes for the button (sharp edges, curvilinear, etc. - drag the slider to determine the shape of the corners for the button, as shown below)
    • Text of the button/icon, along with the formatting and styling options for the text.
    • Adding Background color, body color, border color, and shadows to the button/icon.
    • Adding links to the button. This section has the following options: URL, File, and Action.
    • Placement of the button - Styling and Effects
    • Copy the button
    • Delete
  4. Icon - The icon element lets you add an icon to the OSM. YOu can style the icons and add actions to them as well. Drag and drop the button to the screen and click on it to get the edit options. You can do the following with the button editor:
    • Choice of icon - you can choose the icon you want to be displayed in the OSM. The default icon is the star DefaultIcon.png.  You can choose the icon or outline you want to use by clicking on the star icon in the editor toolbar.
    • Color - You can choose the color of the icon by clicking on the color option in the editor toolbar.
    • Adding links to the icon. This section has the following options: URL, File, Action.
    • Styling and Effects - You can choose what effects should be shown for the button when the OSM is displayed and when the user scrolls the website.
    • Copy the icon
    • Delete
  5. Spacer - The spacer element lets you add space between elements or simply add space to the notification.
  6. Map - The map element lets you add a map to the OSM. You can add an address, determine the zoom level, add color elements to the map (background color, border color, and shadow), adjust the width and height of the map, add effects and styling to it, copy it, and delete it.
  7. Form - The Form element lets you add a form using which you can collect inputs from the user. The default form comes with the following options:
    • Email
    • Option Selector - option 1, option 2
    • A text box where the user can type additional input.
    • You can move these elements back and forth as you wish using the MoveIcon.png icon.
    • For example, you can seek the user's permission to opt them in to receive SMS messages. The first field could be the message you wish to send to the user asking them for their permission to sign up for receiving SMS messages from your brand. The second field could be Sign-up/Not Interested, and the third field could be the input field that captures the user's phone number.
  8. Line - The Line element adds a line to the OSM. You can choose the style for the line, its height, color, alignment, width, styling, and effects in the editor toolbar. You can also copy the line or delete it.

Media

This section contains the elements media elements that can be added to your OSM to make it appealing to the user. It contains the following elements:

Gallery - You can upload images to your OSM using the Gallery element. It lets you upload an image, and add tags, filters, and masks to it, as shown below. The following options are available as well:

  • Color options for images - You can add overlays, borders, and shadows to images using the ColorOption_Images.png option in the image editor toolbar. 
  • Image Links - You can add URL links, actions, and external CSS file options to specify what should happen when a user clicks on the image.
  • Move image - You can move the image to either the left or right by clicking the MoveImage.png option in the image editor toolbar. 
  • Copy the icon.
  • Delete.

Video - You can upload videos to your OSM using the Video element. You can upload a Youtube video, Vimeo video, or a URL for a video. You can choose the cover image and settings for the player, add playback options, and add filters to the video. Custom videos are not supported presently.

Audio - You can upload audio to your OSM using the Audio element. You can choose the audio to be played when the OSM is displayed, the audio's appearance, the buttons for the audio, and whether the audio should be auto-played. You can also do the following:

  • Color options - You can add overlays, borders, and shadows to the audio using the ColorOption_Images.png option in the audio editor toolbar. 
  • Styling and Effects - You can choose what effects should be shown for the audio when the OSM is displayed.
  • Copy the icon.
  • Delete.

Playlist - You can upload a playlist of videoes to be played in the OSM - the order in which the videos will be played, whether they will play in a loop, and so on. You can add branding and control elements too for it.  You can also do the following:

  • You can move these elements back and forth as you wish using the MoveIcon.png icon.
  • Color options - You can add overlays, borders, and shadows to the audio using the ColorOption_Images.png option in the audio editor toolbar. 
  • Styling and Effects - You can choose what effects should be shown for the audio when the OSM is displayed.
  • Copy the icon.
  • Delete.

Content

This section contains a few content elements (that are a combination of a few other elements) that can be used as is. The following options are available here:

  1. Icon Box - The icon box is a combination of text, button, and icon. You can customize each of these elements by clicking on them. For more information, refer to the sections about customizing these elements above.IconBox.png
  2. Embed - The embed element allows you to embed HTML in the on-site message. You can paste your custom HTML by clicking the EmbedIcon.png icon. You can also add color options, styling, effects, duplicate the element and delete it using the editor toolbar.Embed.png
  3. Rating - The rating element allows you to show a static rating popup with stars or different icons. You can display your app's rating on the pop-up using the rating element. You can customize the icon to be used by clicking the RatingIcon.png icon. You get the following options:
    • Rating Scale - you can choose a scale of 0-5 or 0-10.
    • Style - you can choose a rating style to display to the users.
    • Label - you can specify whether the rating value should be displayed to the left or the right of the icons.
    • Spacing - you can specify the space between the rating and the value.
    • Rating - you can specify the default rating that is displayed. For example, you can show a five-star rating, as shown here: DefaultRating.png
    • Icons - you can specify the icon to be used for the rating, the icon size, and the rating.Rating__1_.png
  4. Alert - The alert element allows you to add a title and a description text in the popup. You can either enable or disable the close button and add color, alignment, and styling options to the element. Alert__1_.png
  5. Counter - The counter element allows you to display a counter on the web page. For example. you can use this option when the site loads. Click the CounterIcon.png icon to get the options to customize the counter - counter style, start and end time, the duration for the counter, prefix, suffix, and operator options for the counter. You can also customize the color, alignment, styling and add effects to the element.Counter.png
  6. Countdown - The countdown element allows you to display a countdown on the web page. For example. you can use this option when there is a flash sale, or lightning deal, or timebound offer. Click the Countdown.png icon to customize the countdown options - timer style, edit the date, time, and timezone, and specify whether days, hours, minutes, and seconds should be shown. You can also add text, color options, styling, and effects for the element, along with aligning it.Countdown.gif
  7. Progress - This option lets you add a static progress bar. Click the ProgressIcon.png icon to get the options for the progress bar. You can specify the style, fill, and whether the title and percentage should be displayed here. You can also add text, color options, styling, and effects for the element, along with aligning it. Progress.png
  8. Calendly - Calendly lets you add a Calendly widget to help the user select a date and time. This can be used for setting up appointments and meetings. You can add your Calendly link by editing the link icon, as shown below.Calendly.gif
  9. Carousel - You can add a carousel element to the popup. These are useful when promoting products, new launches, offers, and so on. A carousel element has text, images, and navigation icons to move the slides. You can customize each of the elements in the carousel by clicking on it. Customize the carousel settings by clicking the CarouselIcon.png icon. The following options are available: Autoplay, number of columns in a slide, spacing between columns, navigation icons, spacing of the navigation icons from the column elements, and so on. You can also add color options and styling, and effects to the carousel element in total, apart from the individual elements.Carousel.gif
  10. Tabs - You can add tabs to the popup message using this option. By default, the following are available:
    • A tab element has two tabs.
    • There is an icon in the first tab and a button in the second tab by default.
    • You can customize the tabs by clicking the TabIcon.png icon. The following options are available: tab orientation, tab style, tab spacing, and activating the tab (on hover or on click). You can also add an icon to each tab, edit the name of the tab, and move the tabs back and forth. You can also add color options and styling, and effects to the carousel element in total, apart from the individual elements.Tab.gif
  11. Accordion - You can add accordions to the popup message using this option. By default, two accordions are available. You can customize the accordion by clicking the AccordionIcon.png icon. The following options are available: collapsible, accordion icon, spacing, and size. You can also add color options and styling, and effects to the carousel element in total, apart from the individual elements.Accordion.gif
  12. Switcher - Switcher is similar to tabs. You can switch between two tabs using this option in a manner similar to that of a toggle. To customize the switcher element, click on the Switcher.png icon. You'll get the following options: style, spacing between the options, and the option to add icons. You can also add text, color, styling, and effects to the element.Switcher.gif
  13. Table - You can add a table to the popup using this option. A table element is a combination of text and icon elements. You can customize the table by clicking the TableIcon.png icon . The following options are available: display head, display sidebar, specify the number of rows and columns in the table, and specify the table width. You can add color options, styling, and effects for the table, along with customizing the individual table elements.Table.gif
  14. Timeline - You can add a timeline to the popup with this option. To customize the timeline element, click on the TimelineIcon.png icon. The following options are available: Orientation, style, titles, spacing, adding icons, editing the border of the buttons, and so on. You can also customize the individual elements in the timeline by clicking on them. By default, the timeline element has two tabs and two callouts. The callouts contain an icon and a button each.Timeline.gif

Note: Use the OSM Pro Editor on Google Chrome for optimal performance.

FAQs

  1. What is the optimal aspect ratio for images in the OSM Pro Editor?

    There is no specific ratio for images. You can adjust the height and width using the settings.

  2. How is the percentage scroll calculated?

    In the OSM Pro editor, the full-screen accounts for 100%. As you scroll the page, a backend process continually measures the percentage of the scroll up or down. 

  3. How can you enable custom click tracking?

    MoEngage requires a link to track clicks. By default, clicks on buttons and images (if they have links), form submissions, and the close button are tracked. For buttons without a link, we register a 'close' event. To add click tracking for any other element, add a link to it by clicking the link icon and adding the following code in the custom attributes section. To do so: 

    1. Click on the Settings icon and select the Styling option.
    2. Click the Advanced tab.
    3. Scroll to custom attributes and add the following code snippet:
      JavaScript
      onclick:"MoeOsm.trackClick('1');MoeOsm.dismissMessage();"

    CustomClickTracking.gif

  4. How to turn off the default click tracking for a template?

    To turn off default click tracking, go to the Global Settings for the Template. Click on the Settings icon and select Advanced. Add the following code to the custom attributes section.

    JavaScript
    data-ignore-default-tracking:"true"

    DefaultDataTracking_Off.gif

  5. How do I make an intrusive template non-intrusive?

    You can make an intrusive template non-intrusive by clicking on Scroll Behind Page in the editor options, as illustrated in the following image.

    ScrollBehindPage.gif 
  6. Can we use shortened URLs for screens?

    Shortened URLs are not supported for screens.

  7. What should I do if test campaigns are not working properly?

    If test campaigns are not working properly, whitelist the following URLs:

    1. https://app-cdn.moengage.com/
    2. https://fonts.bunny.net/
  8. How can I make templates responsive?

    You can view your template in mobile and tablet views and ensure that all the elements are in order by clicking the ViewIcon.png icon at the bottom left of the editor screen, as illustrated in the following image. You can edit the template elements to ensure responsiveness.Responsiveness.gif

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

How can we improve this article?