Guide

Discord component embed: what it is and how to ship one

A Discord component embed is a link preview built from a server-rendered JSON document (script#discord:component-embed or a same-site link rel=discord:component-embed). Discordbot fetches the URL, ignores JavaScript, and renders allowed Components v2 nodes — containers, text, media, and https link buttons — with Open Graph as the fallback.

What Discord actually fetches

Discord does not run your client bundle. If the JSON is not in the first HTML response, the card will not appear. Inline the payload in a script tag with id discord:component-embed and type application/json. The root object is { "component": { "type": 17, "components": [...] } }.

Allowed types in v1 practice: 1 (action row), 2 with style 5 (link button), 9 (section), 10 (text), 11 (thumbnail), 12 (media gallery), 14 (separator), 17 (container). Max 40 components. custom_id is rejected. Buttons must be https.

Hosted URL versus copy script

Tinycord publishes GET /p/{slug} with OG tags, Twitter tags, theme-color, and the inline script. Paste that URL in Discord. Edit the slug later; Discord recrawls in about 30 minutes.

If you already SSR your own domain, copy the script tag into that HTML. The snippet is a snapshot. Linked JSON must be same-site and under 3,000 bytes. JSON hosted on tinycord.com cannot be linked from example.com.

How to verify

View-source the page and confirm the script is in the SSR HTML. Then use Discord’s Embed Debugger. Allow Discordbot through Cloudflare; Discord’s own docs warn that a JS challenge here silently kills the unfurl.

Try it on your own page

Or browse the examples gallery.

Create a card