Embed Bluesky Comments On Your Site Using This Web Component

Bluesky Comments is a lightweight web component that allows you to embed Bluesky discussions directly into your website as comments. It requires no frameworks or dependencies and works directly in your HTML.

The component uses Shadow DOM for isolated styles. You can easily customize its appearance with CSS variables and Shadow Parts. It also lazy loads comments, only fetching them when visible on the page, for better page performance.

How to use it:

1. Import the Bluesky Comments component from a CDN.

<script type="module">
  import "https://esm.sh/bluesky-comments-tag/load";
</script>

2. Insert the bluesky-comments Custom Element into your page and specify the URL of the Bluesky post you want to use:

<bluesky-comments url="https://bsky.app/profile/bsky.app/post/3lbxfx3gocc2z">
</bluesky-comments>

Replace “https://bsky.app/profile/bsky.app/post/3lbxfx3gocc2z” with the actual URL of the Bluesky post you want to embed.

3. Customize the appearance of the comments to match your website’s design. You can use CSS variables to change colors, fonts, and spacing. Here’s how to implement a dark theme:

.dark-theme {
  --bluesky-bg-color: #1e1e2e;
  --bluesky-font-family: system-ui, sans-serif;
  --bluesky-font-size: 14px;
  --bluesky-text-color: #cdd6f4;
  --bluesky-handle-color: #a6adc8;
  --bluesky-footer-text-color: #7f849c;
  --bluesky-border-color: #313244;
  --bluesky-hover-bg: #181825;
  --bluesky-spacing-xs: 6px;
  --bluesky-spacing-sm: 10px;
  --bluesky-spacing-md: 14px;
  --bluesky-avatar-size: 36px;
  --bluesky-avatar-bg: #313244;
  --bluesky-reply-border-width: 1px;
  --bluesky-footer-font-size: 13px;
  --bluesky-icon-size: 16px;
}
.dark-theme::part(comment-header) {
  background: rgba(49, 50, 68, 0.5);
}
.dark-theme::part(avatar) {
  border: 1px solid #45475a;
}