Docs

Quickstart

Go from zero to a live activity feed in under ten minutes. You'll create a project, send your first event from your backend, and render it with the drop-in feed component.

1. Create a project & get API keys

A secret key (stl_sk_…) for server-side SDKs — it can write and read events, so keep it in your environment variables.
A public key (stl_pk_…) for browser scripts and the feed component — it can only submit events, never read data.

2. Install an SDK

Pick your backend. Both SDKs never throw — a logging failure will never crash your app.

Terminalnpm / pip

npm install @softechlog/node
# or
pip install softechlog

lib/softechlog.tsNode SDK

// lib/softechlog.ts — initialize once, import everywhere
import { Softechlog } from '@softechlog/node';

export const log = new Softechlog({
  secretKey: process.env.SOFTECHLOG_SECRET_KEY!,
});

3. Track your first event

Events follow one shape: an actor did an action to a target, with optional metadata. Use resource.verb naming like member.invited or file.deleted.

api/members.tsNode SDK

import { log } from '@/lib/softechlog';

// Fire-and-forget (non-blocking — recommended)
log.track({
  actor: { id: req.user.id, name: req.user.name, email: req.user.email },
  action: 'member.invited',
  target: { type: 'workspace', id: workspace.id, name: workspace.name },
  metadata: { role: 'admin' },
});

app/members.pyPython SDK

from softechlog import Softechlog
import os

log = Softechlog(secret_key=os.environ["SOFTECHLOG_SECRET_KEY"])

log.track(
    actor={"id": str(user.id), "name": user.name, "email": user.email},
    action="member.invited",
    target_type="workspace",
    target_id=str(workspace.id),
    metadata={"role": "admin"},
)

Sent events appear in your dashboard's Events stream within seconds — use it to verify your integration live.

4. Add browser auto-capture (optional)

Drop one script tag to automatically capture button clicks, link navigations, form submissions, and page views — no further code changes needed. See the Auto-Capture guide for details.

index.htmlstl_capture.js

<script src="https://cdn.softechlog.com/capture@1.0/stl_capture.js"></script>
<script>
  Softechlog.init("stl_pk_xxxxxxxxxxxx");

  // Once the user is known:
  Softechlog.identify({ id: user.id, name: user.name, email: user.email });
</script>

5. Render an activity feed

The <softechlog-feed> Web Component works in any framework — React, Angular, Vue, or plain HTML. It handles fetching, pagination, and empty states, and is themeable with CSS custom properties. See the Feed Component guide.

settings.htmlfeed.js

<script src="https://cdn.softechlog.com/feed@1.0/feed.js"></script>

<!-- Show all events for the current user -->
<softechlog-feed
  public-key="stl_pk_xxxxxxxxxxxx"
  actor-id="user_123"
></softechlog-feed>

Manual Tracking →