Style Your Push Notification Optin

How to Style Your Push Notification Optin for Mobile & Desktop

Looking for a great way to style your push notification opt-ins?

Push notifications are a great tool to increase your repeat traffic, engagement, and sales. So, you’ll want to increase your opt-in rates as much as possible.

In this article, we’ll show you how you can style your push notification optins for both mobile and desktop.

Let’s dive in.

Types of Push Notification Optins

There are two basic types of push notification optin:

  • Single Step Optin: Users can subscribe to push notification in a single click. It doesn’t allow any customization and uses only system default styles.
  • Two-Step Optin: For two-step optins, the user has to click twice to subscribe. but the upside is that you can customize everything from design to copy.

But you should know that there’s a bunch of different optin subcategories.

Mainly, we’ll see a bunch of variants in two-step optins as single-step optins aren’t really customizable.

You can choose to use a Safari-style optin:

Safari Style Optin Center Placement

A Large Safari Style Box optin:

Large Safari Opt-In Example

A Bell-placed bar optin:

Bell placed bar bottom left

A Large Safari Box with Segments:

Push Notification Opt-In with Segments

A Floating Bar optin:

Floating Bar optin

Or the simple Single Step optin:

Single Step Opt-In

If you’re not sure which one you should go for, keep reading. We’ll talk about some of the customizable features for each optin type later in this article.

The cool part is…

You can customize whatever push notification optin you choose for your site directly from your PushEngage dashboard.

And if you’re feeling fancy, you can even change the placement of the optin popup. Everything about the optin is completely customizable including the color of the text or background both for desktop and mobile.

Another important element in subscription optin is the Notification Overlay.

Push Notification Opt-In Overlay

An overlay gives you additional space to explain the benefits of subscribing to your push notifications. For a single-step optin, your Notification Overlay becomes very crucial because you can’t edit the optin copy.

How to Style Your Push Notification Optin

In your PushEngage dashboard, head over to Settings » Subscription Settings » Subscription Dialog Box and select a type of subscription optin to customize:

PushEngage Installation Settings

We’re going to talk about what’s different in each optin when we get styling each push notification optin. If you’re completely new to push notification optins, we recommend reading the entire article and deciding what kind of optin is right for your site.

But if you’re already familiar with different types of push notification optins, you should jump to the kind of optin that you want to style:

Let’s take a look at each type of optin and how you can customize them.

How to Customize a Safari Style Push Notification Opt-in

Let’s start things off with customizing your Safari-style push notification opt-ins for desktops. A Safari-style optin is a popup that looks like a standard Safari popup. Only, if you create a Safari-style push notification optin, your site visitors will see the Safari style no matter what browser they use. And it has nothing to do with the Operating System their device is running on.

So, you’re not restricted to just the Apple ecosystem. The styles simply get carried forward no matter what browser or Operating System your subscribers have.

The first feature your should know about is the placement of your optin on the screen. 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.

Customizing the Style

Click on Style » Placement and select any one of the options:

PushEngage Web Push Notification

Then, check the preview on the right side of the dashboard for different placements.

Top Left placement:

Top Right optin placement

Top Right placement:

Top Left optin placement

Top Center placement:

Safari Style Optin Center Placement

Next, you should change the colors to match the color scheme of your website. Select Background Color for the optin:

PushEngage Web Push Notification

And while you’re at it, select a color for the call to action button or Allow Button for your optin:

PushEngage Web Push Notification

You can even customize the Block Button:

PushEngage Web Push Notification

When you’re done, save your changes and you’ll be able to see the preview in your dashboard.

Safari style optin example

Of course, you should use your own brand colors. It makes for a more simple, consistent experience for your website visitors.

Customizing the Subscription Options

From the Subscription Options, you can activate or deactivate the Subscription Dialog box on your website. Another cool setting here is that you can set the time delay before the subscription box shows up on your site.

You can also choose to show the PushEngage branding or not.

  • 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.
  • Quick Install: You need to do this setting only if you have an HTTPS site.

NOTE: For an HTTPS site, you need to place the service worker file and the manifest file in your server’s root folder. 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

Once it is done save the changes and click Next or go to Mobile to configure your optin for mobile devices.

Customizing the Optin for Mobile Devices

Under the Mobile tab, you can change the style and options for mobile devices.

As with desktop devices, you can place your optin in multiple ways. Since the screens for mobile devices are typically much smaller, you only get two placement options:

PushEngage web push notifications

Check the preview on the right side of the dashboard.

Here’s what you’d see for the Bottom Placement:

Safari Style Optin Bottom Placement

And for the Top Placement:

Safari Style Optin Top Placement

Again, you can change the Background Color:

PushEngage web push notifications

The Allow Button:

PushEngage web push notifications

And the Block Button:

PushEngage web push notifications

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

PushEngage web push notifications

Again, best go with your own style!

