Skip to content

NPM / Build Tools

If your project uses a bundler (Vite, webpack, etc.), install Pulse as an npm package.

Install

bash
npm install @gamention/pulse-elements
bash
pnpm add @gamention/pulse-elements
bash
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

ScenarioRecommendation
Static HTML site, WordPress, no build stepCDN / Script Tag
React, Vue, Svelte, Angular, or any bundlerNPM (this page)
Quick prototype or testingCDN / Script Tag

Pulse Collaboration SDK