Getting Started

SharePush Web SDK — Overview & Quick Start

What the SharePush Web SDK does and the minimal setup needed to start collecting subscribers and sending web push notifications.

Overview & Quick Start

#What the SDK does

The SharePush Web SDK is a drop-in script that turns any website into a web-push channel. Once installed it:

  1. Registers a service worker on your site so the browser can receive push messages in the background.
  2. Shows an opt-in prompt inviting visitors to allow notifications (fully customizable, optional two-step "are you sure?" flow).
  3. Optionally invites visitors to install your site as an app (PWA), which is required for push on iOS.
  4. Detects unsupported environments (in-app browsers, old iOS, privacy browsers) and either shows a helpful "open in Safari/Chrome" bridge or stays silent — it never shows a broken prompt.
  5. Tracks the full funneldelivered, clicked, closed, and viewed — and attributes landing-page views back to the campaign that drove them.

Everything renders in a Shadow DOM, so the SDK's UI can't clash with your site's CSS.

#Minimum installation

#1. Add the script and initialize

Place this near the end of your <body> (or in <head> — it's async-safe):

 1<script src="https://api.sharepush.io/api/v1/sdk.js"></script>
 2<script>
 3  Sharepush.init({
 4    apiUrl: 'https://api.sharepush.io',
 5    apiKey: 'st_your_site_token_here',
 6    autoPrompt: true            // show the push opt-in automatically
 7  });
 8</script>

Only apiUrl and apiKey are required. (A vapidPublicKey is also required, but it's injected automatically by /api/v1/sdk.js — you don't set it.) If any required value is missing, the SDK logs a clear [Sharepush] Configuration missing: error and stops.

#2. Host the service worker file

The SDK registers a service worker from your own origin — by default /sharepush-sw.js. This small file pulls in the SharePush service-worker logic. It must be served from your site root (or the path you set via serviceWorkerPath) so its scope covers your whole site.

#3. (Recommended) Add a Web App Manifest

For the PWA install prompt to appear — and for push to work on iOS at all — your page needs a valid manifest:

 1<link rel="manifest" href="/manifest.json">

Without a manifest, push still works on desktop/Android, but the "install app" prompt is skipped and iOS push is unavailable.

#A fuller, real-world example

 1<script src="https://api.sharepush.io/api/v1/sdk.js"></script>
 2<script>
 3Sharepush.init({
 4  apiUrl: 'https://api.sharepush.io',
 5  apiKey: 'st_your_site_token_here',
 6  serviceWorkerPath: '/sharepush-sw.js',
 7  autoPrompt: true,
 8  useBounce: true,
 9
10  category: 'news',                 // segment subscribers
11  language: 'it',
12  theme: 'glass-light',
13  customKey: 'Guest',               // your identifier for this visitor
14
15  promptTitle: 'Stay updated with Example.com',
16  promptMessage: 'Turn on notifications for breaking news in real time.',
17  promptButtonAllow: 'Yes, notify me',
18  promptButtonDeny: 'No thanks',
19  promptBrandColor: '#00913F',
20  promptIcon: 'https://example.com/logo.svg',
21  delay: 3000,
22  useSecondStep: false,
23
24  props: {                          // custom metadata attached to events
25    article_id: '178523',
26    author_id: '163221'
27  }
28});
29</script>

#How the pieces fit together

 1Visitor lands ─▶ SDK boots ─▶ registers service worker
 2 3                     ├─▶ unsupported browser/webview? ─▶ show bridge or stay silent
 4 5                     ├─▶ show PWA install prompt (if eligible)  ┐ coordinated:
 6                     └─▶ show push opt-in prompt                ┘ never both at once
 7 8                          user Allows ─▶ subscription created
 910        You send a campaign ─▶ delivered ─▶ clicked ─▶ viewed (on your landing page)

Continue to the Configuration Reference for every available option.