Zenfolio installation
Zenfolio Testimonials in a Code Block
Zenfolio’s website editor builds pages from stacked blocks, and one of them, the Code Block, accepts third party HTML and can execute JavaScript. It is reserved for Professional and Advanced subscribers. The block also has its own Devices switches for desktop, tablet and mobile, a Title and Body above the code, and a habit of rejecting anything it cannot parse with an Invalid code message.
- The two lines for Zenfolio’s HTML Code Editor
- Device switches, title and body settings
- What Invalid code and an empty block usually mean
Zenfolio Code Block
Your Zenfolio Code Block snippet
Type your widget id and copy the result into the HTML Code Editor of a Code Block. Both lines go in the same block. A second widget on the same page can go in its own Code Block with just the div.
Part 1 · Code Block: HTML Code Editor
Website › Manage Website › your page › add block icon › Code Block › HTML Code Editor
<div data-storyproof-widget="YOUR_WIDGET_ID"></div>
<script src="https://app.storyproof.io/embed.js" async></script>Part 2 · A second Code Block on the same page
Another Code Block lower on that page › HTML Code Editor
<div data-storyproof-widget="YOUR_WIDGET_ID"></div>Click Done in the editor, set the block’s Devices, then choose Publish and Publish Site. Load the public page to see the widget.
This snippet is put together in your browser. Your widget id is not kept.
The problem, solved
When the Zenfolio Code Block fights back
Zenfolio says it cannot troubleshoot third party HTML, so it helps to know which problems are the block’s and which are the code’s.
- Problem 1
Zenfolio says Invalid code, please try again
Zenfolio shows that message when the block cannot accept what was pasted, often because part of the code was lost in copying.
How StoryProof solves it
Copy the snippet again from the tool above. The StoryProof embed is only a div with the widget id and one async script line, so a clean copy is short and easy to check.
- Problem 2
The block saved but shows nothing
Zenfolio notes that content sized at 100% or 0px in either direction may not appear, and asks for a real pixel value.
How StoryProof solves it
The StoryProof div sets no width or height of its own. If you added a wrapper around it, remove it or give it pixel dimensions, then republish.
- Problem 3
Missing on phones but fine on desktop
Each Code Block has Devices switches for desktop, tablet and mobile, and one may be off.
How StoryProof solves it
Turn on every device you want, and pick a widget layout that suits a narrow screen, such as a carousel, so mobile visitors are not scrolling past a tall wall.
- Problem 4
Event clients never come back to review
School and event buyers order prints and move on, so a follow up rarely lands.
How StoryProof solves it
Print your StoryProof collection link as a QR code on order inserts or event signage. Buyers record, speak or type a few words, and you approve each one first.
- Problem 5
There is no Code Block on my plan
Zenfolio limits the Code Block to Professional and Advanced subscribers, and trials must upgrade.
How StoryProof solves it
Link to the hosted Wall of Love that every StoryProof plan includes from a Zenfolio menu item or text link until you upgrade.
In StoryProof
Add the widget in Zenfolio
Step 1 of 5
Open the website editor
Click the Website icon on the left of your Zenfolio account, then Manage Website. Select the page if your site has several.
Step 2 of 5
Insert a Code Block
Click the add block icon on the right where the testimonials should sit, scroll the block options and choose Code Block.
Step 3 of 5
Paste into the HTML Code Editor
Click the HTML Code Editor (or the block itself), paste the snippet and click Done. Add a Title such as Kind words from clients if you like.
Step 4 of 5
Choose devices and position
Set Devices to desktop, tablet and mobile. Use the up and down arrows on the right to move the block into place.
Step 5 of 5
Publish the site
Click Publish, then Publish Site. Changes stay in the editor until you do.
Before you start
Limits on Zenfolio
Professional and Advanced only
Zenfolio says the Code Block is exclusive to those subscribers and that trials must upgrade to get it.
Some JavaScript may misbehave
Zenfolio says the block can execute JavaScript but that some executable code may stop it working properly. Check the published page.
No help with the code itself
Zenfolio states it cannot troubleshoot issues with the HTML code. Widget questions go to StoryProof support.
The head tag is not the place
Zenfolio’s Custom head field is for things like site verification tags, and it warns that edits there can break the site. The widget belongs in a Code Block.
Zenfolio help as of 2026-11-14
Menu names, plan rules and the sizing advice come from Zenfolio’s help as read on 2026-11-14. These steps have not yet been followed on a live Zenfolio site.
FAQ
Questions people ask
Short answers to what usually comes up next.
Does the Code Block preview the widget before publishing?
Zenfolio’s article does not describe a preview for the Code Block. Publish the site and check the public page.
Can I put the widget on a custom page instead?
Zenfolio’s older help mentions custom pages that accept embedded HTML. The Code Block is the current, documented route, and works on any page you can add blocks to.
Why is the widget off centre?
Zenfolio says misalignment usually comes from an alignment setting inside the pasted code. The StoryProof snippet has none, so check for anything you added around it.
Can I duplicate the block onto another page?
The + icon duplicates a block on the same page. On another page, add a fresh Code Block and paste the snippet, using a different widget id if that page needs different testimonials.
Still have a question? Ask the StoryProof team or book a demo.
Show client praise on your Zenfolio site
Collect testimonials from buyers, approve the best, and paste one snippet into a Zenfolio Code Block.
Sources
- Adding Custom HTML Content To Your Website, Zenfolio Success Center. Checked 2026-11-14.
- Adding Custom Code To Your Website’s HEAD Tag, Zenfolio Success Center. Checked 2026-11-14.
- Embedding HTML code and Content into Custom Pages, Zenfolio Support. Checked 2026-11-14.
Last updated 2026-11-14.