Web Push Notifications – The Complete Guide by Gravitec.net

The Gravitec.net service provides a means for companies to send push notifications from their websites. Over 12,000 websites send notifications using our platform. 

Push notifications Examples and Use Cases

This web push notification tutorial is based on our experience in developing our push service and sending campaigns. 

Here, you will learn how web push notifications work and how companies use them.

What is a Web Push Notification

Web push notifications are brief messages sent from a website to subscribers via browsers. They are also called browser push notifications. Push notifications are used for instant communication with subscribers even when they are not on the website. A notification appears on a subscriber’s device on top of all open windows, if their browser is active. Web push works for both mobile and desktop devices. 

How to send push notifications

What does a web push notification look like

A basic web push notification consists of a title, some text, an image, and a link.

Here is a sample notification, with emoji in the title. 

Additionally, you can use buttons and a big image. This is known as a rich web push. 

Who can use browser push notifications

All browsers support push notifications only for HTTPS websites. However, Gravitec.net enables web push for HTTP-websites as well, through HTTPS-subdomains. So, any website can integrate push technology and send notifications to subscribers.

What is the difference between HTTP and HTTPS?

Among Gravitec.net clients are online stores, media, travel, sports, and financial websites. 

Why use a web push notification

• Simple integration. You can start using push notifications on your website immediately after registering with a push service. It takes about 30 minutes to register and add your website to Gravitec.net.
• High opt-in rate. Subscription to notifications occurs in one or two clicks by website visitors and doesn’t require entering any personal information. The simple process ensures a higher opt-in rate than that of email, by up to 15%.
• Increase in repeat traffic. With browser push notifications, traffic to websites typically increases by 10-15%.
• High Click-Through-Rate (CTR). Notifications, while small, are conspicuously displayed on device screens. This grabs attention and leads to high CTRs. The average CTR is roughly 5-15%.
• Favorable costs. It is less expensive to send web push notification campaigns than to use email marketing or text messaging. With Gravitec.net, if you use the full set of features, you would typically pay $4 per 1,000 subscribers. However, we do have a Free Plan that you can use, which has some limitations. 

Gravitec.net Pricing

How websites use browser push notifications

Here are some examples of how companies use web push.

News websites typically send notifications to inform subscribers about the most important news per hour, day, or week. They get loyal readers, who visit their website regularly. This significantly increases their website traffic.

Bloggers use notifications to alert readers about new posts. They also send messages about old articles, to get new views and comments.

Ecommerce companies use triggered and targeted push campaigns for personal communication with customers. Their main purpose is to sell products. So, they need to convert leads into prospects by educating subscribers, analyzing their behavior, and sending individual offers.

See more push notification examples and use cases.

The main functions of web push

Push notifications:

1. Inform subscribers about the latest news immediately after they are published on a website.
2. Increase website traffic. Subscribers open your website each time they click on a notification.
3. Boost conversion rate. The best conversion rates are achieved through targeted campaigns focused on subscriber interest.
4. Educate subscribers about your company. Each notification tells subscribers something new about your company, and/or your products/services.
5. Keep subscribers engaged in communication. Even if they don’t open a notification, they typically read your message. So, they are aware of your updates.

Find TOP-10 push notification benefits here.

Types of web push messages

Here are the main types of web push defined by their content:

1. Informative – alert subscribers about news, company updates, new articles on a website, etc.
2. Promotional – promote products, notify subscribers about sales,  discounts, personal offers
3. Service – provide support after purchase, notify about the delivery of a product, warn about technical issues, etc.

Notifications can be sent to all subscribers, to a subscriber segment, or to individuals.

Typically, companies send informative notifications to all subscribers. News websites, by filtering subscribers by region, send them the news that is only relevant for their city or country.

Promotional messages are often sent to a subscriber group that is filtered by some interest. For example, if some subscribers visited a sports category on your website, they are more likely to prefer offers on sports equipment. So, a company creates a campaign specifically for this group. These are known as targeted push notifications.

In the Gravitec.net platform, to send targeted campaigns, our clients use segmentation features. This allows segmenting subscribers by interest, region, or user devices. 

An individual web push message is typically triggered by some action by a subscriber. For instance, a triggered notification can be sent after a subscriber makes a purchase. 

