Oxygen Builder installation
Oxygen Builder Testimonials with Code Blocks
Oxygen now comes in two generations, and each names its code element differently. On Oxygen 6 the embed goes into an HTML Code element; on Oxygen Classic it goes into the PHP & HTML part of a Code Block. Either way it is two lines of plain HTML, with no PHP and no plugin.
- Code for the Oxygen 6 HTML Code element
- Code for an Oxygen Classic Code Block
- Why the script tag does not belong in JavaScript Code
Code for Oxygen
Pick your Oxygen generation, then paste
Enter your widget id. Use the first card on Oxygen 6 and the second on Oxygen Classic. Both take the full two line embed as plain HTML.
Part 1 · Oxygen 6: an HTML Code element
Oxygen 6 builder › add element › Other › HTML Code › HTML Code field
<div data-storyproof-widget="YOUR_WIDGET_ID"></div>
<script src="https://app.storyproof.io/embed.js" async></script>Part 2 · Oxygen Classic: a Code Block element
Oxygen Classic builder › Add › Code Block › PHP & HTML
<div data-storyproof-widget="YOUR_WIDGET_ID"></div>
<script src="https://app.storyproof.io/embed.js" async></script>Save the page or template, then open the front end in a logged out window. Classic shows Code Block output in its preview, but the published page is the test that counts.
The widget id you type is merged into the code in this tab only. Nothing is stored or sent anywhere.
The problem, solved
What goes wrong with testimonials on Oxygen sites
- Problem 1
The tutorial shows a different Oxygen
Oxygen Classic is now the legacy line and Oxygen 6 has its own element list, so a guide for one sends you looking for panels the other does not have.
How StoryProof solves it
The StoryProof side is identical in both: a div with the widget id and the async embed.js line. Only the Oxygen element name changes, which the generator above covers.
- Problem 2
Pasted into JavaScript Code, nothing loads
Oxygen 6’s JavaScript Code element wraps what you type in a callback that runs on DOMContentLoaded. An HTML script tag inside a JavaScript callback is not valid code.
How StoryProof solves it
Paste both embed lines into the HTML Code element instead. The script line is HTML that loads embed.js, which then fills the div.
- Problem 3
I chose Oxygen to avoid bloat
Developers pick Oxygen for lean output and are wary of testimonial plugins that add their own styles and database tables to every page.
How StoryProof solves it
The embed is two lines and the script is async. Testimonials, approval and layout live in StoryProof, so nothing new is installed in WordPress.
- Problem 4
Every client wants a different look
A coach wants one large quote, a software client wants a grid, and rebuilding a slider for each project eats into the budget.
How StoryProof solves it
StoryProof offers 19 widget layouts, from walls and carousels to compact badges and avatar strips. Each Oxygen page points at the widget whose layout suits it.
- Problem 5
Clients send praise as voice notes
A hand built testimonial section is text and a photo. Spoken or filmed praise ends up in an inbox and never reaches the site.
How StoryProof solves it
Give the client’s customers one StoryProof link where they can record video, leave audio or write, and approve what should appear in the Oxygen page’s widget.
Typed testimonial markup versus an embedded widget in Oxygen
Hand built in Oxygen elements
- A Div, Text and Image element per quote, styled one at a time
- Each new quote means opening the builder and duplicating a card
- Written text only, copied from emails
- The client has to ask the developer for every change
One HTML Code element with StoryProof
- Two lines of HTML, placed once
- New approved testimonials are chosen in StoryProof, not in the builder
- Video, audio and written testimonials from one link
- The client manages the selection without touching Oxygen
In StoryProof
Add StoryProof to an Oxygen page
Step 1 of 4
Set up the widget
In StoryProof, create a widget for this page, choose the approved testimonials and pick a layout that matches the section width you have in Oxygen.
Step 2 of 4
Add the right code element
On Oxygen 6, add an HTML Code element from the Other group. On Oxygen Classic, add a Code Block. Drop it inside the section or div that should hold the testimonials.
Step 3 of 4
Paste plain HTML, no PHP tags
Paste both lines into the HTML Code field, or into the PHP & HTML part of the Classic Code Block. The embed needs no PHP, so leave out any php opening tags.
Step 4 of 4
Publish and view the front end
Save, then load the page logged out at desktop and phone widths. Adjust the parent section’s width or padding in Oxygen if the layout looks cramped.
Before you start
Oxygen specifics
Classic runs Code Blocks during the post
Oxygen’s Classic docs say Code Blocks execute during WordPress’s the_post action, which is fine for HTML like this embed but is why they advise keeping new PHP functions in a plugin instead.
JavaScript Code is for inline scripts
Oxygen 6 outputs the JavaScript Code element before the closing body tag inside a DOMContentLoaded callback. It suits your own inline code, not an HTML tag that loads an outside file.
Optimisation plugins
Plugins that defer or combine JavaScript can hold back embed.js. If the widget appears in a preview but not on the cached live page, exclude the StoryProof script from those settings.
No Oxygen add on from StoryProof
StoryProof does not ship an Oxygen element or WordPress plugin. The built in code elements are the whole integration.
Docs and branding
The Oxygen steps follow Oxygen’s documentation as read on 2026-11-14, partly through search listings for version 6, 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.
How do I tell whether a site runs Oxygen 6 or Oxygen Classic?
Check the Oxygen plugin version on the WordPress Plugins screen. Oxygen describes the Classic line as legacy and has a separate documentation site for it.
Can I put the widget in an Oxygen template so it shows on many pages?
Yes, a code element in a template renders wherever that template applies. Keep one embed.js per page; if a page also has its own widget, give that one only its div.
Will the testimonials render inside the builder canvas?
Classic shows Code Block output in its preview window. Treat any builder preview as a rough guide and confirm on the published page, where the script loads as a visitor sees it.
Do I need PHP for this?
No. The embed is plain HTML. PHP is only relevant if you are writing your own WordPress logic in the same element.
Still have a question? Ask the StoryProof team or book a demo.
Keep the Oxygen build lean and the proof current
Collect and approve testimonials in StoryProof, then drop two lines into one Oxygen element.
Sources
- PHP & HTML (Code Block), Oxygen Classic documentation. Checked 2026-11-14.
- How do I add custom CSS or PHP to my site?, Oxygen Classic documentation. Checked 2026-11-14.
- HTML Code element, Oxygen documentation. Checked 2026-11-14.
- JavaScript Code element, Oxygen documentation. Checked 2026-11-14.
Last updated 2026-11-14.