Client SDK installation

Use @pushary/sdk in your website to register the service worker, request notification permission, and subscribe visitors. To send notifications from your backend, use the server SDK.

Installation

Install the SDK using your preferred package manager:

npm install @pushary/sdk
# or
yarn add @pushary/sdk
# or
pnpm add @pushary/sdk
# or
bun add @pushary/sdk

CDN (Script Tag)

For quick integration without a build step:

<script src="https://pushary.com/sdk/pushary.js"></script>

Service Worker Setup

The SDK requires a service worker to handle push notifications. Copy the service worker file to your public directory:

cp node_modules/@pushary/sdk/dist/browser/pushary-sw.global.js public/pushary-sw.js

Or download from:

https://pushary.com/pushary-sw.js

The service worker must be accessible at /pushary-sw.js from your domain root.

Basic Usage

ES Modules

import { createPushary } from '@pushary/sdk'

const pushary = createPushary({
  siteKey: 'pk_your_site_key',
  debug: true,
})

By default, a branded banner appears after 3 seconds. The banner pulls your site's logo, colors, and text from the dashboard. The user clicks the CTA and the native browser permission prompt fires - this works on all browsers including Safari (which requires a user gesture).

On iOS, the banner redirects to the Pushary subscribe app which handles the Add to Home Screen flow automatically.

Script Tag

<script src="https://pushary.com/sdk/pushary.js"></script>
<script>
  var pushary = createPushary({
    siteKey: 'pk_your_site_key',
    debug: true
  });
</script>

Configuration Options

Option	Type	Default	Description
`siteKey`	`string`	required	Your Pushary site key
`apiUrl`	`string`	`https://pushary.com`	API endpoint URL
`banner`	`boolean \| object`	`true`	Show branded opt-in banner (see below)
`autoPrompt`	`boolean`	`true`	Legacy: auto-prompt without banner (only used when `banner: false`)
`promptDelay`	`number`	`3000`	Delay before showing banner/prompt (ms)
`debug`	`boolean`	`false`	Enable debug logging
`onSubscribe`	`function`	-	Called on successful subscription
`onPermissionDenied`	`function`	-	Called when permission denied
`onNotSupported`	`function`	-	Called when push not supported
`onNotificationClick`	`function`	-	Called on notification click

Pass an object to banner for fine-grained control:

Option	Type	Default	Description
`style`	`'popover' \| 'bar'`	`'popover'`	Corner card (popover) or full-width bar
`theme`	`'light' \| 'dark'`	`'light'`	Light or dark banner background
`corner`	`'bottom-right' \| 'bottom-left'`	`'bottom-right'`	Corner placement (popover only)
`position`	`'bottom' \| 'top'`	`'bottom'`	Edge placement (bar only). Setting this without `style` infers `style: 'bar'`
`delay`	`number`	`3000`	Milliseconds before showing the banner
`dismissDuration`	`number`	`72`	Hours to suppress banner after user dismisses

Set banner: false to disable and use manual control via pushary.promptForPermission().

Framework Examples

React

import { useEffect } from 'react'
import { createPushary, type PusharyInstance } from '@pushary/sdk'

function App() {
  useEffect(() => {
    const pushary = createPushary({
      siteKey: 'pk_your_site_key',
      banner: false,
    })
    
    window.pushary = pushary
  }, [])

  const handleSubscribe = () => window.pushary?.promptForPermission()

  return (
    <button onClick={handleSubscribe}>
      Enable Notifications
    </button>
  )
}

Next.js

'use client'

import { useEffect, useState } from 'react'
import { createPushary, type PusharyInstance } from '@pushary/sdk'

export default function PushNotifications() {
  const [pushary, setPushary] = useState<PusharyInstance | null>(null)

  useEffect(() => {
    const instance = createPushary({
      siteKey: process.env.NEXT_PUBLIC_PUSHARY_SITE_KEY!,
      banner: false,
    })
    setPushary(instance)
  }, [])

  return (
    <button onClick={() => pushary?.promptForPermission()}>
      Enable Notifications
    </button>
  )
}

Vue 3

<script setup>
import { onMounted, ref } from 'vue'
import { createPushary } from '@pushary/sdk'

const pushary = ref(null)

onMounted(() => {
  pushary.value = createPushary({
    siteKey: 'pk_your_site_key',
    banner: false,
  })
})
</script>

<template>
  <button @click="pushary?.promptForPermission()">
    Enable Notifications
  </button>
</template>

WordPress

Go to your site's Settings → Integration tab in the Pushary dashboard - it has a ready-to-use snippet with your site key pre-filled and a download button for the service worker. Paste the snippet into your theme header and you're done.

See the full WordPress guide for step-by-step instructions, WPCode setup, caching plugin config, and WooCommerce tips.

Was this page helpful?

