Configure Web Push Settings

Navigate to MoEngage Dashboard: Settings -> Channel -> Push -> Web Push. The following options are available: Web Push Settings and Notification Opt-in Configuration.

Web Push Settings

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

Field Description

Default Push 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.

Screen_Shot_2016-05-16_at_7.22.41_PM.png

Subdomains

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.

subdomains.png

Badge Icon for Android Mobile Push

The badge icon is the app icon available at the top section on the left in the push notifications. This option is currently available only for Android Devices.

BadgeIconForAndroidPush.png

Two options are available for uploading the badge icon for Android mobile push notifications in the MoEngage Dashboard.

      • 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.

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.

MoEngage provides three types of push opt-in:

      • 1-Click Opt-In
      • Two-Step Opt-In
      • Self Handled Opt-in
1-Click Opt-in Two-Step Opt-in Self-Handled Opt-In

The 1-Click Opt-in section has the following options:

Field Description
Opt-In re-appear time  
Hide Moengage Branding  
Show Push Permission Opt-in after  
Use Assistive Overlay to increase opt-ins  
Push Opt-in Preview
(Click on text to edit)
 

1-Click_Opt-in.png

info

Information

For Safari

  • The Show Push Permission Opt-in after value is ignored. 
  • The opt-in is triggered on the click event as against page load.

 

warning

Warning

One-Click Opt-In

  • does not work on newer versions of Microsoft Edge.
  • does not render the Hard-ask completely on Safari when the user clicks any link on the webpage. This is because the opt-in is triggered on the click event as against page load.

Push 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. This is referred to as Opt-in re-appear time as described.

Reapper_Opt_In.png

Hide branding

You can hide the MoEngage logo appearing on Soft Ask and Hard Ask Overlay by checking this box.

HideBranding.png

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

Similar Use Cases
Was this article helpful?
2 out of 11 found this helpful

How can we improve this article?