Web notifications
Overview
Web notifications, also known as web push notifications, are messages delivered to a person’s browser after they grant permission via a capture widget. They provide real-time updates and information from websites, enhancing direct engagement with users.
NOTE:
- Web notifications are accessible across all plans.
- To display the push capture widget on your site, ensure that the tracking code is installed correctly on your website.
Accessing web notifications
To access the web notifications page, go to Settings > Channels > Push notifications > Web notifications.
Managing web notifications
The web notifications page allows users to:
NOTE:
- Web notifications are supported on desktop and laptop browsers, as well as Android Chrome.
- However, Safari on iOS (MacBook) does not support web notifications for versions older than 16.0 of Safari and 13.0 of macOS.
- Additionally, web notifications are not supported on iPhone browsers at this time.
Key notes
Here’s how web push notifications work with Ortto:
- Setup: Add a service worker to your website.
- Permission: Create a capture widget that asks visitors to allow push notifications.
- Customer Permission: Visitors click "Allow" to subscribe and receive notifications.
- Subscription: Ortto records the customer’s permission to send notifications.
- Notification Setup: You create a web push campaign.
- Delivery: When the customer is online (browser open), Ortto’s service worker delivers the notification within the specified time to live (TTL), without requiring them to visit the website.
Saving changes
After configuring your web notifications, remember to click Save at the bottom of the page.
Prerequisites
To set up web notifications with Ortto, you'll need to follow these steps:
- Service worker setup: Install Ortto's JavaScript service worker (SW) file on your website. This SW file listens for notification events sent by Ortto when you create a web push campaign.
- Configuration: Once the SW is added to your website, go to Ortto's settings and navigate to Settings > Channels > Push notifications > Web notifications > Domains. Here, add your domain and paste the corresponding URL into the Service worker URL field.
By completing these steps, you'll be set up to send and manage web notifications effectively through Ortto.
Download Ortto’s service worker
To download Ortto’s service worker:
- Navigate to Settings > Channels > Push notifications > Web notifications > Domains.
- Select the Drop down for the specific domain then click the Download our service-worker.js link to get the SW file.
For best results, place the SW file in your website’s root directory. If you need to host it in a different directory, refer to our guide on hosting service workers in subdirectories.
Use your own service worker
To use your own service worker, simply copy and paste the provided code into your existing service worker. If your service worker isn’t located in your website’s root directory, find out more about hosting it in a subdirectory.
javascript
importScripts('https://cdn3l.ink/push-service-worker-script.js');
Hosting the service worker in a subdirectory
To host the service worker in a subdirectory:
Download Ortto’s service worker or use your own. Place theservice-worker.js
file in your chosen subdirectory. Configure your server to returnService-Worker-Allowed: /
in the HTTP response header to extend the service worker’s scope across your domain.For detailed instructions on configuring this header, refer to our guide on Service worker script response.
Web notifications setup
In your Ortto account, configure web notification settings via navigating to Web notifications.
Status
At Status you can toggle the web notifications feature ON/OFF.
Domains
At domain you can add a new domain.
You will also need to ensure you have added a link to a service worker for your website.
Learn more about adding a service worker under Prerequisites.When your service worker has been confirmed as valid, you’ll see a confirmation that your domains are connected.
Branding
The Site URL automatically uses your website URL set in general settings (located at Settings > General). Upload a Logo (maximum size: 900 KB) to represent your organization.Permission prompts
View and manage your capture widgets configured for collecting push notification permissions. Click on a widget name to access its editing view.Unidentified users
Default behavior: Store as contact once identified
Visitors who interact with push permission requests without providing contact information are not immediately added to your CDP. Permission responses are stored and linked to future contact records if the visitor becomes identified later.Alternative option: Store as contact immediately
Choose to capture unidentified user responses immediately. These contacts have limited data initially but can be targeted in future push campaigns.NOTE: Immediate storage may result in duplicate contacts if visitors are later identified through other means.
Tracking unidentified users
Unidentified users are associated with their session ID. This allows Ortto to connect web session activities anonymously until users are identified.