Introduction to On-site Messaging

On-site Messaging enables MoEngage end users to show PopUps, Banners, and other such messages on your website. With MoEngage On-site Messaging, create highly contextual campaigns for your website visitors (both Anonymous and Logged In users)

Integration Essentials

Ensure that you are on the default billing plan of MoEngage so that you can target all your website visitors (ones who subscribed for push and ones who did not).

Also, ensure that On-site message SDK has been integrated into the website you want to launch the campaign.  

Where to find On-site Messaging on MoEngage Dashboard?

Once On-site Messaging is enabled for your MoEngage account, you would be able to see this module on the dashboard.

Campaign Creation

From left side menu bar, Navigate to:  Engage -> Campaigns -> Create Campaign -> Onsite Messaging 

Campaign Listing

Navigate to: Campaigns -> All Campaigns Page
On the All Campaigns Page, search for campaign type - "On-site Messaging"

How to create an On-site Messaging Campaign?

After you click the CREATE button for On-site Messaging (Create Campaign -> Onsite Messaging -> On-site Messaging -> CREATE), follow the below steps:

Template Selection

Before you start configuring the campaign, select the type of template you want to use which you can customize completely using our HTML Editor (available in Step 2 of campaign creation).

As of now, we have about 11 out-of-the-box templates for quick use:

These templates can be customized using our editor in Step 2 of campaign creation.

In addition to using our HTML editor to customize these templates, you can completely change/update the HTML code of this template and use something which you have internally developed.

A few templates like Lead Gen and Survey are special templates, and you can read the template-specific docs for more information on these templates.

Step-1: Segmentation

In the first step, you need to define the below fields

Campaign Name

Specify a unique campaign name that has a length of between 5-512 characters.

Platforms

Specify the platforms between web and mobile web which you want to target for this on-site messaging campaign.

Select Trigger Action

Select the trigger action based on which the campaign will be triggered for your users.

• Page Load: There are 3 additional options here As soon as possible: Choose this option if you want to trigger the message as soon as the user has completed page load on your website
  - With a delay of __ sec: Choose this option if you want to trigger the message, 30 seconds after the user has completed page load on your website
  - After scrolling the page by __ %: Choose this option if you want to trigger the message after the user has scrolled a page on your website by 40%.
  
• Custom Event: Choose this option if you want to trigger the message when the user executes a custom event you have tracked on MoEngage. Select a custom event that the user executes on your website. You can also specify additional attribute checks to trigger a message when the user executes an event.
  For example. Trigger a message after the user has executed Purchase where "Brand" is "Brand1"
  
  
  
  
• Exit Intent: Choose this option if you want to trigger a message when the user is trying to exit your website. For more information on Exit Intent Technology, refer to this article.
  

Select Pages

Select the web pages on which you want to show/hide this on-site messaging campaign. By defining rules on the URL, you could choose to only include a certain set of URLs or exclude a certain set of URLs. If you want to show a campaign on all pages irrespective of the URL, you just need to select the All Pages option here -

Select Audience

Select the users who should be included in this segment. There are 2 ways to go about it  

• All Users: Select this option if you want to target all users of your website via this campaign. This option also needs to be selected in case you want to deliver content to first time visitors.
• Custom Filters: Select this option if you want to target specific visitors. You can choose custom filters to define your audience based on User Behavior, User Properties or Custom Segments (pre-defined segments)

Add control groups (optional)

You can also add control groups. A control group is a set of users added to an exclusion list.  These users will not receive the marketing campaign. You can measure the effectiveness of your campaigns by comparing this group with the target group of users who received your campaigns. Read more about control groups. 

Once you have defined the above fields in Step 1 of campaign creation, please click NEXT to move to Step 2.

Step-2: Create View

In the second step, you need to configure the Template or upload your own template (based on the selection on Template Selection Screen before Step-1)

Customize Template Template:

We have used a standard HTML editor to support Template customization in our campaign creation.

You can also upload images or provide an image URL as applicable as shown below - 

For personalizing your text or image URL, you can key in @ in the text box or image URL box and the personalization pop-up will open up where you can define personalization rules. A sample is shown below -

You can also customize the background color of your templates by choosing the container widget and changing the background color as shown below -

