Language
Hotspot images in Ghost blog posts, pages, and newsletter editions — via the HTML card directly in the editor.
Works on self-hosted Ghost and on Ghost(Pro).
Upload a photo, place markers, fill tooltips. Auto-save handles saving.
Copy the two-line HTML from the picpins dashboard.
In the Ghost editor click the plus icon, choose the "HTML" card, paste the embed code.
Ghost relies on a clean block editor that supports Markdown and HTML equally. Embeds go through the HTML card — a special block type that accepts raw HTML+JS code.
In the Ghost admin open the post or page. At the desired position click the + icon (or type /). In the card menu choose HTML.
Paste the embed code in the code field, click outside once to save. Ghost renders the code directly in preview — you see your image already in the editor.
If you use embeds on many posts: in the Ghost admin under Settings → Code injection insert the <script src="https://picpins.com/embed.js" async></script> tag in "Site Footer". The script then loads automatically on every page.
In the individual post HTML cards only the <div class="picpins-embed" data-token="..."></div> container is needed. Saves script duplicates.
Ghost newsletters are created from the same post editor. If you place an HTML card with picpins embed in a post that goes out as newsletter: the embed will not work in the newsletter email — email clients do not allow JavaScript.
Workaround: in the newsletter use a static image plus a link to the web version of the post, where the interactive embed works.
On self-hosted Ghost you can hardcode the embed script into the theme. In default.hbs (default layout) insert the script before the closing </body> tag.
On Ghost(Pro) you do not have direct theme access — there use the code injection variant.
Screenshot of your tool, markers on features with explanation and demo link. More engagement than running text.
Photo of the destination with hotspots on sights, tips, restaurants. Web version of the newsletter.
Tool or software screenshot with markers on each step. Clickable instructions.
Premium posts with detailed hotspot images as added value for paid subscribers.
Settings → Code injection → Site Footer, keep only the container in HTML cards.Yes, in both. The HTML card is a standard feature of the Ghost editor and available in every variant. On self-hosted Ghost you additionally have theme access for deeper integration.
No. Email clients (Gmail, Outlook, Apple Mail) block JavaScript completely — the embed only runs in the web version of the post. In the newsletter itself use a static image plus a link to the web variant.
The Markdown card renders Markdown syntax (headings, links, lists) and partially filters HTML tags. The HTML card accepts raw HTML and JavaScript unchanged. For embeds always use the HTML card.
In the Ghost admin under Settings → Code injection → Site Footer insert the <script> tag. It then loads automatically on every page — in individual posts only the <div class="picpins-embed"> container is needed.
Yes. You can place as many HTML cards in a post as you like, each with its own embed. The script loads once, all containers initialize automatically.
The official Ghost AMP plugin filters <script> tags from the AMP output. Embeds are not visible in the AMP version of the post — in the standard version they run normally. If AMP is disabled or not installed, this is not an issue.
Ghost sites are generally fast. The picpins script is asynchronous and does not block rendering. Lighthouse score is barely affected.
Embeds in posts and pages are theme-independent — they survive a theme switch. Theme-owned scripts (e.g. via code injection) also remain active. Embeds directly in theme code (for self-hosted) you have to add to the new theme again.
Drop in an HTML card, paste the code, done. Works on Ghost(Pro) just like on self-hosted.