Embed widget · Coin Communities Docs

@coin-communities/sdk/embed ships embeddable post and community widgets — React components, async server components, and fetch helpers. Use them directly in React apps, or generate a copy-paste <script> snippet from the Embed tool.

Setup

pnpm add @coin-communities/sdk react

Configure the SDK once (API key is enough for public fetches):

import { configureApi } from "@coin-communities/sdk/embed";
 
configureApi({
  baseUrl: "https://api.coin-communities.xyz",
  headers: { "x-api-key": process.env.COIN_COMMUNITIES_API_KEY },
  auth: (scheme) =>
    scheme.name === "x-api-key"
      ? (process.env.COIN_COMMUNITIES_API_KEY ?? "")
      : "",
});

Post embed

React component

Render a post when you already have normalized data:

import { CoinCommunityPost } from "@coin-communities/sdk/embed";
 
<CoinCommunityPost
  post={post}
  theme="light"
  linkBaseUrl="https://coincommunities.org"
/>;

Async server component

Fetch and render in one step (Next.js App Router, React Server Components):

import { CoinCommunityPostCard } from "@coin-communities/sdk/embed";
 
export default async function PostEmbed({
  tokenAddress,
  id,
}: {
  tokenAddress: string;
  id: string;
}) {
  return (
    <CoinCommunityPostCard
      messageId={id}
      tokenAddress={tokenAddress}
      theme="light"
      linkBaseUrl="https://coincommunities.org"
    />
  );
}

Fetch helper

import { fetchCoinCommunityPost } from "@coin-communities/sdk/embed";
 
const post = await fetchCoinCommunityPost(messageId, { tokenAddress });

Returns null when the post is unavailable.

Community embed

React component

import { CoinCommunityCommunity } from "@coin-communities/sdk/embed";
 
<CoinCommunityCommunity
  community={community}
  theme="light"
  linkBaseUrl="https://coincommunities.org"
/>;

Async server component

import { CoinCommunityCommunityCard } from "@coin-communities/sdk/embed";
 
export default async function CommunityEmbed({ tokenAddress }: { tokenAddress: string }) {
  return (
    <CoinCommunityCommunityCard
      tokenAddress={tokenAddress}
      theme="light"
      linkBaseUrl="https://coincommunities.org"
    />
  );
}

Fetch helper

import { fetchCoinCommunity } from "@coin-communities/sdk/embed";
 
const community = await fetchCoinCommunity(tokenAddress);

Returns null when the community is unavailable.

Script embed (any website)

For sites that are not React apps, use the publish tool at /embed to generate a snippet. Supported URL patterns:

Post: /communities/{token}/posts/{id} or a post short link /s/{code}
Community: /communities/{token} or a community short link /s/{code}

Post snippet:

<blockquote class="coin-community-post" data-theme="light">
  <a href="https://coincommunities.org/communities/{token}/posts/{id}"
    >View post on Coin Communities</a
  >
</blockquote>
<script
  async
  src="https://coincommunities.org/embed.js"
  charset="utf-8"
></script>

Community snippet:

<blockquote class="coin-community-community" data-theme="light">
  <a href="https://coincommunities.org/communities/{token}"
    >View community on Coin Communities</a
  >
</blockquote>
<script
  async
  src="https://coincommunities.org/embed.js"
  charset="utf-8"
></script>

The loader upgrades each blockquote into a responsive iframe. Set data-theme="dark" for dark mode.

Exports

Export	Description
`CoinCommunityPost`	Presentational post card (inline styles, light/dark theme)
`CoinCommunityPostCard`	Async fetch + render post server component
`CoinCommunityPostError`	Fallback when a post cannot be loaded
`fetchCoinCommunityPost`	Public API fetch + post normalization
`embedPostFromPublic`	Map `PublicMessageResponse` → `EmbedPost`
`CoinCommunityCommunity`	Presentational community header card
`CoinCommunityCommunityCard`	Async fetch + render community server component
`CoinCommunityCommunityError`	Fallback when a community cannot be loaded
`fetchCoinCommunity`	Public API fetch + community normalization
`embedCommunityFromResponse`	Map `GetCommunityResponse` → `EmbedCommunity`
`configureApi`	SDK client configuration
`EmbedPost`, `EmbedCommunity`, `EmbedTheme`	Types