Ghost installation
Ghost Blog Testimonials Using HTML Cards
Ghost splits custom code in two. An HTML card puts markup inside a post or page, and Code Injection adds scripts to the site footer or to one post’s footer. The StoryProof div belongs in the card and the script in the footer, and Ghost lets you choose whether the card shows to visitors, free members or paid members.
- Div for an HTML card
- Script for Site Footer or one post
- Who sees the card: visitors or members
Code for Ghost
The two pieces for a Ghost site
Ghost’s guidance is to put JavaScript in the footer, so the script goes in Code Injection and the div goes in an HTML card where readers should see the widget.
Part 1 · An HTML card in the post or page
Editor › + or / on a new line › HTML › paste
<div data-storyproof-widget="YOUR_WIDGET_ID"></div>Part 2 · Site Footer, for widgets anywhere on the site
Settings › Code Injection › Site Footer
<script src="https://app.storyproof.io/embed.js" async></script>Part 3 · Or the footer of this one post or page
Editor › post settings › Code Injection › footer
<script src="https://app.storyproof.io/embed.js" async></script>Publish or update the post and open it on the web in a private window. The widget is built by the script, so check it on the web page.
The tool only formats your widget id in this tab. Nothing is saved.
The problem, solved
Ghost publisher problems, and the StoryProof answer
- Problem 1
Reader praise is buried in reply emails
Newsletter writers get lovely replies, but they sit in an inbox where no prospective subscriber will ever read them.
How StoryProof solves it
Send readers one collection link where they can record a video, leave an audio note or write a few lines, all in the browser.
- Problem 2
Paid members do not need convincing again
Showing a block of praise to people who already pay wastes space at the top of a members-only post.
How StoryProof solves it
Keep the widget as one div in an HTML card, then use Ghost’s card visibility to show that card to public visitors or free members only.
- Problem 3
My newsletter needs proof too
An emailed post is not the web page, and a widget that depends on a script has no reason to appear inside an inbox.
How StoryProof solves it
From Pro, the social image designer turns an approved testimonial into a branded image you can place in an email.
- Problem 4
Membership page and about page need different voices
Praise for the writing suits the about page; praise for the paid tier belongs on the membership page.
How StoryProof solves it
Make one widget per page and choose which approved testimonials each one shows.
- Problem 5
I do not want code in every post
Pasting the full snippet into each post spreads the same script across hundreds of items in your archive.
How StoryProof solves it
Put embed.js once in Site Footer; it fills every StoryProof div on whichever page loads it.
In StoryProof
Install it on Ghost
Step 1 of 5
Choose the stories for the page
For a membership page, pick approved testimonials that mention what paying readers get, and add them to a widget.
Step 2 of 5
Add the script to Site Footer
Open Settings, then Code Injection, and paste the script line into Site Footer. Ghost places that code before the closing body tag on every page.
Step 3 of 5
Insert an HTML card
In the editor, click + or type / on a new line, choose HTML and paste the div where readers should meet the widget.
Step 4 of 5
Set who sees the card
Use the visibility (eye) icon in the card toolbar to choose public visitors, free members or paid members.
Step 5 of 5
Check the web page
Publish or update, then load the page logged out. If you limited the card to members, sign in as a test member too.
A Ghost membership page, before and after
Before
- Two quotes typed into a paragraph, unchanged since launch
- The same quotes shown to paying members on every post
- Reader replies left in the inbox
After
- A widget in an HTML card, filled from approved reader testimonials
- The card shown only to visitors and free members
- Readers invited to record or write through one link
Before you start
Ghost limits
Web only
Treat the widget as a web feature. Send yourself a test newsletter rather than assuming the emailed post will show it.
Plan features vary
Ghost(Pro) plans differ in what they allow. The Ghost pages read for this guide do not tie Code Injection to a plan, so check yours in Ghost Admin.
No Ghost integration
StoryProof installs with an HTML card and Code Injection, not through Ghost’s integrations. A navigation link to your Wall of Love works without any code.
Theme placement varies
Some themes style wide cards differently. Preview long pages in your theme to see how the card sits in the content column.
Sourced from Ghost, not trialled
Menu names come from Ghost’s help and tutorials as read on 2026-11-12. A person has not yet run them on a live Ghost site, and Ghost Admin changes over time.
FAQ
Questions people ask
Short answers to what usually comes up next.
Site Footer or post Code Injection?
Site Footer when widgets appear on several pages, such as about and membership. The post-level footer when one launch post is the only place the widget lives.
Can the HTML card hold both lines?
It can, but Ghost advises putting JavaScript in the footer. Keeping the script there also means one copy for the whole site.
Will free members see the widget on paid posts?
That depends on the card visibility you set. Ghost lets each HTML card target public visitors, free members or paid members.
How do I get testimonials into my newsletter?
Use a branded image made with the social image designer, available from Pro, or link to your Wall of Love from the email.
Still have a question? Ask the StoryProof team or book a demo.
Let your readers recruit the next ones
Collect reader testimonials with one link and show them on your Ghost membership page.
Sources
- Cards, Ghost Help. Checked 2026-11-12.
- How to use Code Injection in Ghost, Ghost Tutorials. Checked 2026-11-12.
- Preparing posts for publishing, Ghost Help. Checked 2026-11-12.
Last updated 2026-11-12.