Embedding widgets

A Proofloop widget is one script tag and one placeholder. It is under 15 KB gzipped, loads nothing from a CDN, and never blocks your page rendering.

The script embed

Build the widget in Display → Widgets, press Get embed code, and paste what it gives you. It looks like this:

<div data-proofloop="wgt_8f2a1c"></div>
<script src="https://yourdomain.com/w/proofloop-widget.js" async></script>

The div can go anywhere. The script can go anywhere too — it is async, so it never holds up your page. Several widgets on one page share a single copy of the script; add the tag once.

Options

Attribute	Values	What it does
`data-proofloop`	Widget ID	Required. Everything else is configured in the dashboard.
`data-theme`	`auto`, `light`, `dark`	Overrides the widget’s saved theme. `auto` follows the visitor’s system setting.
`data-limit`	1–60	Caps how many items load, below whatever the widget is set to.
`data-lazy`	`true`, `false`	Defaults to true: the widget fetches its content when it scrolls into view.

The iframe embed

Use this where you cannot add a script tag — a page builder that strips them, an email platform’s landing pages, a site whose Content Security Policy you do not control.

<iframe src="https://yourdomain.com/w/wgt_8f2a1c/frame"
        style="width:100%;border:0"
        height="640"
        loading="lazy"
        title="Customer testimonials"></iframe>

The iframe cannot resize itself to fit its content when it sits on a different domain, so set a height that suits your layout. The script embed has no such limitation, which is why it is the default.

WordPress

Three ways, in order of how much you will enjoy them.

Block editor

Add a Custom HTML block where the testimonials should appear.
Paste the embed code.
Update the page. The block editor shows a placeholder in the editor and the real widget on the front end.

Elementor, Divi, Beaver Builder and similar

Every one of them has an HTML or Code widget. Drop it in and paste the same code. Do not paste it into a Text widget — those strip script tags on save, and you will get the placeholder with nothing in it.

Theme footer

If you want widgets on many pages, put the script tag once in your theme’s footer (Appearance → Theme File Editor, or a plugin such as WPCode) and then only the div on each page.

If the widget does not appear

Nine times out of ten it is a caching plugin that has minified the script tag away, or a security plugin blocking third-party scripts. Clear the cache first; if it is still missing, add your Proofloop domain to the plugin’s allow list. The iframe embed sidesteps both.

Styling

Colours, corner radius, layout, star style and typography scale are all set in the widget builder, and the builder checks your colour choices for contrast as you pick them — a testimonial nobody can read is not social proof.

The widget deliberately does not ship a font. It inherits yours, so it looks like part of your site rather than an embed. If you need finer control, every element carries a plw- prefixed class you can target from your own stylesheet.

Performance

Measure	Budget	Enforced by
JavaScript	15 KB gzipped	The build fails if it grows past this.
CSS	6 KB gzipped	Same.
DOM nodes	12 per testimonial	Same.
Requests to third parties	Zero	There is no CDN, no font host and no analytics in the widget.

Widget responses are cached for five minutes, so a page that suddenly gets popular does not turn into database load.

What the widget will not do

It will not emit Review or AggregateRating structured data for reviews imported from Google, and there is no setting to make it. Marking up someone else’s platform reviews as your own site’s rich snippets breaks Google’s structured data guidelines and can get the page penalised. First-party testimonials collected through Proofloop are marked up correctly and automatically. See Compliance.