Popup Integration Guide

This page details the steps needed to integrate web push notifications using the alternative method if you are unable to configure a service worker at the root of your website. When using this method:

• Fanplayr will manage a service worker for you in a popup on a custom domain we host for you, e.g. your-brand.n.fplr.co.

• Users will be shown a branded popup window as an additional step when subscribing to notifications.

• Notifications sent to users will appear as coming from the branded popup domain instead of your domain name.

Requirements

• Your website must allow Fanplayr to open a popup window to the custom domain we host for you, e.g. your-brand.n.fplr.co.

Limitations

Browser Support

Supported by modern web browsers and operating systems which implement the Push API.

Device	Browser	Support
Desktop	Chrome	v42+
Desktop	Edge	17+ Note: Edge often hides notification requests behind a small "bell" icon (🕭) in the URL bar, making it harder for users to notice the request.
Desktop	Firefox	Not supported
Desktop	Opera	v29+
Desktop	Safari	v16+ on macOS Ventura
Mobile	Chrome Android	v42+
Mobile	Firefox for Android	Not supported
Mobile	Opera for Android	v29+
Mobile	Safari on iOS	Not supported

When using a Fanplayr widget to prompt users to subscribe you should make use of the "Can Subscribe to Web Push Notifications" segmentation filter to ensure that only users who currently do not have a subscription and have a supported web browser are targeted with the widget.

User Experience

1. Request permission to send notifications: Users who have not yet subscribed to notifications are shown a widget with a message prompting them to subscribe (e.g. "Stay up to date with our latest news and offers"). When the user clicks the primary call to action, the branded popup window is opened.

2. Popup window requests permission: The user sees the popup window which is branded to match your website and shows messaging which prompts them to continue the subscription process. When the user clicks the primary call to action, the browser prompts them for permission to send push notifications.

3. User grants permission: If the user agrees to receive push notifications, they can click "Allow" or "Yes" on the browser prompt. At this point a subscription is created and stored in Fanplayr's database, which is then used to send notifications.

4. Fanplayr sends push notifications: Your business sends notifications to subscribed users through Fanplayr's messaging service. Users will be able to see these notifications on their device whenever their browser is open, even if they are not directly visiting your website.

Best Practices

It is highly recommended to use Fanplayr's Targeting features to display an intermediate widget which asks users if they are interested in subscribing to notifications before actually requesting the browser permission. This is important for a number of reasons:

• If a user blocks the browser permission request to enable notifications you will not be able to request permission again unless the user explicitly resets the permission in their browser settings.

• The subscription creation process involves opening a popup and suddenly opening a popup when a user lands on the website is likely to negatively impact the user experience. Instead, you should always show the user a call to action which when clicked will open the popup where they can subscribe to notifications.

Integrating Guide

Currently this integration method requires coordination with your Customer Success manager. Please reach out to them to get started where you will:

1. Decide on the custom domain name to use for the popup, e.g. your-brand.n.fplr.co.

2. Coordinate on the branding of popup to match your website.

3. Receive instructions from your Customer Success manager with a small HTML snippet you will need to include on all pages of your website. This will instruct Fanplayr's Targeting JavaScript library that it can use web push notifications using the custom popup domain you have defined.