Use @pushary/sdk in your website to register the service worker, request notification permission, and subscribe visitors. To send notifications from your backend, use the server SDK.

Installation

Install the SDK using your preferred package manager:

npm install @pushary/sdk
# or
yarn add @pushary/sdk
# or
pnpm add @pushary/sdk
# or
bun add @pushary/sdk

CDN (Script Tag)

For quick integration without a build step:

<script src="https://pushary.com/sdk/pushary.js"></script>

Service Worker Setup

The SDK requires a service worker to handle push notifications. Copy the service worker file to your public directory:

cp node_modules/@pushary/sdk/dist/browser/pushary-sw.global.js public/pushary-sw.js

Or download from:

https://pushary.com/pushary-sw.js

The service worker must be accessible at /pushary-sw.js from your domain root.

Basic Usage

ES Modules

import { createPushary } from '@pushary/sdk'

const pushary = createPushary({
  siteKey: 'pk_your_site_key',
  debug: true,
})

On iOS, the banner redirects to the Pushary subscribe app which handles the Add to Home Screen flow automatically.

Script Tag

<script src="https://pushary.com/sdk/pushary.js"></script>
<script>
  var pushary = createPushary({
    siteKey: 'pk_your_site_key',
    debug: true
  });
</script>

Configuration Options

Option	Type	Default	Description
`siteKey`	`string`	required	Your Pushary site key
`apiUrl`	`string`	`https://pushary.com`	API endpoint URL
`banner`	`boolean \| object`	`true`	Show branded opt-in banner (see below)
`autoPrompt`	`boolean`	`true`	Legacy: auto-prompt without banner (only used when `banner: false`)
`promptDelay`	`number`	`3000`	Delay before showing banner/prompt (ms)
`debug`	`boolean`	`false`	Enable debug logging
`onSubscribe`	`function`	-	Called on successful subscription
`onPermissionDenied`	`function`	-	Called when permission denied
`onNotSupported`	`function`	-	Called when push not supported
`onNotificationClick`	`function`	-	Called on notification click

Pass an object to banner for fine-grained control:

Option	Type	Default	Description
`style`	`'popover' \| 'bar'`	`'popover'`	Corner card (popover) or full-width bar
`theme`	`'light' \| 'dark'`	`'light'`	Light or dark banner background
`corner`	`'bottom-right' \| 'bottom-left'`	`'bottom-right'`	Corner placement (popover only)
`position`	`'bottom' \| 'top'`	`'bottom'`	Edge placement (bar only). Setting this without `style` infers `style: 'bar'`
`delay`	`number`	`3000`	Milliseconds before showing the banner
`dismissDuration`	`number`	`72`	Hours to suppress banner after user dismisses

Set banner: false to disable and use manual control via pushary.promptForPermission().

Framework Examples

React

import { useEffect } from 'react'
import { createPushary, type PusharyInstance } from '@pushary/sdk'

function App() {
  useEffect(() => {
    const pushary = createPushary({
      siteKey: 'pk_your_site_key',
      banner: false,
    })
    
    window.pushary = pushary
  }, [])

  const handleSubscribe = () => window.pushary?.promptForPermission()

  return (
    <button onClick={handleSubscribe}>
      Enable Notifications
    </button>
  )
}

Next.js

'use client'

import { useEffect, useState } from 'react'
import { createPushary, type PusharyInstance } from '@pushary/sdk'

export default function PushNotifications() {
  const [pushary, setPushary] = useState<PusharyInstance | null>(null)

  useEffect(() => {
    const instance = createPushary({
      siteKey: process.env.NEXT_PUBLIC_PUSHARY_SITE_KEY!,
      banner: false,
    })
    setPushary(instance)
  }, [])

  return (
    <button onClick={() => pushary?.promptForPermission()}>
      Enable Notifications
    </button>
  )
}

Vue 3

<script setup>
import { onMounted, ref } from 'vue'
import { createPushary } from '@pushary/sdk'

const pushary = ref(null)

onMounted(() => {
  pushary.value = createPushary({
    siteKey: 'pk_your_site_key',
    banner: false,
  })
})
</script>

<template>
  <button @click="pushary?.promptForPermission()">
    Enable Notifications
  </button>
</template>

WordPress

See the full WordPress guide for step-by-step instructions, WPCode setup, caching plugin config, and WooCommerce tips.

Was this page helpful?

Installation

CDN (Script Tag)

Service Worker Setup

Basic Usage

ES Modules

Script Tag

Configuration Options

Banner Options

Framework Examples

React

Next.js

Vue 3

WordPress

On this page

Client SDK installation

Installation

CDN (Script Tag)

Service Worker Setup

Basic Usage

ES Modules

Script Tag

Configuration Options

Banner Options

Framework Examples

React

Next.js

Vue 3

WordPress

On this page