Review Widgets

Review Widgets place your public customer reviews on a website with one copy-and-paste script. Choose the Simple editorial stack or the Cloud responsive gallery in the portal; both use the same installation code and update without reinstalling the snippet.

Install a Widget

1. Go to Content Management > Review Widgets.
2. Create or open a widget and configure Setup, Content, Appearance, and Behavior.
3. Open Preview & Install.
4. Copy the generated script and paste it where the reviews should appear.

<script
    defer
    src="https://YOUR-FSREVS-DOMAIN/widgets/TENANT_ID/WIDGET_ID/embed.js"
></script>

The widget automatically fills the width of its containing block and manages its own height. Do not set a fixed iframe height, and do not install separate desktop and mobile snippets. A normal block, column, or page-builder HTML component is enough.

Tip

Install the script once. Review, theme, filter, and display-setting changes are controlled in the portal and do not require editing the customer website.

Control Placement and Width

The generated iframe has the stable class .fs-reviews-widget-frame. Use it for optional exterior spacing or sizing:

/* Add space above and below the widget */
.fs-reviews-widget-frame {
    margin-block: 24px;
}

/* Limit the widget width and center it */
.fs-reviews-widget-frame {
    display: block;
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
}

/* Round the exterior frame */
.fs-reviews-widget-frame {
    border-radius: 16px;
}

You can also constrain the widget with an ordinary wrapper. The widget always responds to the resulting container width; customers never maintain its height.

Exterior and Interior Styling

Normal website CSS can style the iframe exterior and its surrounding layout through .fs-reviews-widget-frame. Because the reviews live inside an iframe, interior changes use the opt-in marked-CSS mechanism below.

Custom styling is optional. Simple and Cloud are complete themes without overrides.

Raw Widget CSS

Add data-fs-reviews-css and media="not all" to a style block on the host website. The marker keeps the CSS from affecting the host page and lets the widget loader deliver it only to review-widget frames.

<style media="not all" data-fs-reviews-css>
    [data-fs-reviews-root] {
        --fs-reviews-accent-color: #315b73;
        --fs-reviews-border-radius: 18px;
        --fs-reviews-surface-color: #fffdf8;
    }
</style>

Linked Widget CSS

The same marker works with a public HTTPS stylesheet maintained on your website:

<link
    rel="stylesheet"
    media="not all"
    data-fs-reviews-css
    href="https://example.com/review-widget.css"
/>

To apply marked CSS to only one widget on a page, add its public widget UUID:

<style
    media="not all"
    data-fs-reviews-css
    data-fs-reviews-widget-id="WIDGET_ID"
>
    [data-fs-reviews-root] {
        --fs-reviews-accent-color: #8a4b32;
    }
</style>

Marked styling transports CSS only. It does not transport HTML or JavaScript, and it does not require a custom domain, an allowed-domain list, or theme-specific installation code.

Supported Styling Tokens

Set these CSS custom properties on [data-fs-reviews-root]. They have the same meaning in Simple and Cloud.

Token	Purpose
--fs-reviews-font-family	Metadata and control font stack
--fs-reviews-review-font-family	Review-body font stack
--fs-reviews-text-color	Primary text color
--fs-reviews-muted-color	Supporting text color
--fs-reviews-accent-color	Links, controls, and focus accent
--fs-reviews-rating-color	Rating stars and indicators
--fs-reviews-canvas-background	Outer canvas color or gradient
--fs-reviews-surface-color	Review-card surface
--fs-reviews-reply-surface-color	Team-reply surface
--fs-reviews-border-color	Card and control borders
--fs-reviews-border-radius	Review-card corner radius
--fs-reviews-card-gap	Space between reviews
--fs-reviews-card-padding	Space inside each review
--fs-reviews-shadow	Review-card shadow

For example, change typography and surfaces without depending on a particular theme’s markup:

<style media="not all" data-fs-reviews-css>
    [data-fs-reviews-root] {
        --fs-reviews-font-family: ui-sans-serif, system-ui, sans-serif;
        --fs-reviews-review-font-family: Georgia, serif;
        --fs-reviews-canvas-background: #f3f6f7;
        --fs-reviews-surface-color: #ffffff;
        --fs-reviews-reply-surface-color: #eaf1f2;
    }
</style>

Supported Semantic Hooks

Use these stable hooks for advanced CSS that needs more precision:

[data-fs-reviews-root]
[data-fs-reviews-list]
[data-fs-reviews-review]
[data-fs-reviews-rating]
[data-fs-reviews-date]
[data-fs-reviews-body]
[data-fs-reviews-read-more]
[data-fs-reviews-author]
[data-fs-reviews-avatar]
[data-fs-reviews-tagline]
[data-fs-reviews-reply]
[data-fs-reviews-photos]
[data-fs-reviews-photo]
[data-fs-reviews-pagination]
[data-fs-reviews-empty]

Internal utility classes, nested wrappers, and undocumented markup are implementation details and may change. Use the stable iframe class, semantic hooks, and styling tokens instead.

Widget Options

Both themes support automatic or curated review selection, location and review-flow filters, employee filtering, rating display, dates, reviewer photos and taglines, additional photos, public team replies, Unicode-aware read more, and simple or numbered pagination.

• Simple presents reviews as a refined single-column editorial stack.
• Cloud uses a responsive one-, two-, or three-column gallery based on the available embed width.

The same installation snippet works for either theme.

For every selection, appearance, pagination, preview, and enabled-state option, see Review Widget Settings.

Disable an Installed Widget

Turn off Widget Enabled and save when you need to stop showing an installed widget temporarily. The embed collapses safely without requiring you to remove its script. Re-enable and save the widget when it is ready to return.

Related Pages

• Review Widget Settings
• Flow Activity
• Public Pages