Cardwright

Build & preview Discord component embeds for link previews

0 / 40 components

Structure

1 container, up to 40 parts
Start from a template above, or build your own with the buttons at the bottom of this list. The preview on the right updates as you type, and the code to paste into your site lives in the Output panel.

Live preview

approximate — real rendering may vary

Output

This is one invisible tag, not a new page. You add it to the <head> of your existing homepage — nothing renders, nothing looks different to a visitor or in your page's HTML body. The only thing that changes is what Discord shows when someone shares that page's link.
Adding it to your homepage
1
Finish your embed on the left, then switch to the Inline tag tab and copy the snippet.
2
Open the HTML file for your existing homepage (e.g. the one that already serves example.com) and paste that snippet inside its <head>, next to your other meta tags. That's it — you're not creating a new file or a new route, just adding a few lines to a page that already exists. It has to be in the raw HTML your server sends back, since Discord's crawler doesn't run JavaScript: anything injected afterward by React, a CMS widget, or client-side routing is never seen.
3
Leave your homepage's normal og:title / og:description / og:image tags in place (see the Reference tab if you don't have them yet). Discord falls back to those any time the component embed can't be used — nothing breaks either way.
4
Make sure a request whose user agent contains Discordbot gets a plain 200 response for the homepage and for every image it references, with no bot-check or CAPTCHA in front of it. A WAF or bot-protection rule silently blocking that user agent is the single most common reason a preview never shows up.
5
The whole fetch — the page plus every image in the payload — needs to finish in roughly 10 seconds, so keep images reasonably sized and avoid slow redirects.
6
Paste example.com into a Discord message (a DM to yourself works) to see the real render. Discord caches a preview per URL for a while, so if you edit the payload and the old version still shows, add a throwaway ?v=2-style query string to the URL while you test.
Prefer not to touch the homepage's HTML directly?
Use the Linked tag tab instead of the inline one: host the JSON payload at its own URL on the same site (or a subdomain) and add a single one-line <link> tag to the homepage's <head> pointing at it — still nothing visible, just less markup sitting inline on the page itself. That hosted JSON response has a hard 3,000-byte cap, which the Checks tab warns you about if you're over it.
If the preview isn't showing up
• Nothing shows at all → recheck the crawler-access step above first.
• You still see an old version → cache-bust the URL while testing.
• Discord shows your plain preview instead of the embed → open Checks, there's almost always a validation error explaining the rejection.
• An image won't load → it must be plain http(s), publicly reachable with no login, under 2,048 characters, and PNG/GIF/JPEG/WebP/AVIF. Video is never supported here. 

        

      


      

        
Paste this inside the <head> of your existing homepage — it's invisible, not a new page. Client-side-injected scripts are never seen by Discord's crawler, so it has to be in the HTML your server actually returns.

        

          
        

        

      


      

        
Host the JSON at a same-site HTTPS URL, then add this one line to your homepage's <head> — still nothing visible. This route has a 3,000-byte cap on the hosted response.

        

          
          
        

        

          
          
        

        

        

      


      

        
Reference only — this is not a new page to publish. It just shows where the inline tag sits relative to ordinary Open Graph fallback tags, in case your homepage doesn't have those yet. Copy only the tags you're missing into your real homepage's existing <head>.