Skip to main content

Web SDK

@arsel.sa/web-sdk — events, identity and web push for the browser. Around 6 kB gzipped, no runtime dependencies, shipped as ESM and UMD. Events and identity work with notifications denied, blocked, or never requested — only delivery needs push.

Requirements

BrowsersChrome/Edge 79+, Firefox 72+, Safari 16.4+, and mobile equivalents
TransportYour page must be served over HTTPS for push (http://localhost is the browser's one exemption). The API baseUrl must be HTTPS too, except localhost for a local backend.
BundlersAny, or none
Runtime depsNone

Push has a narrower support surface than events — events work everywhere the SDK loads.

Install

npm install @arsel.sa/web-sdk

Or from a script tag, which exposes the same surface on window.Arsel. unpkg and jsDelivr serve the UMD build straight from npm — pin the version, and add an SRI hash so a compromised CDN cannot run arbitrary script on your pages:

<script src="https://unpkg.com/@arsel.sa/web-sdk@1.1.0/dist/arsel.umd.cjs"
integrity="sha384-…" crossorigin="anonymous"></script>

Or skip the third party altogether: copy node_modules/@arsel.sa/web-sdk/dist/arsel.umd.cjs into your own static assets and serve it from your origin.

Initialize

import Arsel from '@arsel.sa/web-sdk';

await Arsel.init({
clientKey: 'pub_…',
baseUrl: 'https://api.arsel.sa',
});

Arsel.track('product.viewed', { sku: 'A-1023', price: 149.99 });

// On login. Everything tracked beforehand merges onto this contact.
Arsel.identify({ externalId: user.id });

clientKey is the organization's publishable pub_ key and is designed to sit in page source. Your secret be_ API key must never appear in client code — see Authentication.

For web, a client key is additionally bound to an origin allowlist: you register the domains permitted to use it, and requests from anywhere else are rejected. A browser cannot forge its Origin header, which is what bounds the risk on a publishable key.

Web push needs one extra file on your site — a service worker at a path the browser can reach. VAPID keys and the rest of the org-side setup are in Setting up push.

Full documentation

The SDK's own repository is the reference, and it is versioned with the code you install — BasicsEngage/arsel-web-sdk, MIT licensed.

QuickstartInstall → initialize → service worker → first event, end to end
API referenceEvery method, option, and thrown error
Web pushThe service worker, VAPID rotation, browser support
IdentityAnonymous → identified, merges, reset() vs optOut()
EventsProperties, limits, sessions, durability
Data collectionExactly what is stored, and where
TroubleshootingSymptom → cause → fix
Migrating from CleverTapCall-by-call mapping
Changelog