Zence Marketing Web SDK (@zencemarketing/web-sdk)

Official Web SDK to integrate ZenceMarketing's push, popup, and event tracking features into your web application.

✨ Features

• 🔔 Push Notification Subscription & Delivery
• 💬 In-Page Popup Triggers
• 📊 Custom Event Tracking
• 📋 Easy SDK Initialization
• 🩵 Client-Side Logging with Custom Log Levels

📦 Installation

Install the SDK in your project via npm:

npm install @zencemarketing/web-sdk

🛠️ SDK Initialization

Before using any feature, initialize the SDK:

import SDK, { logger } from '@zencemarketing/web-sdk';

await SDK.init({
  clientID: "<your-client-id>",
  clientSecret: "<your-client-secret>",
  programCode: "<program-code>",
  websiteUrl: "<your-domain>"
});

🔔 Push Notifications

Subscribe User to Push

SDK.subscribeUserPush("/sw.js File Path", "userID");

• Registers service worker and subscribes user to push notifications.
• Requires a valid service-worker file path.

Send Push Notification

SDK.sendNotification(payload);

• Send personalized or campaign-based notifications to users.
• payload includes title, body, icon, image, data, etc.

📋 Sample Push Payload

{
  "userID": "user123",
  "title": "Welcome!",
  "body": "Thanks for visiting.",
  "icon": "icon-url",
  "badge": "badge-url",
  "image": "image-url",
  "data": {
    "productURL": "https://yourshop.com/product/123"
  },
  "websiteUrl": "yourshop.com",
  "timestamp": "ISO_8601_Timestamp"
  "campaignId": "campaign001",
  "actions": [
    { "action": "view", "title": "View", "icon": "view-icon-url" },
    { "action": "dismiss", "title": "Dismiss", "icon": "dismiss-icon-url" }
  ]
}

Check Subscription Status

SDK.getSubscriptionStatus();

• Verifies if the user is already subscribed.
• Returns a object indicating the current push subscription.

💬 Popup Subscription

SDK.subscribeUserPop("userID123");

• Enables in-browser popups for the user.

📊 Event Tracking

SDK.customEvent("event_name", data, "userID123");

• Tracks any custom events (e.g., page view, click, purchase).
• Requires event_name, data (object), and user ID.

🩵 Logging

The SDK provides a simple logger for debugging and monitoring.

import { logger } from '@zencemarketing/web-sdk';

logger.setLevel("info");     // Options: none, error, warn, info, debug
logger.setEnabled(true);      // Enable or disable console & remote logging

logger.info("Hello from SDK!");  // Log messages

🔐 Environment Support

This SDK supports modern browsers and is optimized for:

• React
• Vanilla JS
• TypeScript

📄 License

MIT License

📬 Support

For any help or questions, contact us at [email protected]

🛠 Maintained with ❤️ by ZenceMarketing

For integration help, contact your ZenceMarketing team.