Under Options, you can change Subscription Dialogue box settings, PushEngage branding, and optin delay time.

  • Subscription Popup: The setting can turn on or off your subscription optin 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
  • 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.

Customizing the Intermediate Page

The Intermediate Page is used to confirm and complete the subscription. For a two-step opt-in, the intermediate page is where you get the second opt-in.

In simpler words, your website visitors have to click on Allow a second time to confirm their subscription.

For the intermediate page, you can customize the Background Color:

PushEngage web push notifications

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

Customizing the Optin Text and Font

You can also change the text and font styles for your optin using the live editor. Select the highlighted area and change the text inside the box.

Customizing optin text

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.

Changing Font Styles for Optin

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

Customizing Optin Button Text

You can have a different style for desktop, mobile, and intermediate pages.

Once it is done, save the changes.

How to Customize a Large Safari Style Box Opt-in

A Large Safari Style box appears in the center of the page both for mobile and desktop. And it’s a two-step optin. so, you can customize a lot about this sort of optin as well.

Customizing the Style

Before we get into what you can customize about your Large Safari Style Optin, let’s take a look at what you can’t customize. You only get a single placement option for this type of optin because of its size.

But as with a regular Safari-style optin, you can customize its:

  • Background Color
  • Allow Button Color
  • Block Button Color
Large Safari style opt-in desktop styles

And you can customize the text and font options using the live editor as well. The rest of the customization options are exactly the same as the regular Safari optin including the optin display settings and the intermediate page.

How to Customize a Bell Placed Bar

A bell placed bar appears at the bottom right or left of the page both for mobile and desktop. It’s a customizable, two-step optin with the same customization options as a Large Safari-style optin box. And it’s exactly what it sounds like. It’s a bar with a notification bell on it where your web visitors would have to click to subscribe.

Customizing a Bell Placed Bar Opt-in

As we said, you can only place this optin at the bottom right:

Bell placed bar bottom right

Or bottom left of the page both for mobile and desktop.

Bell placed bar bottom left

In that sense, it’s only slightly different from a Large Safari-style box. In terms of styles, you can change the colors for the bell and the background for the bell placed bar:

Bell Placed bar styles

The rest of the settings are exactly the same as the Safari-style options.

How to Customize a Large Safari Style With Segments

A Large Safari Style Box with Segments is exactly what it sounds like. It’s a Large Safari optin with options to segment your subscribers automatically.

Push Notification Opt-In with Segments

Creating segments for your push notification subscribers can help you personalize your campaigns a lot. If you have a website or blog with diverse content and you know your highest traffic sources already, you should try using a Large Safari Style Box with segments.

This type of optin is user-driven because the user decides what kind of notifications they would like to receive.

How to Style a Large Safari Box with Segments

You get the same styling options with a Large Safari style box with or without segments. As with any Large Safari box optin, you get only one placement option in the center for mobile devices:

And for desktops:

The other customization options including the ones for the intermediate page are exactly the same as the other optins.

How to Customize a Floating Bar Push Notifications Optin

A floating bar optin appears at the bottom or at the top of the page both for mobile and desktop. Again, it’s a two-step optin with an intermediate page. So, you can customize a lot of it.

How to Style a Floating Bar

A floating bar optin is pretty similar to a bell placed bar optin. So, the styling options are also fairly similar. The major difference is that you get optin copy and buttons like any other two-step optin.

You can place them at the bottom of your screen:

Floating Bar optin

Or at the top of your screen:

Floating Bar optin top placement

And then, you can customize the rest of the optin in the same way as any other optin. This includes background colors, button colors, any text in the entire optin, the intermediate page, and display options.

How to Customize a Single Step Push Notification Optin

Simple answer: You can’t.

A single-step push notification optin can’t be customized because it uses system defaults to create a popup. What you can customize is the bell icon that comes along with your optin.

You can place the bell for the single-step notification on the bottom right:

Single step optin bottom right

Or at the bottom left:

single step optin bottom left

You can also change the background and bell colors:

Bell configuration for single step optin

Keep in mind, this is all for the desktop version only. The mobile version only has system defaults and you can’t change the placement either.

The mobile version of your single-step push notification options would look like this:

Single step mobile optin

In terms of optin settings, you can set a delay for the optin to show up. And you can change the cookie duration to remember if someone declined to opt for your push notifications.

single step optin settings

For the desktop version, you can also edit the hover text for the subscription bell icon.

And that’s really all you can do with single-step options. We recommend that you get started with single-step options at first to boost your subscription rates.

If you’re just getting started with push notifications, building a list will be a higher priority for your business. Over time, you can switch to two-step options that are more customizable.

Wrapping Up

That’s all for this one, folks!

Let us know if this article helped. Customizing the push notification optins on your site can help you convert your traffic into push subscribers and genuine business leads on autopilot.

Not convinced? Check out these resources:

We recommend using PushEngage to create your push notification campaigns. PushEngage is the #1 push notification software in the world. So, if you haven’t already, get started with PushEngage today!

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