Email-Friendly Embeds

Two cards, not one

Email clients don't run the scripts and players that embeds depend on, so an embed pasted into a newsletter arrives as a blank space, a grey box, or a bare link. The tool gives you two HTML cards for one link: the real embed, shown only on your site, and an email card with the same content, shown wherever the embed can't load. You paste both, and Ghost shows the right one in each place.

Spotify, Instagram, Bluesky and Datawrapper are supported today, plus a writer headshot card that has no embed to stand in for; more providers are on the way. Each has its own page under Email-Friendly Embeds in the dashboard.

One-time setup

An email card that also goes to the social web has to be visible on the web, and without help your site would show it beside the real embed. One CSS rule hides it there. On the Email-Friendly Embeds page, copy the rule under One-time setup for this site, paste it into Settings → Code injection → Site header in Ghost Admin, save, and press Check my site.

Spotify

Paste a link to a track, album, playlist, artist, show, episode or audiobook, or the embed code from Spotify's share menu. Get details fetches the title, subtitle, cover art and the colours Spotify uses for that release. On your site you get Spotify's player, at the compact or standard height; in email, a bar with the cover, title, subtitle and a play button in those colours. Edit any of it before copying, or press Reset to Spotify's values.

The bar is for email only. Readers on Ghost's social web (ActivityPub) get the web version of the post, where the player itself plays.

Instagram

Paste a link to a post or reel, or Instagram's embed code. Get details fetches the account, caption and photo; a reel gives its poster, a carousel its first photo. Then choose:

• Card layout. Compact puts the photo beside the caption and restacks, with a full-width photo, on phones. Tall is Instagram's own arrangement: account, photo, caption.
• Caption on the card. Starts as the first 180 characters of the post's caption. The card shows exactly what's in the box.
• Image description, the alt text for readers who use one.
• Show the caption under the post on your site, which is Instagram's captioned embed.

Instagram's image links expire within days, so Copy first saves a copy of the photo to your site's Ghost media library and builds the card on that. If the upload takes more than a moment, the button asks for one more click. Copying the same post again reuses the saved photo.

Bluesky

Paste a link to a post, or the embed code from Bluesky's share menu. Get details fetches the post from Bluesky: the account, the text with its links, and whatever the post carries, which can be up to four photos in a grid (more show as four and a count), a link card, a video's poster, or a quoted post. The card is Bluesky's embed redrawn for email, so there is nothing to edit; the two choices are:

• Show the like, reply and repost counts, as they stand when you copy. The card never updates, so a post that is still gathering replies may read low by the time the newsletter goes out.
• Colour mode of the embed on your site: match the reader's system, or always light or dark. The email card is always light.

Photos come straight from Bluesky's image service, whose addresses never expire, so nothing is saved to your site. Media Bluesky has labelled as adult or graphic shows the label in its place, as Bluesky's own embed does, and an account that has asked not to be shown on other sites can't be embedded at all.

Datawrapper

Paste a link to a chart, map or table, or any of the embed codes from Datawrapper's publish step. Get details fetches the chart's title and type from Datawrapper and checks that its image exists. On your site you get Datawrapper's own interactive embed, at the chart's latest published version; in email, Datawrapper's own image of the chart, with its title, notes and source as Datawrapper draws them. There is nothing to edit but the image description, the alt text, which starts as the title and chart type.

Datawrapper redraws that image at the same address every time the chart is republished, so Copy first saves a copy to your site's Ghost media library and builds the card on that: the email shows the chart as it was when you sent it. If you republish the chart, copy the cards again before the next send. The embed on your site always shows the latest version.

The image is for email only. Readers on Ghost's social web get the web version of the post, where the chart itself shows.

Writer headshot

Ghost has no card that puts a photo beside a bio, so this one is built from scratch: one HTML card with the photo on the left or right and the writer's name, role and bio beside it, side by side at every width, with a hairline border if you like. It is made for email first, and the same card can go on your site and the social web.

• Pick from Ghost staff fills in the name, bio and profile photo from the writer's Ghost account; everything stays editable, or type it all in. The bio is plain text, and a blank line starts a new paragraph.
• Photo. The Ghost profile photo, a photo from your Image Library (if the site has one), an upload, or the address of a photo already online. An uploaded photo is saved to your site; a pasted link is used as is, so it has to stay online. Add alt text, or leave it blank to use the writer's name.
• Link. Optional, at the bottom right of the card: link text and address, in the newsletter's own link style. Picking a writer from Ghost fills in their author page; leave either blank for no link.
• Layout. Photo on the left or the right, and a border around the card.
• Where it shows. Tick any of email, the web and the social web. A card on the web is always on the social web too, because Ghost's social web gets the web version of your post. A card for the social web but not your site needs the one-time rule above, which hides it on the site.
• Save this card keeps it for next time, for everyone on the site: load it, change what you like, and copy again.

Copy card for Ghost puts one HTML card on the clipboard, with the visibility your choices need.

YouTube

Ghost has full YouTube support. Paste the video's link on its own line in the Ghost editor and Ghost's embed card does the rest: it works in email, on the social web and on your site. Be careful to paste only the link, not the iframe, for email support.

What the card links to

By default the card links to Spotify, Instagram or Bluesky, or to the chart's page on Datawrapper; the writer headshot links wherever you set it. A post on this site links it to a post instead, right at the embed, using the post's permanent address so it survives a slug change. For an email-only post keep the default: Ghost sends those links to the browser copy of the email, which has no embed.

Pasting into Ghost

Copy cards for Ghost puts both cards on the clipboard (the writer headshot is one card). In the Ghost editor, paste on an empty line and the HTML cards appear. Each card needs its own visibility, and the note under the Copy button spells it out for the embed you're pasting: for example, the Spotify player Web on, Email off and the bar Web off, Email on.

From Chrome and other Chromium browsers each card arrives with that visibility already set. From Firefox or Safari the cards arrive at Ghost's default, shown everywhere, and you set them by hand. Check the first time you use the tool: after pasting, click each card, open its visibility settings from the card's toolbar, and compare with the note. If the settings match, your browser carries them across and you can skip the check from then on; if they don't, set them the same way each time you paste.

To set a card's visibility, click the card, open Visibility in its toolbar, and switch Web and Email on or off to match the note. Leave the member segments at their defaults, so every reader who gets the post gets the card.

And which of the two each reader ends up seeing:

Contributor access

If you give a contributor an Email-Friendly Embeds grant (Site settings → Users), use lets them make, copy and save cards.