Getting started

Everything you need to integrate Hedgehog into your site or app.

Quick start

Create your organization — Sign up for free and copy your organization ID from the dashboard.
Add a widget — Drop the web component onto your page, or add the iOS or Android SDK to your app.
Your readers sign in — The widget handles authentication for you. There are no tokens to manage.

Authentication is built in

No tokens to manage. Viewers sign in through the widget's own OAuth flow — on web, iOS, and Android. Pass a token only if you already manage member sessions yourself (SSO).

Embed on the web

Load a bundle from the Hedgehog CDN and drop in the custom element. It works in React, Vue, Angular, Svelte, or plain HTML — no framework integration required. Pass your organization ID and a stable content identifier (a slug or URL); Hedgehog resolves the rest, and viewers sign in through the widget. Load only the bundle for the widget(s) you need.

Comments

<script type="module" src="https://api.hedgehog.app/sdks/web/hedgehog-comments.js"></script>

<hedgehog-comments
   organization-id="Organization:550e8400-e29b-41d4-a716-446655440000"
   id="my-article-slug"
   page-url="https://example.com/articles/my-article-slug"
></hedgehog-comments>

The comments widget opens on a Best tab — a curated feed the server selects and orders for you — alongside a Newest tab with the full discussion, newest first. Curation is server-side; there is nothing to configure.

Reactions

<script type="module" src="https://api.hedgehog.app/sdks/web/hedgehog-reactions.js"></script>

<hedgehog-reactions
   organization-id="Organization:550e8400-e29b-41d4-a716-446655440000"
   id="my-article-slug"
></hedgehog-reactions>

Notifications — account-scoped, no content id

<script type="module" src="https://api.hedgehog.app/sdks/web/hedgehog-notifications.js"></script>

<hedgehog-notifications
   organization-id="Organization:550e8400-e29b-41d4-a716-446655440000"
></hedgehog-notifications>

Profile — account-scoped profile photo manager, no content id

<script type="module" src="https://api.hedgehog.app/sdks/web/hedgehog-profile.js"></script>

<hedgehog-profile
   organization-id="Organization:550e8400-e29b-41d4-a716-446655440000"
></hedgehog-profile>

Live comments — real-time chat for livestreams

<script type="module" src="https://api.hedgehog.app/sdks/web/hedgehog-live-comments.js"></script>

<hedgehog-live-comments
   organization-id="Organization:550e8400-e29b-41d4-a716-446655440000"
   id="my-livestream-slug"
></hedgehog-live-comments>

Live reactions — floating-reaction stream

<script type="module" src="https://api.hedgehog.app/sdks/web/hedgehog-live-reactions.js"></script>

<hedgehog-live-reactions
   organization-id="Organization:550e8400-e29b-41d4-a716-446655440000"
   id="my-livestream-slug"
   picker-name="standard"
></hedgehog-live-reactions>

Widget attributes

All widgets accept these attributes:

Attribute	Description
organization-id	Your typed organization UUID, copied from the dashboard. Required on every widget.
id	A stable external content identifier (a slug or URL). Not used by the account-scoped widgets <hedgehog-notifications> and <hedgehog-profile>.
token	Optional pre-issued member access token. When omitted, the widget signs viewers in through its built-in OAuth flow; pass it only to inject a host-managed session (SSO).
theme-mode	light or dark (defaults to light). Picks which palette of your active theme pack the widget renders — the SDK does not auto-detect the system theme.
theme-name	Render a specific theme pack available to your organization instead of the active one. Unknown names fall back to the active theme.
picker-name	Which named reaction picker to offer (org pickers take precedence over global). Unknown names fall back to the built-in standard picker.

<hedgehog-comments> additionally accepts:

Attribute	Description
options	CommentEmbedOptions object for theme overrides, callbacks, and toggles.
page-url	Optional canonical URL of the page hosting this content. Must be on your registered site origin. Registers the page so notifications can show which article they are about and deep-link back to the comment.
hide-user-avatars	Hide member avatars in the comment list.
enable-compact	Enable the compact rendering variant.
enable-external-compact	Enable the externally-controlled compact variant.
disable-reactions	Hide the reactions row on each comment.

<hedgehog-notifications> also accepts an optional root-content-id to restrict the feed to a single piece of content.

Programmatic client

Building custom UI? The typed HedgehogClient from @hedgehog/sdk-web exposes the same API the widgets use — comments, reactions, notifications, and the live features. Pass null as the token to start unauthenticated, or a member access token for host-managed sessions; rotate it later with client.setToken(...).

TypeScript

import { HedgehogClient, generateUuidV5, stripTypePrefix } from '@hedgehog/sdk-web'

const client = new HedgehogClient(null, 'Organization:550e8400-e29b-41d4-a716-446655440000')

const organizationUuid = stripTypePrefix(client.organizationId)
const contentId = `Content:${await generateUuidV5(organizationUuid, 'my-article-slug')}`

const page = await client.comments.list(contentId)
for (const comment of page.comments) {
   console.log(comment.body, comment.created)
}

Native mobile SDKs

Batteries-included widgets for iOS and Android — the same comments, reactions, and notifications, with sign-in built in.

iOS — Swift

A SwiftUI view, drop-in with a single call. iOS 16+, added via Swift Package Manager with no external dependencies. Register an OAuth URL scheme in your Info.plist and share one HedgehogSocket across widgets. Pass the optional token: parameter to inject a host-managed session (SSO).

import HedgehogSDKUI

// No token — the widget signs viewers in for you
let client = HedgehogClient(organizationId: "Organization:550e8400-e29b-41d4-a716-446655440000")

HedgehogCommentsView(client: client, socket: socket, contentId: "Content:…")

Android — Kotlin

A Jetpack Compose composable that mounts comments, reactions, and presence. Add the Gradle dependency and declare the OAuth redirect activity in your manifest.

import com.hedgehog.sdk.HedgehogClient
import com.hedgehog.sdk.ui.HedgehogCommentsView
import com.hedgehog.sdk.ui.auth.HedgehogOAuthProvider

// No token — the widget signs viewers in for you
val client = HedgehogClient.fromLocalStorage(
   context = applicationContext,
   organizationId = "Organization:550e8400-e29b-41d4-a716-446655440000",
)

HedgehogOAuthProvider(redirectUri = "myapp://oauth-callback") {
   HedgehogCommentsView(client = client, socket = socket, contentId = "Content:…")
}