testymo.
Open the app →

Integrations  ★  Bubble

Testimonials on Bubble, in one HTML element

Bubble takes the tag in an HTML element drawn where the section belongs, with two checkboxes deciding whether it behaves: iFrame mode off, Stretch to fit content on. The other thing to internalize is Bubble's two-world split — preview always runs your development version, and nothing reaches users until you deploy to live.

Where the tag goes
An HTML element from the palette's Visual Elements group, drawn where the section belongs, with the tag pasted into its HTML property.
Plan needed
No documented gate on the element itself. Going live is what Bubble describes as the Starter plan's job — the Free plan is for development, where the widget still renders in preview.

01 Where the tag goes in the Bubble editor

Bubble’s element for raw markup is the HTML element, in the palette’s Visual Elements group. Its manual entry describes the case exactly: “Some services provide embeddable HTML code to put on a page.”

  1. Open the page in the Bubble editor.
  2. In the element palette on the left, find HTML under Visual Elements — click it and draw the element where the testimonial section belongs, or drag it straight onto the canvas.
  3. In the property editor that opens, paste the script tag into the HTML field.
  4. Set the two checkboxes that decide everything: leave Display as an iFrame unchecked, and check Stretch to fit content — with it, per Bubble’s manual, the element “will resize automatically” and elements below “will be pushed down automatically”, which is what a growing testimonial wall needs.
  5. Preview to check it, then deploy to live when the page ships — the two are different worlds, covered below.
Bubble's element palette with the Visual Elements group open and the HTML element visible in the list
The element palette — HTML sits in the Visual Elements group, marked </>. Screenshot from Bubble’s manual.

Bubble’s header fields — Script/meta tags in header in Settings, and the page’s Page HTML Header — inject into <head>, where nothing visible can render. They are for analytics and meta tags, not for a widget that needs a spot on the page.

02 What Bubble gates, and what it does not

Nothing in Bubble’s manual gates the HTML element by plan — not the element, not the header fields. The gate Bubble does document sits somewhere more fundamental: shipping. In its pricing docs, “Starter gives you everything you need to go live, including custom domains, ability to deploy to the web or app stores, and backend workflows”, while the Free plan is “designed for development”.

In practice that means: on Free you can add the element, paste the tag, and see the widget render in preview — and putting the page in front of real visitors is what the Starter plan is for. That gate belongs to the app, not the widget; every embedded anything on a Bubble page shares it.

Sources

Plan names and menu labels are the platform’s to change. If what you see differs from what is written here, the linked page is the authority — and tell us so this page gets fixed.

03 When the widget doesn’t show up

The element is blank in the editor canvas.
Expected, and documented: “If the HTML contains script tags, the script tags will only run in run-mode and not in the editor.” The canvas never runs the widget; Preview does.
It works in preview but is missing from the real site.
Preview loads the development version — the URL says version-test — which “is separate from your live app and only reflects the latest changes in your editor”. Deploy to live from the version control button, top right, and the live page catches up.
The widget is cut off, or sits on top of the elements below it.
One of the two checkboxes is set wrong: Display as an iFrame is on, or Stretch to fit content is off. With iFrame off and stretch on, the element grows with the testimonials and pushes everything below it down automatically — no fixed height to maintain.
You pasted the tag into “Script/meta tags in header” and see nothing.
That field injects into <head> on every page of the app — there is no spot on any page for a widget to render at, so nothing visible appears. Move the tag into an HTML element drawn where the section belongs.

04 What the one tag actually does

The line you paste is a plain external script. There is no plugin, no app to install, no account to connect on the Bubble side, and nothing to configure in the editor afterwards. Testymo generates the tag when you create a widget; the address in it is your widget’s own, and this is the live demo one: 

<script src="https://testymo.com/w/demo.js" async></script>

The server builds that script per request: the rendering code and your approved testimonials arrive together in one response, so the page makes one request and no follow-up fetches. The demo tag printed above weighs 16.7 KB of JavaScript, about 6 KB over the wire. That figure covers the demo widget's eight quotes. The testimonials ride inside the script rather than arriving in a second request, so a wall carrying thirty of them weighs thirty quotes' worth of text — measure the embed you paste in, not this one. The page-speed guide has the method behind that number, and the case for measuring whatever you embed rather than trusting the category.

It renders into an open shadow root at the exact spot the tag sits, which makes the styling isolation work in both directions: your Bubble theme cannot restyle the widget by accident, and the widget’s CSS cannot leak into your page. It sets no cookies, calls no third party, and reads nothing about your visitors. When you approve a new testimonial, it appears on the next page load — you never touch the site again.

05 The widget, running on this page

Everything below this line was drawn by that one script tag — the same file, on the same terms, that you would paste into Bubble. Eight approved testimonials in the wall design, rendered as a free plan renders them, footer link and all.

06 Where to go next

An embed script is one of three ways to put testimonials on a site, and it is not always the right one — a handful of quotes that will not change for a year are better hand-coded. The full guide to adding testimonials to a website prices all three routes: setup, upkeep, and page weight. Once you know the quotes are arriving, the layout patterns guide covers which shape to show them in, and getting permission first covers the part most sites skip.

The same tag, in another editor