How to Configure Web Push Notification Optin for Mobile & Desktop?

Do you want to configure web push optin for mobile & desktop? We will show the complete steps to configure web push optin. You can have different optin style for desktop and mobile. In this article we will show you the complete setup.

Push Notification is a permission-based service. The first step in implementing a browser push notification is to seek the permission of the user to send him a push notification. With Subscription Dialog Box or Optin box, we ask the users permission. With the right configuration, you can see an increase in your push notification optin rate.

There are two types of push notification optin:

  • Single Step Optin: Users can subscribe to push notification in a single click. It doesn’t allow any customization. The copy is browser default.
  • Two-Step Optin: In this user has to click twice to subscribe. You can customize from design to copy in two-step optin

You can customize the push notification optin for your site from your PushEngage dashboard. You can change the placement of the optin pop-up and the color of the text or background both for desktop and mobile depending on your site to decide which one works best for you.

Another important thing in subscription optin is the Notification Overlay. It gives additional space to show the visitor the benefits of subscribing to your push notifications. In case of single step optin, this Notification Overlay becomes very crucial. Since, you cannot edit the optin copy, so mention the reasons to subscribe to your push notification in the overlay.

Configuring push notification optin is very simple. In this article, you will find all the necessary information related to optin configuration. Once this is done, user can subscribe to your push notifications and you can send a Push Message to your subscriber.

How to Select Push Notification Optin

Step 1 –

Navigate to Settings > Subscription Settings > Subscription Dialog Box from your PushEngage Dashboard.

types of push subscription opt-in

Step 2 –

Select the site type as HTTP or HTTPS depending on your site.

For HTTP site, the link will look like this –

PushEngage Web Push Notification

For HTTPS website, the link will look like this –

PushEngage Web Push Notification

Step 3 –

Select a Subscription Dialog Box type from the options given and click on Edit

editing push subscription opt-in

Step 4 –  

Here you can customize the Subscription Dialog Box for both Desktop and Mobile and look the preview once it’s done.

Types of Web Push Notification Subscription Optin And How To Configure

Safari Style Box

For Desktop

  • Change Placement – You can decide where you wish to show the optin on your website or the placement of your optin from the options given in the dropdown. Click on Placement and select any one of the options mentioned –
    • Top Center
    • Top Left
    • Top Right
PushEngage Web Push Notification

Check the preview on the right side of the dashboard.

PushEngage Web Push Notification

Placement – Top Center

Placement – Top Left

How to configure push notification opt-in?

Placement – Top Right

  • Background Color- Select Background color for the optin from the options mentioned or enter the hex code.
PushEngage Web Push Notification

Background color (for optin)

  • Allow Button – Select the color for the Allow Button or enter the hex code.
PushEngage Web Push Notification

Background color – Allow Button

  • Block Button – Select the color for the Allow Button or enter the hex code.
PushEngage Web Push Notification

Background color – Block Button

      Save the changes and check the preview on the right side of the dashboard.

Once you’ve customized the style you can click next or go to Options directly.

Options :

Here you can decide whether you want to show Subscription Dialogue box on your website or not (that is when the user visits the website via desktop), show PushEngage Branding, and optin delay time.

  • Subscription Popup – The setting can turn on or off your subscription showing on your site. If you turn the toggle button off, visitors will not get the optin for the subscription.
  • PushEngage Branding – You can turn off “Powered by PushEngage”, by turning off the Toggle Button.
PushEngage Web Push Notification

Once done save the changes and check the preview on the right side of the dashboard.

When PushEngage Branding is Off

When PushEngage Branding is On

  • Quick Install – You need to do this setting only if you have an HTTPS site. Being an HTTPS site one needs to do an extra step to complete the installation. It means placing the files in the root directory such that the links are accessible –

                 www.your_site_name.com/mnifest.json

                 www.your_site_name.com/service-worker.js

But if you don’t have access to the root directory you can do it by using Quick Install. To do so turn ON the toggle button for Quick Install and save the changes.

PushEngage web push notifications
  • Optin delay Time – This setting will show the subscription popup after some delay on your site.
PushEngage web push notifications

Optin Delay Time

Once it is done save the changes and click Next or go to Mobile.

For Mobile

In mobile also you can change the style and options. Here’s how to do it –

Style:

  • Change Placement – You can decide where you wish to show the optin on your website or the placement of your optin from the option given in the dropdown. Click on Placement and select any one of the options mentioned that is –
    • Top
    • Bottom
PushEngage web push notifications

Check the preview on the right side of the dashboard.

PushEngage web push notifications
PushEngage web push notifications

Placement – Top and Bottom

  • Background Color –  Select Background color for the optin or enter the hex code.
PushEngage web push notifications
  • Allow Button – Select Background color for the Allow Button or enter the hex code.
PushEngage web push notifications
  • Block Button – Select Background color for the Block Button or enter the hex code.
PushEngage web push notifications

Save the changes and check the preview on the right side of the dashboard.

PushEngage web push notifications

Options :

Here you can change Subscription Dialogue box settings whether to show it on your website or not (that is when the user visits the website using a desktop), PushEngage Branding, and optin delay time.

  • Subscription Popup – The setting can turn on or off your subscription showing on your site. If you turn the toggle button off, visitors will not get the optin for the subscription.
PushEngage web push notifications
  •  PushEngage Branding – You can turn off “Powered by PushEngage”, by turning off the Toggle Button.
PushEngage web push notifications

Check the Preview on the right side of the dashboard.

PushEngage web push notifications
PushEngage web push notifications

 With and Without PushEngage Branding

  • Optin delay Time – This setting will show the subscription popup after some delay on your site.
