Web push notifications
What web push notifications are, how to set them up, and how to send push campaigns
What are web push notifications?
Web push notifications are simple messages you can send to your users once they have agreed to subscribe to them.
It’s an useful communication channel since you won’t be spamming your recipient’s inbox ,and you don’t have to spend a dime on re-marketing campaigns. One of its advantages is that even if the recipients aren't on their computers or browsers, they will still receive your notification later.
What a push notification looks like
A standard push notification consists of an icon, title, and subtitle. (Its length is limited by the user’s browser and your website’s URL). Below, you can see what such a notification may look like in Google Chrome (you can check other browsers view as well, just click on the logo of the desired browser).
Your push notifications may look different depending on your or the user's browser.
How to set them up
As for now, web push notifications are available only in the standard User.com widget. For the lite version, we'll be releasing that option soon.
You have two options of how you choose to send Web Push Campaigns:
- Default domain - just set up the campaign and you are ready to send.
- Own domain - If you want to send Web Push Notifications from your own domain, you can do it if you use either HTTPS or HTTP protocol. Nonetheless, in either case you will need to upload to your website a few extra lines of code for the feature to be active.
If you wish to use your own domain, we strongly suggest using HTTPS, as browsers may block notifications from domains using the HTTP protocol. You can get your SSL certificate for free here.
Below, you’ll find a step-by-step guide to the implementation.
User.com default domain
Sending Web Push Campaign using User.com domain is an easy to set up default solution.
The only thing you need to do is to set up a new Web Push Campaign, choose if it will be a Simple or Automated ,and you are ready. To see how you can create a Campaign, go to the How to create web push messages section below.
Own domain: HTTPS
If your website uses HTTPS protocol
1. In the User.com app, go to Settings -> App settings -> Additional -> Web push settings. Check I have https on my website and click Next.
2. Implement changes according to the instructions or send them to your developer. Once it's done, click Finish. Follow the instructions below:
- Download this file.
- Add the file to the root of your website using FTP or any other method; the URL to this file will be https://yourdomain.com/ue_sw.js.
- Check if the User.com widget prompts you to subscribe to web push notifications.
3. In the tab Basic settings, set the default icon for your notifications (usually your logo). This step is necessary for the prompt to work correctly.
4. In the second tab Dialog settings, customize the prompt that will be shown to visitors who have not yet subscribed to your notifications. In HTTPS, your visitors will encounter a two-step (double opt-in) subscription process.
- Send a prompt asking your visitor to subscribe (what’s called customize, as in the example below).
- If the visitor clicks Subscribe, they are shown a second window sent by their browser to validate the subscription. (You can’t customize this pop-up). This is where the actual subscription takes place. Below is an example from Google Chrome.
When you're done editing your invitation to subscription, you can enable it by clicking the checkbox in the tab Basic settings. Now you can start sending web push notifications.
Own domain: HTTP
If your website uses HTTP protocol
If you use HTTP, your notifications will be sent from a subdomain we create on our server, chosendomain.uepush.com, where the "chosendomain" is the name you choose in the first step of the setup.
- In User.com app, go to Webpush -> Settings. Check Http and click Next.
- Choose the name of the subdomain you want to send your notifications from. Have in mind, it will be shown to your end users ,and you won’t be able to change it later.
- Once you’ve done this, in the tab Basic settings, make sure that the field I have https on my website is NOT checked and set the default icon for your notifications (usually your logo).
- In HTTP, your visitors will encounter a two-step (double opt-in) subscription process. In the tab Dialog settings, customize the prompt that will be shown to visitors who have not yet subscribed to your notifications (example below). If the visitor clicks Subscribe, they are shown a second window which you can customize in the tab Page Settings. This is where the actual subscription takes place.
- When you're done editing your invitation to subscription, enable it by clicking the checkbox in the tab Basic settings.
Now you can start sending web push notifications.
How to create web push messages
Like in emails and forms, before you create rules for a push campaign, you first have to create a message you will send later on. To do this, enter Campaigns -> Web push. If you have configured them as mentioned above, you can go straight to Web push campaigns.
- Click Create new.
- Add a name for this campaign and select the appropriate type. For this tutorial, we'll choose Simple.
- Now, add a message. Here you can configure how your push will look. Message name is only referenced in our system.
- You can click Send test message to see what your web push looks like in your browser. Click the browser icons above the live preview as well to check what it will look like in different browsers. This what our message looks like:
- When you're satisfied with your creation, click Next and select Recipients. You can filter your users to send the campaign to the specified receivers.
- Lastly, select a date when the campaign will be sent (Scheduled date) or Send immediately.
- If you're ready and want to use your campaign, click Save as active. If you want to make changes later, select Save as a draft. Bear in mind that you cannot select draft campaigns in automations.
- That's all! Web pushes are now being sent.
How to send a web push notification
Currently, User.com lets you send push notifications to all browsers apart from Safari. Below, you’ll find out how to send these notifications.
From the section "People"
Apply filters or use checkboxes to select the recipients and click on Send a message -> Web push. There, you’ll be able to create your notification.
Described in the section of this article "How to create web push messages".
- Firstly, create a web push campaign. To do this, go to Web push -> Campaigns and click Create new.
- Set the name and check the box For automation.
- Create new or use one of the previously created messages and click Save.
- Go to the section, Automation and create a new action.
- Create your automation using the module Send a web push campaign as the action.
Description of exit nodes
on sent - the moment the push notification is sent to the server
on received - the moment the push notification reaches the user’s browser
on opened - the moment the user clicks on the link in the notification
not subscribed - when the user is not subscribed to your push notifications
When a campaign is sent, you will be able, like for emails, to see statistics by clicking its name on the campaign's list.