How to create a Web push notification?

Web push notifications allow you to reach contacts in a completely new way. They will display your notification using the browser of a person that agreed to the notifications. That person doesn’t need to be a subscriber to receive them.

Push notifications are a free feature that can influence your conversions, but also inform people about news on your pages, alert them or remind about your site. It allows you to reach more people and display notifications that can redirect to a site of your choice.

With GetResponse you can now create Rich push notifications which let you create notification containing images, add action buttons and support topics. The appearance of the notification may differ from the preview depending on the recipient’s browser and the recipient’s operating system (and the fact that different browsers/os’ support different rich push elements).

What are web push notifications?

Web push notifications are notifications that can be sent to a user via desktop web browser and mobile web browser. Web push notifications are delivered on a user’s desktop or mobile screen anytime they have their browser open — regardless of whether or not the user is on the website.

How does Web Push work?

When the visitor clicks on send notification, our application sends a request to the appropriate intermediary (called a push service), which delivers the message to the browser, if it is online. If the browser is offline, the message is queued until the browser is opened. Click here for more information.

You have to create a site in GetResponse which will contain your notifications as well as the URL and the image.
You have to install a WebConnect Integration script on your website and a service worker on your website server.
We support all the main browsers apart from Safari and Internet Explorer 11.
We highly recommend creating a custom prompt before the native browser permission prompt is displayed. It will inform your visitors that you can send them notifications if they agree. It increases your conversion rate and also, some browsers may block the native browser prompt if there was no previous interaction with the website. Also, custom prompt can increase subscriptions to your notifications.

Custom prompt:

Native prompt:

How to create a site?

To create a site:

Go to Web push notifications.
Click Create site.
Provide a name for your site (up to 150 characters).
Provide your exact website URL. This must be the exact URL that appears in the browser. Your site must support HTTPS to send notifications. If it doesn’t, you’ll need to set up an SSL certificate for your website
(Optional) click Upload an image if you want to add an icon. That would be a default image displayed in all your notifications and custom prompts. It can be your logo or a brand icon.
Click Add site and continue.

You can add only a domain or subdomain as your site, for example:

https://example.com
https://subdomain.example.com

It’s not possible to use a directory as your site, for example:

https://example.com/directory
https://subdomain.example.com/directory

The next step is to configure your website.

Click Copy code to copy the tracking code. Add the tracking code to the site where you want to display notifications. It needs to be placed in the head section.
Click Download service worker file to download the service worker. Install it in the root directory of your site on your server. Ask your web developer for help if you’re not comfortable doing it yourself.
When people opt-in, the service worker will be downloaded to their browser. If they subscribe, then they’ll be able to get your notifications. Things to keep in mind:

You need to have HTTPS to deploy the service worker.
Don’t rename the file.
The file must point to the same site origin (your domain).

Click Finish to complete setting up your site.

You will always have access to the tracking code and service worker.
Note: the tracking code is unique for each site, so it cannot be reused on different sites.

To do that:

Go to Web push notifications.
Click Get code and service worker.

How can I manage my site?

To manage your site:

Go to Web push notifications.
Hover over the actions menu (vertical ellipsis).
There you can:

Edit your site.
Get code and service worker.
Create prompt.
Create notification.
Remove (it’s only possible if there are no active notifications).

On that screen, you will also see how many people are subscribed to notifications on that website.

How to create a prompt?

When creating a prompt you are in fact always creating custom prompt. The native prompt is created automatically and cannot be edited as it’s a request directly from the browser to send notifications.

Keep in mind that:

It’s not possible to edit or remove the browser native prompt.
You can preview how the prompt will appear. The prompts appearance can differ between browsers and operating systems.
You’ll find it under Permission prompts, alongside any custom prompts you’ve created.

You can create a custom prompt for your website to increase subscribers and conversions.

Note: you can create more prompts, but only one can be active at a time.

To create a custom prompt:

