Configure Web Push Settings
info

Information

We've revamped our dashboard settings. This article describes the steps to configure the Web Push Settings in the revamped settings UI and the older UI.

 

Revamped UI Old UI
  1. Navigate to Settings > Channels > Push > Web Push.
  2. It consists of two sub-sections, Configure and Notification Opt-in.

 

Icons and Sub-domains

Revamped UI Old UI

Configure

You can configure the default push icon, subdomains, and badges to be used for Web Push, as shown in the table below.

Field Description

Default Notification Icon

This field contains the icon that would be used in the Web Push notification. The MoEngage icon is the default icon. You can change this by uploading your Brand’s logo.

Badge Icon for Android Web Push

For Android devices receiving Web Push, the badge icon is the app icon available at the top section on the left in the push notifications. Two options are available for uploading the badge icon:

      • Upload image

        Choose the Upload Image radio button and click the Browse and Upload button to upload the image from your device.

      • Enter Image URL

        Choose the Enter Image URL radio option and type or paste the image URL for the badge icon for your app.

MoEngage supports the following file types to be uploaded for the Badge Icon image: .png, .gif, .webp, .ico, .cur, and .bmp.

Note:

      • Only Alpha Channel (black & white) images are supported.
      • RGB images are not supported.
      • The recommended resolution for the Badge Icon is 72x72 pixels or larger.

Sub-domains

This field denotes the subdomains for your website and has the following options:

      1. Treat each subdomain as a separate entity - If you have multiple sub-domains, they will all be treated as separate entities, and users will be asked for permissions in each one of them.
      2. Track user cross-domain - If you have multiple subdomains and want to use the same Dashboard to track, choose Track user cross-domain.

 

Notification Opt-in Configuration

You can configure the Web Push Opt-In information in this section. Opt-In refers to how push permission is sought from the users on your webpage.

To enable this feature, you must enable the Web Push opt-in under the Notification opt-in tab. 

MoEngage provides three types of push opt-in:

      • Two-Step Opt-In (Recommended)
      • 1-Click Opt-In
      • Self Handled Opt-in
Two-Step Opt-in (Recommended) 1-Click Opt-in Self-Handled Opt-In

The Two Step opt-in is the recommended option as it is a soft ask. Soft ask means the option is displayed multiple times even if the user does not allow it and this will maximize your reachable users.

On the web page, users are asked a "soft ask" that gauges user preference and proceeds to show the main browser permission upon permission. 

The Two Step Opt-in section has the following options:

Field Description
Show Push Permission opt-in after

You can configure the time after which to show the push permission opt-in to the user.

Show Desktop Banner / Mobile Nudge after

You can configure the time after which to show the desktop banner/ mobile nudge to the user.

Opt-In re-appear time In case the users close the opt-in or banner/nudge, you can configure the time after which to show the opt-in again to the user.
Hide Moengage Branding You can hide the MoEngage logo appearing on the soft ask and hard ask. 
Desktop Banner/Mobile Nudge
  • Banner/ Nudge Icon
  • Banner/ Nudge Background Color
  • Banner/ Nudge Text
  • Banner Text Color
  • Allow Button
  • Dismiss Button

 

 

New UI:

Old UI
Two_Step_Opt-in.png

 

info

Note

Caching: All of the above settings take a minimum of 24 hours to reflect on your website. 

Browser Compatibility Matrix

Operating System Browser Web Push Support Onsite Messaging Support
Windows

Internet Explorer

Windows

Google Chrome

Windows

Mozilla Firefox

Windows

Opera/ Opera Neon

Windows

Chromium Edge

Mac OS

Google Chrome

Mac OS

Mozilla Firefox

Mac OS

Opera/ Opera Neon

Mac OS

Chromium Edge

Mac OS

Safari

✅ (macOS 13 or higher)

Android

Google Chrome

Android

Mozilla Firefox

Android

Samsung Internet

Android

UC browser

iOS

Google Chrome

iOS

Safari

✅ (Both iOS and Safari 16.4+)

info

Note

For web push to work on Safari for iOS devices, the following is required:

      • Your website must be a Progressive Website App (PWA).
      • A web app manifest file must be created and linked.
      • The MoEngage service worker file should be imported and placed in the root folder.
      • The PWA must be added to the Home Screen.
      • The user should be prompted for permission to receive web push notifications. We recommend a two-step opt-in process.

For more information, refer to the Web Push Integration Steps for Safari on iOS and iPadOS.

Preview for various OS/Browser combinations

Android Linux Mac Windows iOS
arrow_drop_down Chrome

mceclip2.png

arrow_drop_down Firefox

mceclip3.png

arrow_drop_down Opera

mceclip4.png

arrow_drop_down Edge

android_edge__1_.png

Previous

Next

Was this article helpful?
2 out of 12 found this helpful

How can we improve this article?