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:

  1. Setup: Add a service worker to your website.
  2. Permission: Create a capture widget that asks visitors to allow push notifications.
  3. Customer Permission: Visitors click "Allow" to subscribe and receive notifications.
  4. Subscription: Ortto records the customer’s permission to send notifications.
  5. Notification Setup: You create a web push campaign.
  6. 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:

  1. 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.
  2. Importing scripts: The SW file imports a script provided by Ortto to handle push notification events. You can download Ortto's SW file or modify an existing one yourself.
  3. 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:

  1. Navigate to Settings > Channels > Push notifications > Web notifications > Domains.
  2. 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:

  1. Download Ortto’s service worker or use your own.
  2. Place the service-worker.js file in your chosen subdirectory.
  3. Configure your server to return Service-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.

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.