Embed script reference (widget.js)

How SiteBackend's widget.js embeds testimonial forms and widgets - the embed code, sizing, themes, single-page apps, domains and Content Security Policy.

2 minUpdated

widget.js puts SiteBackend's testimonial collect form and testimonial widgets on your website. You don't write any JavaScript: add a placeholder div where each one should appear and load the script once.

Embed code
<div data-sitebackend-widget="w_YOUR_WIDGET_ID"></div>
<script src="https://sitebackend.com/widget.js" async></script>

Copy the exact code, with your ID, from Testimonials → Collect or from a widget's page in the dashboard.

The placeholder

AttributeValue
data-sitebackend-widgetThe ID from the dashboard. IDs starting with c_ are collect forms; IDs starting with w_ are widgets.

The script puts an <iframe> inside each placeholder. Style the div itself (width, margins) as you like; leave its contents empty.

Loading the script

  • Load it once per page, even with several placeholders. Loading it twice does no harm.
  • async lets the browser download the script without blocking HTML parsing. The iframes use the browser's lazy loading, so offscreen embeds can load later.
  • The loader has no dependencies and sets no cookies. The iframe content also loads SiteBackend's styles and application code.

Sizing

The iframe is always as wide as its placeholder, and its height follows its content: it resizes itself when testimonials load, the carousel moves or the visitor's screen size changes. A widget with nothing to show has a height of 0, so it takes up no space. You don't need to set a height.

Single-page apps and client-side navigation

The script watches the page for placeholders that are added later, so it works with Next.js, Nuxt, Astro view transitions, React, Vue and other frameworks that change pages without a full reload. If you change a placeholder's data-sitebackend-widget value, it swaps to the new widget.

Themes

Colours, light or dark mode and corners are set in the dashboard, not in the embed code, so you can change them without editing your site. The iframe background is transparent, so it sits on your page's own background.

Which websites can embed it?

If the site has a domain in Site → Settings, its collect form and widgets can be embedded on that domain and its subdomains over HTTPS, in the SiteBackend dashboard preview, and on http://localhost and http://127.0.0.1 on any port for testing. Elsewhere, the browser refuses to show them. Without a domain, they can be embedded anywhere. See sites.

Content Security Policy

If your site sends a Content-Security-Policy header, allow SiteBackend to load the script and the iframes:

Content-Security-Policy
script-src 'self' https://sitebackend.com;
frame-src https://sitebackend.com;

Add these to your existing policy rather than replacing it.

Privacy

The widget iframes don't set cookies or load analytics. They show only approved testimonials and their public details: the person's name, title, company, photo, rating, message and date. Testimonial email addresses and IP hashes are excluded from the public widget data.