Customizing Widgets

Change the layout, colors, fonts, and filtering options to match your brand and show the right testimonials.

In your SayWall dashboard, go to Widgets and click any widget to open the editor. Changes are previewed live — you don't need to save to see the result.

Click Save when you're happy with your changes. The widget on your site updates immediately — no re-embedding needed.

Layout

Grid

Displays testimonials in a responsive multi-column grid. Columns adjust based on available width — typically 2 columns on tablets and 3 on desktop.

Best for: landing pages with enough vertical space to display 6–12 testimonials at once.

Carousel

Displays testimonials in a horizontal scroll carousel with navigation arrows. One or a few testimonials are visible at a time and the user can swipe or click to advance.

Best for: limited-space sections like pricing pages, footers, or sidebars.

Single / Featured

Highlights one testimonial at a time, often with a larger format. Rotates automatically or stays static.

Best for: hero sections, above-the-fold placement, or highlighting one key customer story.

Design Settings

Colors

You can set a custom background color and text color for the widget. By default the widget inherits neutral colors that blend into most pages.

Leave colors at their defaults if your site uses a standard white or dark background — the widget adapts automatically and a custom color can look inconsistent across pages.

Dark Mode

Enable Auto dark mode to let the widget respond to the visitor's system preference (prefers-color-scheme). When enabled, the widget automatically switches between light and dark versions without any extra configuration on your end.

If your site has its own dark mode toggle, prefer the Auto setting — it stays in sync with the visitor's OS setting regardless of your site's toggle state.

Fonts

By default, widgets inherit the font from your page via CSS inheritance. If you want a specific font, you can set one in the widget settings — SayWall supports Google Fonts and will load the font file automatically.

Border Radius

Controls the corner rounding on testimonial cards. Set to 0 for sharp corners, or a higher value for a softer, more rounded look.

Filtering Testimonials

By default, a widget shows all approved testimonials from its project. You can narrow this down using filters.

Minimum Star Rating

Set a minimum rating (e.g., 4 stars and above) to only show your best-rated reviews. This is useful when you have a mix of 3-star and 5-star reviews and want to keep the widget focused on high praise.

Number of Testimonials

Control how many testimonials are loaded in the widget at once. For carousels, this determines the pool the carousel draws from. For grids, this is the total shown.

Showing more testimonials increases the initial payload. For most pages, 6–12 testimonials is a good balance between social proof and load time.

The editor preview uses your current approved testimonials. The live widget on your site pulls the same data from saywall.io/w/YOUR_WIDGET_ID — the content is identical.

If you approve a new testimonial and it's not appearing in the live widget, wait a few seconds and refresh. The widget cache refreshes within seconds of a testimonial being approved.

Advanced: CSS Customization

For deep customization, you can override widget styles using CSS custom properties (variables). The widget exposes CSS variables like --sw-bg, --sw-text, --sw-border that you can override from your page.

CSS targeting inside Shadow DOM requires the ::part() pseudo-element or CSS custom properties. Standard CSS selectors do not penetrate the shadow boundary by design.

For most use cases, the widget editor settings are sufficient. If you need custom CSS, contact support — we can advise on the right approach for your specific widget type.

Opening the Widget Editor