Installation
Install and configure the Pushary client SDK for your website
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/sdkCDN (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.jsOr download from:
https://pushary.com/pushary-sw.jsThe 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',
autoPrompt: true,
promptDelay: 3000,
debug: true,
})Script Tag
<script src="https://pushary.com/sdk/pushary.js"></script>
<script>
createPushary({
siteKey: 'pk_your_site_key',
autoPrompt: true,
promptDelay: 3000
});
</script>Configuration Options
| Option | Type | Default | Description |
|---|---|---|---|
siteKey | string | required | Your Pushary site key |
apiUrl | string | https://pushary.com | API endpoint URL |
autoPrompt | boolean | true | Auto-prompt for permission |
promptDelay | number | 3000 | Delay before auto-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 |
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',
autoPrompt: 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!,
autoPrompt: 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',
autoPrompt: false,
})
})
</script>
<template>
<button @click="pushary?.promptForPermission()">
Enable Notifications
</button>
</template>