Bricks installation
Testimonials in Bricks Builder Code Elements
A Bricks Code element only runs what you paste once code execution is switched on, your user has the Execute code capability, and the code carries a valid signature. Miss one of those and visitors see either highlighted source text or an error placeholder. This guide walks the three gates, then keeps the script in one site wide field.
- Div for a signed Code element
- Script for the Body (footer) scripts field
- The three settings that decide whether code runs
Code for Bricks
Split the embed between a Code element and the footer field
Add your widget id. The div goes into a Code element where the testimonials should appear. The script goes once into Bricks’ site wide Body (footer) scripts, so any page with a StoryProof div gets filled.
Part 1 · A Code element on the page, with Execute code on
Bricks editor › add element › Code › PHP & HTML › tick Execute code › Sign code
<div data-storyproof-widget="YOUR_WIDGET_ID"></div>Part 2 · Site wide footer scripts
WordPress dashboard › Bricks › Settings › Custom code › Body (footer) scripts
<script src="https://app.storyproof.io/embed.js" async></script>Save the page after signing, then open it logged out. Highlighted code on the page means Execute code is off; an error box means the signature is missing or out of date.
Your id is placed into the code in this browser tab only. Nothing is saved or sent.
The problem, solved
Bricks pages where the testimonials never appear
- Problem 1
The page shows my code as text
Without Execute code ticked, the Code element is a code display block: it prints the HTML with syntax highlighting instead of running it.
How StoryProof solves it
Tick Execute code so the div renders as HTML. The StoryProof embed is only a div and an async script, so there is no PHP to run.
- Problem 2
Execute code is not even offered
Bricks hides the execution controls and shows a notice when code execution is off for the site or your user lacks the capability.
How StoryProof solves it
An administrator enables code execution under Bricks › Settings › Custom code and grants the Execute code capability. After that the two embed lines work like any other HTML.
- Problem 3
It worked until I edited it
Bricks signs executable code and checks the signature before running it. Any edit, even swapping a widget id, makes the old signature stop matching.
How StoryProof solves it
Sign again after every edit. Keeping the element down to one div means the change you make most often, choosing testimonials, happens in StoryProof and never touches the signed code.
- Problem 4
Script pasted into every Code element
Copying the full embed into each Code element means several copies of the same script and more code to sign.
How StoryProof solves it
Put embed.js once in Body (footer) scripts. One copy per page fills every StoryProof div on it, so each Code element carries just its div.
- Problem 5
Different services need different quotes
A Bricks site built for an agency client often has a page per service, and one general testimonial set fits none of them well.
How StoryProof solves it
Tag testimonials by service in StoryProof, build a widget for each page from the matching approved ones, and give each Code element that widget’s div.
In StoryProof
Install it in Bricks
Step 1 of 5
Build the widget in StoryProof
Create a widget for the page, add the approved testimonials it should show and choose a layout for the container width.
Step 2 of 5
Turn on code execution
In the dashboard, open Bricks › Settings › Custom code and enable code execution. Check that the editing user’s role has the Bricks Execute code capability.
Step 3 of 5
Add the script once
On the same Custom code screen, paste the embed.js line into Body (footer) scripts and save. Bricks places it just before the closing body tag on every page.
Step 4 of 5
Place and sign the Code element
In the Bricks editor, add a Code element, paste the div into PHP & HTML, tick Execute code, then press Sign code (or CMD/CTRL + R with the cursor in the editor). Save the page.
Step 5 of 5
Check it logged out
Open the page in a private window at phone and desktop widths. If you see an error placeholder, open the structure panel’s fingerprint icon to find unsigned code.
Where the StoryProof script can live in Bricks
Before you start
Bricks specifics
Signatures break on every edit
Changing signed code invalidates its signature, and Bricks then shows an error placeholder instead of running it. Plan to sign again whenever the div changes.
Code execution is a site decision
Enabling it lets users with the capability run PHP too. Grant Execute code only to people who should have that power; clients editing text do not need it.
Render without wrapper
With Execute code on, Bricks offers Render without wrapper. It removes the element’s outer div, and Bricks notes the element’s Style settings then stop applying.
No Bricks element from StoryProof
StoryProof has no Bricks add on. The Code element and custom code fields already in Bricks are all the integration needs.
Docs as of 2026-11-14
The steps follow Bricks Academy as read on 2026-11-14 and have not been tried on a live site. Widgets per workspace: Free 1, Starter 5, Pro unlimited. A small "Powered by StoryProof" badge shows until Pro.
FAQ
Questions people ask
Short answers to what usually comes up next.
Why does Bricks ask me to sign plain HTML?
Bricks signs whatever is in an executable Code element’s PHP & HTML editor, because that editor can also run PHP. The signature confirms an administrator approved that exact code.
Can I use the JavaScript tab of the Code element for embed.js?
Bricks wraps that tab’s content in script tags for you, so it expects JavaScript itself. The StoryProof line is an HTML tag that loads a file, which belongs in Body (footer) scripts.
I get a CODE SIGNATURES ARE LOCKED message. What now?
Replies on the Bricks forum say this appears only when BRICKS_LOCK_CODE_SIGNATURES is defined in the site’s code. Ask whoever manages the theme files to lift it while you sign.
Can the widget sit in a Bricks template?
Yes. A Code element in a header, footer or section template behaves the same, and it is signed once in that template rather than on every page.
Still have a question? Ask the StoryProof team or book a demo.
Signed, placed, and filled with real customer proof
Collect testimonials, approve the ones you want, and add one div to a Bricks Code element.
Sources
- Code element, Bricks Academy. Checked 2026-11-14.
- Code signatures, Bricks Academy. Checked 2026-11-14.
- Custom Code, Bricks Academy. Checked 2026-11-14.
- WAIT: CODE SIGNATURES ARE LOCKED error, Bricks Community Forum. Checked 2026-11-14.
Last updated 2026-11-14.