Go to Web push notifications.
Hover over the actions menu (vertical ellipsis) and select Create prompt.
Enter an internal name for your prompt (up to 150 characters).
Enter your prompt message (up to 128 characters). Create a personalized message to encourage people to subscribe. The custom prompt appears before the native prompt.
Provide the text for the confirmation button and choose its color.
Provide the text for the cancellation link and choose its color. A preview of your prompt will be displayed on the right side.
Click Save to finish setting up the custom prompt.
(Optional) click on Preview to see how the native prompt will look like.
Click Save and activate to activate the created prompt (while disabling the currently active one) or Save progress to save your progress without activating the prompt.

You will be able to see how many people viewed your prompts and how many interacted with it. For native prompt you will see how many people subscribed. For custom prompt, you will see how many people viewed the native prompt, which means how many people accepted the custom prompt. This will allow you to compare the effectiveness of different prompts. You will also be able to check how many visitors subscribed through a given custom prompt.

How can I manage my prompts?

To manage your prompts:

Go to Web push notifications.
Click on the name of your site.
On the Permission prompts tab, you can deactivate the prompt
To manage the prompt, hover over the action menu (vertical ellipsis) next to your custom prompt. There you will able to:

Edit your prompt.
Delete it (it’s only possible if prompt has not been displayed).

How to create a notification?

Notification is a window that is displayed right on your subscribers’ desktops and mobile screens. They can alert people who opted into your notifications what’s happening on your site. You can advertise a product launch, a sale, or inform them about new content.

Note: different browsers and devices might have different character limits. If you want the notification to display good for all the subscribers, it’s best not to create too long notifications, as they might not be displayed fully.

To create a notification:

Go to Web push notifications.
Hover over the Actions menu (vertical ellipsis) and click on Create notification.
Provide an internal name for your notification (up to 150 characters).
Enter the notification title (up to 250 characters). Use a catchy phrase or your brand name.
(Optional) add the notification text (up to 250 characters). Use it to share more details about the thing you’re promoting, inform your notification subscribers about changes, or notify them about running sales or new products.
(Optional) Provide the destination URL to which people will be redirected after they click on your notification.
(Optional) upload an image to the notification. You can use: JPEG, .JPG, PNG, GIF, WEBP, ICO, CUR, BMP no bigger than 10MB. We reccomend using an image with a width-to-height ratio of 2:1.
(Optional) upload an Icon to the notification. You can use: .JPEG, .JPG, .PNG, .GIF, .WEBP, .ICO, .CUR, .BMP up to 10MB. For best results, use a square image at least 196 x 196 px.
(Optional) click Add button to create Action buttons for vistors to take specific actions from your notifications. Then enter the text that shows on the button, past the url that opens upon button click and button icon that appears next to the button text.
On the right you will be able to see the preview of your notification and test it in the browser. The preview will apply to the Google Chrome browser on macOS, Windows, and Android. For other browser and operating systems, there can be visual differences. The preview is purely informational, as there can be differences on particular devices.
To test how the notification will work in your system, click Preview in browser. You will be prompted to agree to receiving notifications.
You will be able to preview your audience (how many people have subscribed to your notification).
You can click cancel, save draft to use the notification later on, send immediately or schedule for later.
Note: to send the notification immediately, you need at least one permission to send notifications (one notification subscriber), but you don’t need one at this time to schedule notification for later.
When scheduling the notification, you can change the time zone to other than the default one in your account.
Note: scheduled notification can also be used in the automation workflow.
(Optional) you can set notification topic. It works when you have multile notificaions with the same topic. An older notification that hasn’t been clicked will be replaced by a new notification with the same topic, however if a visitor is offline and have several messages queued for delivery with the same topic, they will only get the last one.

You will be redirected to the Notification page. There you will be able to see the notification status, when the notification was created and sent, how many notifications were sent, delivered and clicked.

How can I manage my notifications?

To manage your notifications:

Go to Web push notifications.
Click on the name of your site.
On the Notifications tab, hover over the actions menu (vertical ellipsis) where you can: