Installation
Prerequisites
Section titled “Prerequisites”- A Bluesky account (this will be the article owner)
- Your Bluesky DID (see below for how to find it)
- A stable, unique slug for each article you want to comment-enable
Add the snippet
Section titled “Add the snippet”Add the following to your page. The <link> and <script> tags go in <head>; the <div> goes in <body> where you want comments to appear:
<!-- in <head> --><link rel="site.standard.document" href="at://YOUR_DID/site.standard.document/YOUR_ARTICLE_SLUG" /><script defer src="https://cdn.jsdelivr.net/npm/juttu@latest/juttu-embed.js"></script>
<!-- in <body> --><div id="juttu-comments"></div>The comment section resizes itself dynamically — no fixed height required.
The <link> tag (required)
Section titled “The <link> tag (required)”The <link rel="site.standard.document"> tag tells Juttu which article to show comments for. Its href must be a full AT URI in the format:
at://YOUR_DID/site.standard.document/YOUR_ARTICLE_SLUGGet your DID
Section titled “Get your DID”Enter your Bluesky handle to generate your personalised <link> tag:
Your personalised <link> tag:
Replace YOUR_ARTICLE_SLUG with a stable, unique identifier for this article. Allowed characters: letters, digits, - (max 512 chars). Must not change after setup.
The <script> tag (required)
Section titled “The <script> tag (required)”The <script> tag loads the Juttu embed code. Use https://cdn.jsdelivr.net/npm/juttu@latest/juttu-embed.js for the hosted version. Self-hosters should point at their own backend (e.g. https://comments.example.com/embed/juttu-embed.js).
data-theme (optional)
Section titled “data-theme (optional)”Controls the color theme. Accepted values:
| Value | Behavior |
|---|---|
auto | Detect the site’s theme automatically (default) |
light | Always use the light theme |
dark | Always use the dark theme |
In auto mode, Juttu detects whether your site uses a light or dark color scheme by inspecting the inherited text color of the widget container. This means it adapts to your site’s actual theme — not the visitor’s OS preference.
Example: data-theme="dark"
For more advanced theming (custom colors, opaque backgrounds, etc.), see Customization.
data-api-url (optional)
Section titled “data-api-url (optional)”The URL of the Juttu API backend. Defaults to https://api.juttu.app. Self-hosters should set this to their own backend URL:
<script defer src="https://comments.example.com/embed/juttu-embed.js" data-api-url="https://comments.example.com" data-theme="auto"></script>The <div> tag (required)
Section titled “The <div> tag (required)”The <div id="juttu-comments"> is where the widget will be rendered. The id must be exactly juttu-comments.