Configure and Integrate On-site Messaging

On-site Messaging Campaigns allow you to show personalized pop-ups and non-intrusive banners on your website.

Web SDK integration for On-site Messaging will automatically start working on all the pages where the web SDK is integrated.

For more information, refer to Web SDK Integration.

Disabling On-site Messaging

info	Note Optional step for On-Site messaging

If you want to disable On-site Messaging on a few pages or all pages of your website, you need to add disable_onsite: true on the pages wherever MoEngage Web SDK is active as described:

Moengage = moe({
  app_id: "XXXXXXXXXXXX",
  debug_logs: 0,
  disable_onsite: true
});

Callback to On-site messaging events

window.addEventListener('MOE_AUTOMATED_EVENTS', function (event) {
    if (event.detail.name === 'MOE_ONSITE_MESSAGE_SHOWN' && event.detail.data && event.detail.data.length) {
      //do some processing on event.detail.data
    }
});

In the above example, we have event.detail.name = 'MOE_ONSITE_MESSAGE_SHOWN'. Similarly, we provide callbacks to other On-site messaging events

event.detail.name	description
MOE_ONSITE_MESSAGE_SHOWN	On-site message is shown to the user
MOE_ONSITE_MESSAGE_CLICKED	User clicks on the element on which `moe-inapp-click` class is present
MOE_ONSITE_MESSAGE_DISMISSED	User clicks on the element on which `moe-inapp-close` class is present
MOE_ONSITE_MESSAGE_AUTO_DISMISS	The On-site message is auto-closed after the time configured while creating the On-site messaging campaign

Here is a sample of event.detail.data when event.detail.name = 'MOE_ONSITE_MESSAGE_SHOWN'

  [
    {
      "key": "campaign_id",
      "value": < the campaign ID >
    },
    {
      "key": "campaign_name",
      "value": < the campaign name >
    },
    {
      "key": "type",
      "value": "onsite" //this is fixed value
    },
    {
      "key": "templateType",
      "value": "POP_UP" //just an example, the templateType can be POP_UP, SELF_HANDLED or BANNER according to the type of template you had chosen for your campaign 
    },
    {
      "key": "cid",
      "value": "643e2a69dcb2c753d3a1b8a3_F_T_ON_AB_1_P_0_L_0" //just an example, this is an extension of the campaign ID
    },
    {
      "key": "moe_locale_name",
      "value": "Default" //just an example
    },
    {
      "key": "moe_locale_id",
      "value": "0" //just an example
    },
    {
      "key": "moe_variation_id",
      "value": "1" //just an example
    },
    {
      "key": "moe_logged_in_status",
      "value": false //just an example, tells us if the user is a logged-in user 
    },
    {
      "key": "moe_first_visit",
      "value": true //just an example
    },
    {
      "key": "URL",
      "value": < the url of the page on which the On-site message is shown >
    }
  ]

event.detail.data of other On-site messaging events (eg: for MOE_ONSITE_MESSAGE_DISMISSED) will have similar (not identical) payload. You can check the data by logging it to the console: console.log(event.detail.data)

Troubleshooting

Sticky Banner type campaign is overlapping the website header.

Sticky banner type campaign has fixed position with top: 0. So if your website also has any fixed position element with top: 0, then it will overlap. This is the tech limitation and should be handled by your end.

Solution:

You can update the position of you fixed position element as soon as the OSM template is displayed from Moengage. Use this:

window.addEventListener('MOE_AUTOMATED_EVENTS', function (event) {
    if (event.detail.name === 'MOE_ONSITE_MESSAGE_SHOWN' && event.detail.data && event.detail.data.length) {
      const campaign = event.detail.data.find(item => item.key === "campaign_id");
      if (campaign && campaign.value === < your campaign ID > ) {
        //perform your action here
      }
    }
});

On-site messaging campaign is not displayed.

Verify the following:

Check if the Trigger Action condition is matching or not
If you have Selected Pages for onsite messaging, then check whether the URL is matching or not
Check the segmentation of the Audience is matching or not.
Check the platform (Web or Mobile Web) is appropriately selected.

Reach out to us directly from your MoEngage Dashbaord -> Need Help? -> Contact Support or send an email to support@moengage.com.