For Sticky Banner templates, you can also select the position of the templates by going to Container -> Position. Only the available positions will be listed here. Choose the one as required for your use case.

Few things to note while creating campaigns using your own HTML templates or customizing the HTML code of MoEngage templates.

You can click on the code view button to view the HTML code view and make changes there as required. Please note that you need to select the appropriate template like the top banner, pop-up, or side banner, and then customize the HTML for the best possible usage.

When building your own HTML templates, please note that you need to add the below classes for tracking clicks and for allowing your users to close the template - 

For the close button: Add this CSS class in your templates:   moe-inapp-close
Adding this class is very essential if you want the user to be able to close the template. MoEngage SDK will only close the template if this class is found.
Please note that the template will be closed only based on the moe-inapp-close CSS class. Please do not use custom Javascript functions for closing the templates as it will result in inconsistent behavior.

For tracking clicks: Add this CSS class in your template:  moe-inapp-click
Adding this class is very essential for MoEngage to be able to track clicks and attribute this to a particular campaign.

For closing the template when the user clicks on a CTA or a link, add both the classes: moe-inapp-close and moe-inapp-click to the HTML template. This will ensure that the template is closed after the user is redirected to the URL.

Display Settings

These are advanced display settings that are used to define how the message will be displayed.

For Pop-up templates, below display settings are available -

1. Show this message if another campaign is already displayed on the webpage: This means that if a template is already visible on the website and the user executes another trigger action, we will show this campaign on top.
2. This message will allow the user to scroll through the page: Select this if you want to scroll the contents of your webpage in the background.

For Banner templates, below display settings are available -

1. Show this message if another campaign is already displayed on the webpage:  This means that if a template is already visible on the website and the user executes another trigger action, we will show this campaign on top.
2. Keep this message in place on scroll: This message will continue to be visible even after the user scrolls through the website.
3. This message will push the contents of the page down: Use this option only for Top Banners where you want to push the contents of the page down. This only works when the header on your website is not sticky. 

Test Campaign

To test how the message will be rendered on your website, enter the destination URL where you have already integrated the SDK.
We recommend you test every new campaign on your destination URL so that you can ensure the look and feel of the template. By default test campaigns override Display Settings and Delivery Controls. You also won't be able to test the trigger condition while testing. To test display settings and trigger conditions, publish the campaign for test users. 

Step-3: Scheduling

In the third step of campaign creation, you need to define the campaign schedule, conversion goals, priority, and delivery controls, which will be useful for campaign sending. Here is how to configure these fields.

Delivery Schedule

The following delivery schedule options are available for OSM Campaigns:

Conversion Goals:

Define the conversion goal for your campaigns which will help evaluate the performance of your campaigns. Conversion Tracking works in the same way as other campaign types on the MoEngage dashboard. You can define up to 5 different conversion goals for a single campaign.

Campaign Priority:

Define the priority of your campaign. This priority will be used in case there are multiple campaigns eligible for the same user.

Campaign priority is useful when there are multiple active campaigns on the same trigger action for the same user. The campaign with higher priority will be shown to the user. If two campaigns have the same priority, the recently created campaign will be shown first. 

Delivery Controls:

Delivery Controls are used to control the delivery of messages. Restrictions must be put while delivering on-site messaging to avoid spammy behavior which results in the same message being shown constantly to the same users.

We have below 4 controls in place to handle this -

Maximum times to show the message ever- Define the maximum number of times, the user can see a message from this campaign. Note - Frequency capping will work on the device level and not the user level. This means if your user has been logged on to two devices at once, they will receive the campaign on both devices even if the frequency setting has been set to 1. 

Minimum delay between 2 messages of this campaign - Define the minimum time within which the user will not be shown this message even if the user qualifies for the campaign segment and executes the trigger action.

Ignore global delay between 2 On-site Messaging campaigns - Choose this option if you want this campaign to override the global delay restriction.

Global Delay: This is a global setting that is enforced on all On-site Messaging campaigns. If you have defined Global Delay as 15 minutes then it means that only 1 On-site Messaging campaign can be shown within 15 minutes. 

Auto dismiss message after - Choose this option if you want the message to disappear automatically after 60 seconds.

Turning OFF Delivery Controls will ensure that this campaign is shown every time the user is eligible for the campaign - falls in the segment, satisfies the display settings, and executes the trigger action.