Web push soft ask integration

Web Push Soft Ask Configuration

Web Push Soft Ask is a customizable prompt that allows websites to request users’ permission for push notifications in a non-intrusive way. Instead of immediately triggering the browser’s default permission request, this soft ask first explains the benefits of notifications and encourages users to opt in voluntarily.

If the user grants permission, the website can send push notifications.

The user's preference is saved, and they won’t see the prompt again unless they revoke permissions.

Steps to Configure Web Push Notifications

Navigate to Integrations > Web Push from the Integration tab. Click on Set up integration button and proceed to the Configuration section.

• Make sure to click the Save button to apply your Web Push configurations.

• You can update these settings anytime as needed.

• Ensure that Web Push is enabled for the Soft Ask prompt to trigger; otherwise, it won’t appear.

• You can update your configurations anytime and disable Web Push whenever needed.

Configuration Settings for Web Push

1. Icon Setup

Upload an image that will appear in the soft ask prompt.This can be your website’s logo or a relevant image that encourages users to allow notifications.Recommended dimensions: 128x128px or 256x256px for best quality. If you’ve uploaded an icon but want to revert to the default, click the Reset button

.

2. Steps to Enable

1. Create or Update the fileserviceworker.js File

• This file should be located in the root directory of your website (e.g., https://yourwebsite.com/fileserviceworker.js).

• If it does not exist, you need to create it.

2. Make Sure the File is Publicly Accessible

• The service worker file (fileserviceworker.js) must be accessible from your website.

• You can verify this by visiting https://yourwebsite.com/fileserviceworker.js in a browser.

• If the file is not accessible, you may need to update file permissions or server settings.

3. Add the Import Script in fileserviceworker.js

The file should contain this line of code: importScripts('https://dev2for.msprt.co/static/js/service-worker-listener.js');

• This imports an external script that provides additional functionality to the service worker.

Prompt Type and Customization

This section defines how the soft ask prompt will appear on your website.

There are three different prompt types available:

1. Box Prompt

The Box Prompt Type is a customizable pop-up that asks users for permission to enable notifications. It provides a structured layout with a message, buttons for user actions, and visual customization options.

Customizations

• Position

Determines where the prompt appears on the screen. Available options:

1. Top Center (default)

2. Top Right

3. Top Left

4. Bottom Right

5. Bottom Left

• Message The custom text shown to the user explaining why they should allow notifications. Example: "Stay updated! Get real-time alerts for important updates and offers."

• Allow Button Text Customizable text for the button that enables notifications. Example: “Enable Notifications” or “Allow”.

• Don’t Allow Button Text Customizable text for the button that declines notifications. Example: “No Thanks” or “Deny”.

• If User Clicks on "Don’t Allow" Defines what happens if the user declines notifications. Options include:

  • Never Show opt-in prompt again → The prompt will never reappear.

  • Continue to show opt-in prompt → The prompt will keep appearing.

  • Show opt-in prompt in new session → The prompt will reappear in the next session.

  • Show opt-in prompt after a time delay → The prompt will reappear after a set time.

• Background Color Defines the background color of the prompt to match the website’s theme.

• Text Color Defines the text color within the prompt.

2. Native Prompt

The Native Prompt Type utilizes the built-in browser notification permission request. It directly asks the user if they want to allow or block notifications using the browser’s standard interface.

Customization

• Overlay Hint

A toggle switch that enables or disables an additional overlay message on the webpage.When enabled, it highlights the browser’s notification prompt to attract the user’s attention.

• Overlay Message

A customizable message that appears as an overlay near the browser prompt.

Example: “Click 'Allow' to receive important updates!”

This helps guide users to take the desired action.

3. Bell Prompt

The Bell Prompt Type is a subtle, non-intrusive way to prompt users for notification permissions. It appears as a small bell icon on the webpage, and users can click on it to opt-in for notifications.

Customization

• Position

Defines where the bell icon appears on the webpage.

Options usually include Top Center, Bottom Right, Bottom Left, etc.

• Show Text on Hover

A tooltip message that appears when the user hovers over the bell icon.

This text can provide context, such as: “Click to enable notifications!”

• Bell Background Color

Allows customization of the bell icon’s background color using a hex code.

Example: #ead92a (Yellow)

Position Options

You can configure the placement of prompts (for Box and Bell prompt types). The available positions are:

1. Top Center – The prompt appears at the top center of the screen.

2. Top Right – The prompt appears at the top-right corner.

3. Top Left – The prompt appears at the top-left corner.

4. Bottom Right – The prompt appears at the bottom-right corner.

5. Bottom Left – The prompt appears at the bottom-left corner.

Each of these placements helps in providing a non-intrusive experience while ensuring user engagement.

When and Where to Show Opt-in Prompts

This section defines when and where the opt-in prompt should appear on the website.

Select The Trigger

This determines what action will trigger the opt-in prompt.

• Time Delay :

  • The opt-in prompt appears after a specified time delay once the page loads.

  • Example: If the delay is set to 2 seconds, the prompt will appear 2 seconds after the page loads.

• Scroll :

  • The opt-in prompt appears after the user has scrolled down a certain percentage of the page.

  • Example: If the scroll percentage is 50%, the prompt will appear when the user has scrolled halfway down the page.

Select The Pages

This setting determines where the opt-in prompt should appear.

• All Pages

  • The opt-in prompt appears on every page of the website.

• Specific Pages

  • The opt-in prompt appears only on specified pages.

  • Example: If the page URL is /cart, the prompt will only appear on the cart page.

  • You can add more URLs to show the prompt on multiple pages.

Maximum Times:

Define how many times the opt-in prompt will appear during a session.

Acknowledgement Settings (Optional)

This Acknowledgment Section is an optional message that appears after a user interacts with the Soft Ask Prompt (e.g., accepting or dismissing it). It serves as a confirmation or follow-up message.

1.Toggle Switch (Enable/Disable)

• If enabled (blue toggle switch) → The acknowledgment message is shown after user interaction with the Soft Ask prompt.

• If disabled → No acknowledgment message appears.

2. Title

Sets the title of the acknowledgment message (e.g., "Hey").

3. Message

Defines the content of the acknowledgment message (e.g., "This is an acknowledgment.").It provides additional context after the Soft Ask interaction.

4. Icon

Allows adding an image or icon to the acknowledgment message

Basic Browser Settings Required for a Soft Ask to Work

1. Notification Permission Must Be in "Ask" Mode

• Requirement: The browser's notification permission should be set to "Ask" (default).

• Reason: If the user has manually blocked notifications, the Soft Ask prompt will not appear.

1. Pop-ups and Redirects Must Be Allowed

• Requirement: Pop-ups and redirects should be enabled, particularly in Safari, which requires user interaction for the prompt to appear.

1. Soft Ask Should Not Be Ignored Repeatedly (Chrome & Edge)

• Browsers Affected: Chrome, Edge

• Condition: If the user repeatedly dismisses the Soft Ask, the browser may automatically suppress future prompts.

• Impact: Even with the correct settings, the prompt will no longer be displayed.

1. HTTPS is Required for Web Push to Work The website must be served over HTTPS (except localhost)

2. Browser Permission Restrictions (Firefox & Safari 16+) Firefox and Safari 16+ do not allow websites to trigger the native browser opt-in prompt for push notifications automatically. Instead, user interaction is required before displaying the prompt. Requirement:

   • A preceding opt-in prompt (such as a soft ask) must be used to request user consent.

   • The browser’s native permission request can only be triggered after the user interacts with the website (e.g., clicking a button).

3. Browser-Specific UI Differences

• Chrome & Edge: Show a small pop-up native prompt near the URL bar.

• Firefox: Displays a larger, more prominent permission prompt.

• Safari: Uses a system-level permissions dialog, separate from the browser UI.