How do push notifications work

Web push technology operates through a chain of three devices. 

1. User Device – with an active browser (Client)
2. Your Server – server where subscription data is stored
3. Web Push Notification Service – it is important to understand that a browser is a client-server application. And, each browser (Server) has its own service for sending messages. The service that Chrome uses is Firebase Cloud Messaging.

When a website visitor subscribes to notifications, their browser sends information to your server, so that you can send them web push messages. The JavaScript and UI do this job if web push technology is installed on your website.

When you send a notification, your server connects to a Web Push Service via an API call. The Push Service receives your request and defines an appropriate browser to send your message.

After that, the Push Service will keep your message on its server until a subscriber’s browser comes online, or until the message has expired. 

A push message reaches a subscriber’s device as long as the browser is running. The “service worker”, which is a JavaScript file that runs on the user’s browser, enables receipt of a web push regardless of whether or not the web page is open.

For more details on how web push notifications work, read the Google developer guide.

Which browsers and OS support web push

Push technology works on all popular browsers: Chrome, Opera, Firefox, Safari, Edge on Windows, macOS, and Android. Currently, iOS doesn’t support web push notifications.

(Note: According to our  web push statistics, the vast majority of subscribers of Gravitec.net clients use Chrome.)

For each browser and operating system, notifications are displayed differently. For example, for Chrome running on Windows, web push notifications are displayed above the taskbar. On Android, notifications appear in the notification tray. 

In the Gravitec.net dashboard, when you create a message, you can see previews of your notification for any browser and OS.

Opt-in process

To subscribe to push notifications on a website, a visitor has to click “Allow” in a permission request.

There are two options for websites on how to get subscriptions. 

• Single opt-in – a permission request from the browser is displayed. To subscribe, the visitor needs to click “Allow” once.
• Double opt-in – a pre-permission prompt is received directly from the website. Once the visitor confirms this request, a second request is displayed from their browser (as in Single opt-in). So, a second click is needed to subscribe. 

Which option should you choose for your website?

Since Chrome released Quieter UI in March 2020, Gravitec.net recommends using pre-permission prompts. Quieter UI blocks browser permission requests on websites that have a high rate of permission rejects. By using a pre-permission prompt, your chances of triggering the Quieter UI are greatly reduced. 

In the Gravitec.net account, you can set the ready-made prompt. Click “Prompt & Bell” in the main menu. In the tab “Permission Prompt” enter your text for the prompt fields, choose where it will be located on the screen, and the appearance for desktop and mobile devices.

Opt-out process

There are many options for subscribers to subsequently block web push notifications. For some browsers, they can do it directly in the settings of a notification. For any browser, a subscriber can opt-out in browser settings.

Learn how to opt-out from notifications in Chrome and Firefox.

Subscribers opt out for different reasons. Sometimes, after they make a purchase from a website, they don’t feel the need for any more notifications. But, some opt-outs are triggered by the actions of marketers. For example, when they send messages too frequently. 

Here are some tips on how to reduce the unsubscribe rate:

• Use a double-click permission prompt
• Send messages that adhere to subscriber interest
• Don’t send notifications too often
• Vary the content of notifications

Learn more about the web push the unsubscribe rate.

How to install push notifications on your website

We’ve briefly described how web push technology works. In fact, if a company wants to build its own push platform, they need to develop the software, test it, and maintain the system in conjunction with browser updates. Hence, many companies choose a push service provider to send web push notifications via a ready-made platform.

To install web push on your website using the Gravitec.net platform, you need to:

1. Register
2. Add your website to our system
3. Add the code and SDK files to your website
4. Verify integration by subscribing to push notifications on your home page.

If your website is WordPress-based, integration occurs via installing the Gravitec.net WordPress plugin. In this case, you need to:

1. Install the Gravitec.net plugin from your WordPress dashboard
2. In plugin settings, click on “Create an account in 1 click”. The Gravitec.net website will be opened in a new window.
3. Add your website and click “Get started”
4. You will receive a confirmation email, which allows you to set the password for your account
5. Verify integration by subscribing to notifications on your website

Learn more about how to use our push notification plugin.

The main features of web push services

