Prompts

SharePush Web SDK — Push Notification Prompt

How the push opt-in prompt works: auto-prompt, the optional two-step confirmation, timing, theming, and how it coordinates with the install prompt.

Push Notification Prompt

This is the opt-in that invites a visitor to allow web-push notifications. It's a custom, on-brand modal — not the browser's native permission dialog. The native dialog only appears after the visitor accepts your custom prompt, which protects your permission request from being permanently blocked by an accidental "deny."

#Turning it on

 1Sharepush.init({
 2  apiUrl: '...',
 3  apiKey: '...',
 4  autoPrompt: true      // ← schedules the prompt automatically
 5});
  • With autoPrompt: true, the prompt is scheduled on page load (subject to timing and eligibility below).
  • With autoPrompt: false (the default), nothing is shown automatically.

The prompt is only scheduled when all of these hold:

  • Notification permission is still default (not already granted or denied).
  • The browser actually supports web push (see Browser Support).
  • No other SharePush modal is currently visible.

#Timing

By default the prompt appears 3000 ms after load. Control it with delay, or switch to a scroll trigger with promptTrigger:

 1Sharepush.init({
 2  autoPrompt: true,
 3  delay: 5000
 4});
 5
 6// or show it after the user scrolls 40% down the page:
 7Sharepush.init({
 8  autoPrompt: true,
 9  promptTrigger: { type: 'scroll-depth', scrollDepth: 40 }
10});

#The two-step "Are you sure?" flow

By default (useSecondStep: true), if a visitor dismisses the first prompt they see a short confirmation step before it closes — a gentle second chance to opt in.

 1Sharepush.init({
 2  useSecondStep: true,
 3  secondStepTitle: 'Are you sure?',
 4  secondStepMessage: "You'll miss out on real-time updates and important alerts."
 5});

Set useSecondStep: false to dismiss immediately with no confirmation.

#Customizing copy & look

 1Sharepush.init({
 2  promptTitle: 'Stay updated with Example.com',
 3  promptMessage: 'Turn on notifications for breaking news in real time.',
 4  promptButtonAllow: 'Yes, notify me',
 5  promptButtonDeny: 'No thanks',
 6  promptBrandColor: '#00913F',
 7  promptIcon: 'https://example.com/logo.svg',
 8  theme: 'glass-light',
 9  language: 'it'
10});

If you don't set copy, localized defaults for your language are used.

#Coordination with the install prompt

On mobile (iOS/Android), the SDK shows the PWA install prompt first and holds the push prompt back until the visitor decides on the install invite. This avoids stacking two asks. Once the install prompt is resolved (accepted, dismissed, or found ineligible), the push prompt is released.

On desktop, the push prompt is not deferred — it shows on its own schedule.

If, on mobile, the install prompt turns out to be ineligible (for example, your page has no valid manifest), the SDK falls back to the push prompt so the visitor still gets an opt-in rather than a blank screen.

#What happens when the visitor accepts

  1. The custom prompt is confirmed.
  2. The browser's native permission dialog is requested.
  3. On "Allow", a push subscription (FCM token) is created and registered with SharePush, tied to your category, customKey, and any email/phone_number.

From then on, that visitor is a subscriber and will receive your campaigns.


Next: PWA Install Prompt →