Bluesky-native comments

Let your visitors comment directly on your website.

Turn the replies to any Bluesky post into a comment section. No database, no account system, and no conversation locked to your website.

Add Calque See it live

One public conversation

AT Protocol

Jeremy @jvuillermet.eu

What if your website comments lived on Bluesky?

Your website

Readers join the thread here.

✓

Bluesky

Replies stay visible there.

✓

One thread everywhere

Your site and Bluesky always show the same public conversation.

No backend to own

Drop in the hosted iframe without building a database or API.

Two ways to embed

Use the isolated iframe or render the library directly on your origin.

Get started

Usage & options

Shared configuration

Options

The same option names work with direct rendering, Calque.embed(), and HTML data attributes, where camel case becomes kebab case.

post: requiredBluesky post URL or at:// URI
title: 'Conversation'Thread heading
indentDepth: 100Maximum indented reply levels, from 1 to 1,000
colorScheme: 'auto'auto, light, or dark
accent: undefinedInteractive CSS color
background: undefinedWidget background CSS color

Choose a hosted iframe integration or render Calque directly.

<div
  data-calque
  data-post="https://bsky.app/profile/jvuillermet.eu/post/3mte65o7e622i"
  data-title="Comments"
></div>
<script async src="https://calque.jvuillermet.eu/embed.js"></script>

<div id="comments"></div>
<script src="https://calque.jvuillermet.eu/embed.js"></script>
<script>
  Calque.embed(
    document.querySelector('#comments'),
    {
      post: 'https://bsky.app/profile/jvuillermet.eu/post/3mte65o7e622i',
      title: 'Comments',
    },
  )
</script>

import Calque from 'calque'

Calque.configure({ oauth: false })
Calque.render(
  document.querySelector('#comments'),
  {
    post: 'https://bsky.app/profile/jvuillermet.eu/post/3mte65o7e622i',
    title: 'Comments',
  },
)

<div id="comments"></div>
<script src="https://calque.jvuillermet.eu/calque.js"></script>
<script>
  Calque.configure({ oauth: false })
  Calque.render(
    document.querySelector('#comments'),
    {
      post: 'https://bsky.app/profile/jvuillermet.eu/post/3mte65o7e622i',
    },
  )
</script>

OAuth requirements

Direct rendering keeps authentication in the page's origin. Serve an OAuth client metadata JSON file over HTTPS, then configure it before calling Calque.render().

The client_id must exactly match the metadata URL.
List every direct-render page in redirect_uris.
Request atproto repo:app.bsky.feed.post?action=create.

Calque.configure({
  oauth: {
    clientId: 'https://example.com/oauth-client-metadata.json',
    display: 'popup',
  },
})

Live example

It's a real conversation,
chime in.

Try the options

Change a setting and the embedded conversation reloads with it.

Showing the playground defaults.