PushEngage web push notifications

Once it is done save the changes and click Next or go to Intermediate Page.

Intermediate Page

This page is used to confirm the subscription or in other words to complete the subscription. You get this popup or 2nd optin because the 1st optin is a custom popup and another is browser default (native optin). So to complete the subscription one has to click ALLOW twice.

How To Customize Intermediate Page?

You can change the background color and the text of the intermediate page. Here’s how to do it –

  • Background Color – Select Background color for the optin or enter the hex code.
PushEngage web push notifications

Intermediate Page- Background Color

Once it is done, check the preview on the right side of the dashboard and save the changes.

PushEngage web push notifications
  • How To Change Text, font size and font style, and color?

Select the highlighted area and change the text inside the box.

PushEngage web push notifications

If you wish to change the text color and size then select the text and then you can change text color, highlight it and increase the text size as well.

PushEngage web push notifications

You can also change the text style for Buttons as well. Click on the text and then change the text color, and size.

PushEngage web push notifications

You can have a different style for all three that is for desktop, mobile, and the intermediate page.

Once it is done, save the changes.

Large Safari Style Box

This appears in the center of the page both for mobile and desktop and as it is customized popup, it’s a double step subscription. Here the user has to click ALLOW twice (in customized optin and intermediate page) to complete the subscription.

Style:

  • Placement – You can place this optin only at the center of the page both for mobile and desktop     

For Desktop

  1. Once done save the changes, and check the preview on the right side of the dashboard. Large Safari Style – For Mobile
  2. Background Color
  3. Allow Button
  4. Block Button

Option:

  1. Subscription Popup
  2. PushEngage Branding
  3. Quick Install
  4. Optin Delay

Intermediate Page

Settings for the above are the same as mentioned in Step 4.

Get Funnel Analytics

Bell Placed Bar

This appears at the bottom right or left of the page both for mobile and desktop and as it is customized popup, it’s a double step subscription. Here the user has to click ALLOW twice (in the customized optin and intermediate page) to complete the subscription.

Style:

  1. Placement – You can place this optin only at the bottom right or left of the page both for mobile and desktop. Once it is done save the changes and check the preview on the right side of the dashboard.
  2. Background Color
  3. Allow Button
  4. Block Button

Option:

  1. Subscription Popup
  2. PushEngage Branding
  3. Quick Install
  4. Optin Delay

Intermediate Page

Settings for the above are the same as mentioned in Step 4.

Large Safari Style With Segment

This appears in the centre of the page both for mobile and desktop and as it is customized popup, it’s a double step subscription. Here the user has to click ALLOW twice (in the customized optin and intermediate page) to complete the subscription.

This optin is also user-driven because here the user decides what notification he would like to receive. Here, if he clicks on option A he will be automatically added to that segment and vice versa.

Style:

  1. Placement – You can place this optin only at the centre of the page both for mobile and desktop. 
  2. Background Color
  3. Allow Button
  4. Block Button

Once it is done, save the changes and check the preview on the right side of the dashboard

Option:

  1. Subscription Popup
  2. PushEngage Branding
  3. Quick Install
  4. Optin Delay

Intermediate Page

Settings for the above are the same as mentioned in Step 4.

Floating Bar

This appears in the bottom or at the top of the page both for mobile and desktop and as it is customized popup, it’s a double step subscription. Here the user has to click ALLOW twice (in the customized optin and intermediate page) to complete the subscription.

Style:

  1. Placement – You can place this optin only at the top or at the bottom of the page both for mobile and desktop.   
  2. Background Color
  3. Allow Optin
  4. Block Optin

Option:

  1. Subscription Popup
  2. PushEngage Branding
  3. Quick Install
  4. Optin Delay

Intermediate Page

Settings for the above are the same as mentioned in Step 4.

Location + Push Single Step Optin with Location

This appears in the left corner of the page for desktop and at the bottom for mobile devices. As it is native optin so no customization can be done here.

One can only set optin delay and as it single-step optin, the user is not redirected to Intermediate Page after clicking ALLOW.

Style:

  1. Placement – Optin appears on the top left corner on the desktop and at the bottom on mobiles.
PushEngage web push notification
PushEngage web push notification

Once it is done save the changes, and check the preview on the right side of the dashboard.

PushEngage web push notification
push notification opt-in in mobile

Options:

  1. Subscription Popup
  2. Optin Delay
PushEngage web push notification
PushEngage web push notification

Once it is done save the changes.

Location + Push Single Step optin with Location

This appears in the left corner of the page for desktop and at the bottom for mobile devices. As it is native optin, no customization can be done here.

One can only set optin delay in single-step optin style. The user is not redirected to Intermediate Page after clicking ALLOW.

Style:

Placement – Optin appears on the top left corner on the desktop and at the bottom on mobiles.

location in push opt-in in mobile
location in push opt-in in desktop

Once it is done save the changes, and check the preview on the right side of the dashboard.

PushEngage web push notification
PushEngage web push notification

Options:

  1. Subscription Popup
  2. Optin Delay
PushEngage web push notification
PushEngage web push notification

Once it is done, save the changes.

Here’s the list of push notification optin that supports HTTP and HTTPS site –

[table id=6 /]

Check the video for a complete understanding of the New Push Optin Settings:

In case you want an easy way for subscribers to unsubscribe from your push notifications, you can enable easy unsubscription options for web push subscribers as well.

Get funnel Analytics

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Engage and Retain Visitors AfterThey’ve Left Your Website

Increase the value of every web visit with Push Notifications that are hard to miss.

  • Forever Free Plan
  • Easy Setup
  • 5 Star Support