Appearance
Script Tag (CDN)
The simplest way to add Pulse — one script tag, zero build tools.
1. Add the Script
html
<script src="https://pulse.hire.rest/sdk/pulse.js"></script>This loads Pulse (~40 KB gzip). No npm, no webpack, no bundler.
TIP
Load the SDK from your Pulse server at https://pulse.hire.rest/sdk/pulse.js.
2. Fetch a Token and Create the Widget
html
<script>
async function initPulse() {
// Get a token from YOUR backend (see Authentication docs)
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', 'my-page');
widget.setAttribute('endpoint', 'wss://pulse.hire.rest');
document.body.appendChild(widget);
}
initPulse();
</script>Full Example
html
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<script src="https://pulse.hire.rest/sdk/pulse.js"></script>
</head>
<body>
<h1>Dashboard</h1>
<p>Your app content here...</p>
<script>
fetch('/api/collab-token')
.then(res => res.json())
.then(({ token }) => {
const widget = document.createElement('pulse-widget');
widget.setAttribute('api-key', 'pk_your_publishable_key');
widget.setAttribute('token', token);
widget.setAttribute('room', window.location.pathname);
widget.setAttribute('endpoint', 'wss://pulse.hire.rest');
document.body.appendChild(widget);
});
</script>
</body>
</html>Don't hardcode the token in HTML
Always fetch the token from your backend. If you put a token directly in the HTML, it won't be tied to the logged-in user and will be shared by everyone visiting the page.
Different Room Per Page
Use the page path (or any unique identifier) as the room:
javascript
// Each page gets its own collaboration room
widget.setAttribute('room', window.location.pathname);
// Or use a resource ID
widget.setAttribute('room', `project-${projectId}`);