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:
A Large Safari Style Box optin:
A Bell-placed bar optin:
A Large Safari Box with Segments:
A Floating Bar optin:
Or the simple Single Step optin:
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.
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:
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:
- How to Customize a Safari Style Push Notification Optin
- How to Customize a Large Safari Style Box Opt-in
- How to Customize a Bell Placed Bar
- How to Customize a Large Safari Style With Segments
- How to Customize a Floating Bar Push Notifications Optin
- How to Customize a Single Step Push Notification Optin
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:
Then, check the preview on the right side of the dashboard for different placements.
Top Left placement:
Top Right placement:
Top Center placement:
Next, you should change the colors to match the color scheme of your website. Select Background Color for the optin:
And while you’re at it, select a color for the call to action button or Allow Button for your optin:
You can even customize the Block Button:
When you’re done, save your changes and you’ll be able to see the preview in your dashboard.
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.
- Optin Delay Time: This setting will show the subscription popup after some delay on your site.
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:
Check the preview on the right side of the dashboard.
Here’s what you’d see for the Bottom Placement:
And for the Top Placement:
Again, you can change the Background Color:
The Allow Button:
And the Block Button:
Save the changes and check the preview on the right side of the dashboard.
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 Branding : You can turn off “Powered by PushEngage”, by turning off the Toggle Button.
- Optin delay Time: This setting will show the subscription popup after some delay on your site.
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:
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.
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.
You can also change the text style for the buttons as well. Click on the text to change the text color, and size.
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
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:
Or bottom left of the page both for mobile and desktop.
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:
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.
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:
Or at the top of your screen:
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:
Or at the bottom left:
You can also change the background and bell colors:
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:
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.
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.
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:
- 7 Smart Strategies to Boost Customer Engagement
- 8 Trigger Push Notification Campaigns To Increase Your eCommerce Conversions
- How to Convert Subscribers To Buyers – Using Web Push Notification
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!