# 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.

Source: https://sitebackend.com/docs/reference/embed-script · Updated: 2026-10-11

`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.

```html title="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

| Attribute                 | Value                                                                                                    |
| ------------------------- | -------------------------------------------------------------------------------------------------------- |
| `data-sitebackend-widget` | The 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](https://sitebackend.com/docs/getting-started/sites).

## Content Security Policy

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

```text title="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.