Appearance
NPM / Build Tools
If your project uses a bundler (Vite, webpack, etc.), install Pulse as an npm package.
Install
bash
npm install @gamention/pulse-elementsbash
pnpm add @gamention/pulse-elementsbash
yarn add @gamention/pulse-elements@gamention/pulse-elements includes the web components and the client SDK. No other packages needed.
Import and Use
typescript
// Import once — registers <pulse-widget> and all other elements
import '@gamention/pulse-elements';Then use <pulse-widget> in your HTML or templates:
html
<pulse-widget
api-key="pk_your_publishable_key"
token="USER_TOKEN_FROM_YOUR_BACKEND"
room="dashboard"
endpoint="wss://pulse.hire.rest"
></pulse-widget>Dynamic Setup in JavaScript
typescript
import '@gamention/pulse-elements';
async function initPulse() {
const res = await fetch('/api/collab-token');
const { token } = await res.json();
const widget = document.createElement('pulse-widget');
widget.setAttribute('api-key', 'pk_your_publishable_key');
widget.setAttribute('token', token);
widget.setAttribute('room', 'dashboard');
widget.setAttribute('endpoint', 'wss://pulse.hire.rest');
document.body.appendChild(widget);
}
initPulse();TypeScript Support
Full type definitions are included. Import types from @gamention/pulse-shared:
typescript
import type {
Thread,
Comment,
PulseUser,
Notification,
Reaction,
PresenceUser
} from '@gamention/pulse-shared';When to Use CDN vs NPM
| Scenario | Recommendation |
|---|---|
| Static HTML site, WordPress, no build step | CDN / Script Tag |
| React, Vue, Svelte, Angular, or any bundler | NPM (this page) |
| Quick prototype or testing | CDN / Script Tag |