Integration Tutorial - Eventicer

Setup Service Worker

Create a file named sw.js in your project's public root directory (e.g., public/sw.js). This service worker is required to handle background notifications.

 // public/sw.js
 importScripts("https://js.eventicer.com/push-notification.js");

Import SDK

Add the SDK script to your HTML <head> or import it in your main entry file.

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

Initialize & Subscribe

A. Initialize SDK

First, ensure the service worker is checked. Then initialize the SDK with your Public Key.

// 1. Check Service Worker Registration
await pushwebSDK.checkServiceWorker('YOUR_PUBLIC_KEY');

// 2. Initialize Global SDK
await pushwebSDK.init({
    publicKey: 'YOUR_PUBLIC_KEY', 
});

console.log('SDK Ready');

B. Subscribe User

Call subscribe() when you want to ask the user for permission. Pass a topic (or clientId) to identify the subscription.

// Trigger this on button click
async function onSubscribeClick(topicName) {
    try {
        await pushwebSDK.subscribe(topicName);
        console.log('Subscribed to topic:', topicName);
    } catch (error) {
        console.error('Subscription failed:', error);
    }
}

C. Handle Broadcast Messages

Listen for messages from the service worker to handle notifications and focus behavior.

const broadcast = new BroadcastChannel('notify-channel')
broadcast.onmessage = (event) => {
    pushwebSDK.showNotificationAndFocus(event)
}

Helper Methods

The SDK provides helper methods to check subscription status, useful for updating your UI (e.g., disabling the subscribe button if already subscribed).

Check Subscription Status

Use checkSubscription(clientId) to check if the current browser is subscribed for the given client ID. The result is stored in the pushwebSDK.subscribed property.

// Check if user is already subscribed on load
await pushwebSDK.checkSubscription('user_123');

if (pushwebSDK.subscribed) {
    console.log('User is already subscribed, hide button');
    updateUI(true); // Your function to update UI
} else {
    console.log('User not subscribed, show button');
    updateUI(false);
}

Send Notification

Send notifications via our API. Use the clients array to target specific users by their clientId.

curl -X POST https://js.eventicer.com/api/messages \
  -H "Authorization: Bearer YOUR_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "title": "New Update",
    "message": "Check out our latest features!",
    "clients": ["user_123"],
    "icon": "https://example.com/icon.png"
  }'

★

Automatic Features

Eventicer comes with built-in engagement features that require no extra configuration:

🔔
Sound Alerts:A distinct notification sound plays automatically when a message arrives, ensuring users notice it even if they are away from the screen.
🎯
Auto-Focus:When a user clicks on a notification, the browser tab is automatically focused or opened, bringing them straight to your content.