Before choosing a push service provider for your website, check if it has the following list of features:

•       Subscription Statistics
•       Campaign Reports
•       Automation
•       Segmentation
•       Rich Web Push
•       Campaign scheduling 
•       REST API
•       Customer Support

Also, check to make sure that the platform at least supports the most popular browsers (Chrome, Firefox, Safari).

Check the Privacy Policy of a push provider to see how they make use of subscription data. Hopefully, they only use it for sending notifications. Here is the Gravitec.net Privacy Policy.

How to send a web push campaign

Each web push service allows you to create and send campaigns. The easier it is to use, the less time you spend doing it.

Here are instructions for how to manually send a standard notification in Gravitec.net:

1. Register and add your website to Gravitec.net
2. Click “Create Campaign” in the main menu
3. Enter a title and text. Add the URL of your landing page
4. Upload an icon or use the default one that is pulled from your webpage by the system
5. Preview your notification in different browsers and OS.
6. When everything looks acceptable, scroll down and click “Send Campaign” at the bottom of the screen.

The campaign will then be sent to all your subscribers immediately.

Read more on how to create a push campaign.

If you wish to send a campaign at a specific time, “Create campaign” has additional fields that allow you to set time for the campaign to be sent.  

To send a rich web push, click “Rich notification (Image & Buttons)”.

To send notifications to a segment of subscribers, click “Targeting” on the same page.

Alternatively, to speed up campaign creation:

•       Send campaigns from RSS Feed
•       Use Gravitec.net Chrome Extension
•       Use Automations – RSS to Push, Drip Campaigns, Push Digest

Read how media websites send web push notifications.

How to get the best results from your campaigns

The main push notification metrics are:

•       Opt-in / Opt-out Rates
•       Sent notifications (%)
•       Delivered notifications (%)
•       Opened notifications (%)
•       CTR (Click Through Rate)

CTR is the ratio of opened notifications to sent notifications.

Here, we find out how to get the best CTRs for your push campaigns.

1. Use different tactics when composing your title and text. For example, information that is clear at first glance is a good way to notify target subscribers about discounts. On the other hand, notifications that intrigue subscribers make them open a web push for more details.
2. When choosing images, use a mixture of Standard and Rich Web Push. A variety of content increases subscriber interest. Learn how to utilize images to get the best results.
3. Use Call-To-Action buttons
4. Send Targeted Notifications if you want to reach a certain subscriber group. Targeted campaigns typically result in higher CTRs than standard ones for all subscribers.
5. Send a series of notifications for new subscribers to educate them about your product. In Gravitec.net, it can be done by using the automated  “Drip Campaigns”.
6. Get familiar with the optimal frequency of sending notifications
7. Schedule your campaigns according to the times when your subscribers are most active. Read about push notification time settings.
8. Notify subscribers of your new posts immediately after they are published on your website. In Gravitec.net, you can do this using the “RSS to Push” Automation.

Conclusion

• Web push notifications are small messages that websites send to their subscribers to inform them about their latest news, or offers.
• Their main goals are to encourage subscribers to return to your website and educate them about your products.
• According to Gravitec.net client statistics, browser notifications increase website traffic by 10-15%.
• The technology is most popular among media and e-commerce websites.
• It facilitates instant interaction with subscribers, re-engaging them, and boosting conversion rates.
• Opt-in occurs with one or two clicks on a permission prompt that appears on your website.
• To opt-out, a subscriber needs to block notifications in browser settings.
• Typically, companies use third-party web push services to send notifications.
• It takes 30 minutes to add web push notifications to your website via the Gravitec.net service.
• TOP features of push services are Campaign Reports and Subscription Statistics, Automation and Segmentation, Scheduling of campaigns, and the Rich Web Push.
• You can send informative, promotional, or service notifications to all subscribers, to a certain subscriber group, or to an individual.
• With Gravitec.net, you can send campaigns manually or automatically.
• To get the best CTRs for your campaigns, mix Standard and Rich Web Push notifications, use CTA buttons, and creatively compose your title and text. Segment your subscribers by interest and send targeted campaigns. Use a series of notifications to educate new subscribers about your product.

If you have any questions about web push notifications, please contact the Gravitec.net Support Team.