Readymag installation
Readymag Testimonials with Code Embeds
Readymag gives you two places for outside code: a Code widget you drop onto a single page, and project code that loads on every page. The StoryProof div belongs in a Code widget on the canvas. The script can sit beside it, or once in project code before the closing body tag. Readymag says custom code may not render in the Editor, so test in Preview, then on the published project.
- Code for a page level Code widget
- The project wide split for multi page sites
- What to check in Preview before you publish
Readymag snippets
Code for your Readymag project
Enter the widget id. For a one page project, paste Option 1 into a Code widget. For a project with testimonials on several pages, use Option 2: the div in each Code widget and the script once in project code.
Part 1 · Option 1: a single Code widget holding everything
Editor › Code widget › paste
<div data-storyproof-widget="YOUR_WIDGET_ID"></div>
<script src="https://app.storyproof.io/embed.js" async></script>Part 2 · Option 2a: the Code widget on each page with testimonials
Editor › Code widget on that page
<div data-storyproof-widget="YOUR_WIDGET_ID"></div>Part 3 · Option 2b: project code, once for the whole project
Project settings › Code › before the closing body tag
<script src="https://app.storyproof.io/embed.js" async></script>Switch to Preview (the P key) and scroll to the widget. If it renders there, publish and check the live project in a private window, on a phone as well as a desktop.
Everything is assembled in this page; your widget id is never sent.
The problem, solved
Readymag testimonial problems and the StoryProof answer
- Problem 1
The widget is blank in the Editor
Readymag warns that custom code may not display correctly in the Editor, so a correct embed can look empty while you design.
How StoryProof solves it
The StoryProof embed is a div plus one async script. Judge it in Preview and on the published project, where Readymag runs it.
- Problem 2
Testimonials on several project pages
A full snippet pasted into every page means a script to update in many places.
How StoryProof solves it
One embed.js load fills every StoryProof div on a page, so project code can carry the script while each page keeps only its div.
- Problem 3
Quotes typed onto the canvas go stale
Text boxes are quick to style but every new client quote means another design pass.
How StoryProof solves it
Approved testimonials are chosen for the widget inside StoryProof, so the Readymag layout stays as designed.
- Problem 4
It has to suit an editorial layout
Readymag projects are visual first, and a heavy carousel can fight the composition.
How StoryProof solves it
Pick a layout to fit the space, from a full wall to a compact badge or avatar strip.
- Problem 5
Clients sent voice notes, not text
Audio is awkward to place on a canvas without hosting the files yourself.
How StoryProof solves it
Audio notes play inside StoryProof widgets alongside video and written testimonials.
In StoryProof
Set it up in Readymag
Step 1 of 4
Choose a layout for the space
Decide where on the canvas the widget sits and how wide it can be, then pick a StoryProof layout that suits that area.
Step 2 of 4
Place a Code widget
In the Editor, add a Code widget where the testimonials should appear and paste Option 1, or the div from Option 2a. Make the box generous; on a canvas the surrounding objects do not move when content grows.
Step 3 of 4
Move the script to project code (multi page only)
If several pages show widgets, open the project’s code settings and paste Option 2b in the before closing body position, so it loads once on every page.
Step 4 of 4
Preview, then publish
Press P for Preview and confirm the widget renders. Publish, then open the live project and check the box is not cutting off testimonials at phone width.
Before you start
Honest limits
Based on Readymag’s docs as of 2026-11-13
Readymag’s help center blocked our reader, so the Code widget and project code details come from its help articles as shown in search results on 2026-11-13. They have not been tried on a live project.
Free plan does not publish code
Readymag’s help says Free projects show working code in Preview but not once published. Plan for a paid Readymag plan before you rely on the widget.
Fixed boxes on a canvas
A widget that grows after load does not push neighbouring Readymag objects down. Leave room under the Code widget or pick a compact layout.
No Readymag integration
StoryProof is not in Readymag’s integrations list. The install is the standard div and script.
Branding badge
Widgets carry a small "Powered by StoryProof" badge until Pro.
FAQ
Questions people ask
Short answers to what usually comes up next.
Why does the widget appear in Preview but not on my live site?
On Readymag’s Free plan custom code runs in Preview only. On a paid plan, republish the project and reload the live page with the cache cleared.
Should the script go in the head of the project?
Before the closing body tag is the safer slot, because the divs are already on the page when the script runs. The head works for many scripts but gives no benefit here.
Can a Code widget show two StoryProof widgets?
Yes. Put two divs with their own ids in the same box, followed by one script line.
Does the widget scale with Readymag’s mobile layout?
Open the published project on a phone. If your project has its own mobile layout, check the Code widget’s size there as well, since a narrow box changes how the layout arranges testimonials.
Still have a question? Ask the StoryProof team or book a demo.
Bring client praise into your Readymag projects
Collect and approve testimonials in StoryProof, then place one Code widget on the canvas.
Sources
- Code Injection, Readymag Help Center. Checked 2026-11-13.
- Hotjar (example of Code widget and project code placement), Readymag Help Center. Checked 2026-11-13.
Last updated 2026-11-13.