Getting started

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

Quick start

Create your account — Sign up for free. When workspace creation is available to your account, create an organization and copy its 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. Every widget takes your organization ID; the four content-scoped widgets also take a stable external content identifier (a slug or URL), while notifications and profile are account-scoped. Viewers sign in through the widget. Load only the bundles you use, and replace <version> with an exact released SDK version. The web SDK release catalog identifies the current and available releases.

Comments

<script type="module" src="https://assets.hedgehog.com/sdks/web/<version>/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://assets.hedgehog.com/sdks/web/<version>/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://assets.hedgehog.com/sdks/web/<version>/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://assets.hedgehog.com/sdks/web/<version>/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://assets.hedgehog.com/sdks/web/<version>/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://assets.hedgehog.com/sdks/web/<version>/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

Every widget accepts these two attributes:

Attribute	Available on	Description
organization-id	All six widgets	Your typed organization UUID, copied from the dashboard. Required on every widget.
theme-mode	All six widgets	Selects the light or dark widget palette (defaults to light). The SDK does not auto-detect the system theme.

The remaining attributes are widget-specific:

Attribute	Available on	Description
id	Comments, reactions, live comments, and live reactions	A stable external content identifier (a slug or URL). The SDK derives its tenant-bound Content UUID and uses that typed ID for reads and writes.
target-type	Reactions and live reactions	Explicit target kind: content (default, id is external) or comment (id is a typed Comment:<uuid>).
token	Comments, reactions, notifications, live comments, and live reactions	Optional pre-issued member access token for a host-managed session. Omit it to use built-in OAuth.
theme-name	Comments, reactions, notifications, live comments, and live reactions	Render a specific theme pack available to your organization instead of the active one. Unknown names fall back to the active theme.
picker-name	Comments, reactions, and live reactions	Which named reaction picker to offer (org pickers take precedence over global). Unknown names fall back to the built-in standard picker.
skip-server-theme	Live comments and live reactions	Bare boolean attribute that prevents the widget from fetching and applying the server theme pack.
root-content-id	Notifications	Optional typed Content:<uuid> restricting the account feed to one root content item.

<hedgehog-comments> additionally accepts:

Attribute	Available on	Description
page-url	Comments	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.
disable-reactions	Comments	Hide reactions on each comment.

<hedgehog-profile> intentionally exposes only organization-id and theme-mode. It is account-scoped, takes no content ID or host token, and signs viewers in through its built-in OAuth flow or an existing cached session.

React 19

React applications can use the typed adapter from @hedgehog/sdk-web/react. It renders the same Vue-powered custom elements, while exposing camelCase props, React callbacks, and refs. In Next.js App Router and other React Server Component applications, put the widgets in a client component as shown below. The package is safe to import during server rendering; the widget upgrades in the browser.

Install

echo "@hedgehog:registry=https://assets.hedgehog.com/sdks/npm" >> .npmrc
npm install @hedgehog/sdk-web

React / Next.js client component

'use client'

import {
   HedgehogComments,
   HedgehogLiveComments,
   HedgehogLiveReactions,
   HedgehogNotifications,
   HedgehogProfile,
   HedgehogReactions,
} from '@hedgehog/sdk-web/react'

const organizationId = 'Organization:550e8400-e29b-41d4-a716-446655440000'

export function CommunityWidgets() {
   return (
      <>
         <HedgehogComments organizationId={organizationId} id="my-article-slug" />
         <HedgehogReactions organizationId={organizationId} id="my-article-slug" />
         <HedgehogNotifications organizationId={organizationId} />
         <HedgehogProfile organizationId={organizationId} />
         <HedgehogLiveComments organizationId={organizationId} id="my-livestream-slug" />
         <HedgehogLiveReactions organizationId={organizationId} id="my-livestream-slug" />
      </>
   )
}

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, externalContentId: "my-article-slug")

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, externalContentId = "my-article-slug")
}