Skip to main content

Elementor installation

Elementor Testimonials Using the HTML Widget

Elementor’s own Testimonial and Testimonial Carousel widgets hold quotes you type into the editor. To show testimonials collected and approved in StoryProof, drag Elementor’s HTML widget into the section instead and paste the embed code there. By default only administrators can use that widget.

  • Code ready for the HTML widget’s code area
  • Why an Editor role cannot see the HTML widget
  • Swapping a typed Testimonial Carousel for live proof
Use the free toolStart free (opens in a new tab)
Elementor · An HTML widget in the Elementor section

Elementor editor › widget panel › search "HTML" › drag into the column › HTML Code

<div data-storyproof-widget="YOUR_WIDGET_ID"></div>
<script src="https://app.storyproof.io/embed.js" async></script>

1 place to paste in Elementor. Your widget id goes in once.

Free tool, no sign-upTry it below

Code generator

Paste this into Elementor’s HTML widget

Enter your widget id. Both lines go into the HTML Code field of one HTML widget, dropped into the column where the testimonials should appear.

Shown in StoryProof when you copy a widget’s embed code.

An HTML widget in the Elementor section

Elementor editor › widget panel › search "HTML" › drag into the column › HTML Code

<div data-storyproof-widget="YOUR_WIDGET_ID"></div>
<script src="https://app.storyproof.io/embed.js" async></script>

Click Publish or Update, then open the page in a new tab while logged out. The editor canvas may not run the script; the published page is what counts.

Your id is combined with the code in this browser tab only.

The problem, solved

Why Elementor testimonial sections go stale, and what StoryProof changes

  • Problem 1

    The carousel only shows what I typed

    Elementor’s Testimonial Carousel is a set of text fields. A new review means opening the editor, adding a slide and republishing the page.

  • Problem 2

    Typed slides cannot hold a customer video

    The built-in widgets take a name, an image and a paragraph. Recorded praise has nowhere to go unless you upload and embed each clip yourself.

  • Problem 3

    Another add-on pack just for testimonials

    Third-party Elementor add-ons bring their own update cycle and settings screens, on top of the theme and Elementor itself.

  • Problem 4

    Carousel styles all look the same

    A slider is not always right; a services page might want a grid and a pricing section a single quote.

  • Problem 5

    Reused templates copy the script everywhere

    Saving the HTML widget in a template you reuse is handy, but two of those on one page means two copies of the script.

Typed Testimonial Carousel versus an embedded widget

Elementor Testimonial Carousel

  • Each slide typed into the editor by whoever builds the page
  • Adding a quote means editing and republishing the page
  • Text and an image per slide
  • Same slides wherever the template is reused

HTML widget with StoryProof

  • Quotes come from customers through a collection link and are approved first
  • You change the selection in StoryProof, not in the page
  • Video, audio or written testimonials
  • A different widget, and so a different selection, per page

In StoryProof

Add it to an Elementor page

Step 1 of 4

Choose the testimonials and layout

In StoryProof, create a widget for this page, add the approved testimonials it should show and pick a layout that suits the column width.

Before you start

Elementor specifics

  • HTML widget is admin only by default

    Elementor restricts the HTML widget to administrators because pasted code can carry malware. Another role can be granted access in the Role Manager; give it out sparingly.

  • Site-wide code needs Elementor Pro

    Elementor’s Custom Code area, which can load a script at body end on chosen pages, is a Pro feature. On free Elementor keep the script inside the HTML widget.

  • Optimisation plugins can delay scripts

    Plugins that combine or postpone JavaScript can hold a third-party script back. If the widget is missing only on the live site, exclude embed.js from those settings.

  • Not an Elementor add-on

    StoryProof has no Elementor widget of its own and none is needed: it works through the HTML widget Elementor already ships.

  • Badge and docs date

    Widgets per workspace: Free 1, Starter 5, Pro unlimited. A small "Powered by StoryProof" badge shows until Pro. The Elementor steps follow Elementor’s help center as read on 2026-11-12 and have not been tried on a live site; editor labels can change between releases.

FAQ

Questions people ask

Short answers to what usually comes up next.

Do I need Elementor Pro?

No. The HTML widget is in free Elementor. Pro only adds the Custom Code area for loading the script site-wide.

My client has the Editor role and cannot find the HTML widget. Why?

Elementor hides it from non-admin roles by default. An administrator can place the widget once, or grant access in Role Manager if the client really needs to paste code.

Can I keep the Elementor Testimonial Carousel too?

You can, but showing the same quote in both looks repetitive. Many sites keep one hand-picked carousel slide on the homepage and use the embedded widget on the reviews or services page.

The widget looks cramped in a narrow column. What should I change?

Either widen the column in Elementor or switch the StoryProof widget to a compact layout such as Testimonial List or Rating Badge. Grids and walls want most of the page width.

Still have a question? Ask the StoryProof team or book a demo.

Replace typed slides with testimonials customers sent

Collect, approve, and paste one HTML widget into Elementor.

Start free (opens in a new tab)

Sources

  1. HTML widget, Elementor Help Center. Checked 2026-11-12.
  2. Add custom code, Elementor Help Center. Checked 2026-11-12.

Last updated 2026-11-12.