Widget looks different on your website
Find out why a widget's font, colours or layout on your site don't match the builder's preview, and fix each cause.
If a widget shows on your site but doesn't match what you see in the builder, try the quickest check first: wait a few minutes after your last change, then reload your page. If it still differs, find what you see below.
If the widget doesn't appear at all, see Widget not showing on your website. If it shows other testimonials than you expect, see Why doesn't a new testimonial appear in my widget?
Check this first
A published widget has no separate draft. The builder saves each edit to the live widget, and your site can take a few minutes to pick it up.
- Make sure the change saved. The builder's top bar shows Saving..., then when it last saved, such as Saved just now. While it shows Unsaved changes or a message in red, the change hasn't reached your widget.
- Make sure you edited the widget that's on your page. The
data-widget-keyin the code on your page is the same as the one under Get code. A copy made with Duplicate has its own code. - Compare like with like. Click Preview in the top bar. Choose Desktop, Tablet or Mobile to match the space the widget has on your page, and switch the page background to Dark or Custom if your page isn't light.
The font is different
A widget with no font chosen uses the font of the page it's on. The builder can't know your site's font, so its preview shows the builder's own.
On the Design tab, open Typography. If Font Family shows Your website's font, no font is chosen. Pick one, and your site and the preview show the same font.
- A font you uploaded shows on your site only on Pro, Premium and Business. See Use your own fonts.
- The text changes font a moment after it appears. Most fonts load with the widget, and the text shows in a standby font until the font arrives. If it never arrives, your site's Content Security Policy may be blocking it: see Allow it in your security policy.
- System Default uses each visitor's own system font, so it varies from device to device.
- With the iframe code, the widget sits in a frame of its own and can't use your site's font. Choose one in Font Family.
The colours are different
- Your plan doesn't include custom colours. The Design tab then shows a notice that starts "Custom colours need" and names a plan. Your site shows the standard colours in place of the ones you changed, and so does the preview. Your choices are kept. Custom colours are on Pro, Premium and Business. For the colours every plan shows, see Customize a widget.
- The theme is Auto. Under Theme & Frame, Auto follows each visitor's dark-mode setting, so a visitor in dark mode can get a dark card with light text. The builder shows the version for your own device. Choose Light or Dark to show everyone the same. See Does the widget have a dark mode?
- Your page shows through. A widget has no background of its own until you set Widget Background under Theme & Frame, so your page's colour shows around the cards.
The layout or size is different
A widget fits the space your page gives it, not the browser window. In a narrow column it shows fewer cards side by side: a Masonry Grid or a Carousel shows at most two in a space up to 768 px wide, and one in a space up to 480 px. Some styles also scale their text and spacing to the space.
- See it in the builder. Click Tablet or Mobile above the preview.
- Check the widget's own limits. On the Settings tab, Size holds Width and Max width and, for most styles, Min and Max under Height. A widget never grows wider than its Max width.
- Check the block around it. A block on your page with a fixed height can hold the widget to that height or cut it off. Let the block grow with its content.
- With the iframe code, the frame keeps the height set in the code. See If you used the iframe code.
The text is in another language
On Business, a widget can show each visitor translated testimonials. When Show testimonials in, under Translations & texts on the Settings tab, is set to Visitor's language, the language comes from your page or, when the page doesn't state one, from the visitor's browser.
The builder's preview starts on Original. Choose a language in the list above the preview to see what those visitors get. To show everyone the same text, choose One fixed language or Original language. See Translate testimonials.
A setting you chose is missing
The builder keeps every setting, but your site shows only what your plan includes. If your plan changed, or you built the widget before signing up, check these:
- A custom card layout: Premium and Business.
- Your own wording from Widget texts: Pro, Premium and Business, and wording for each language on Business.
- Translated testimonials: Business. On other plans every visitor sees the original text.
- Custom fields on cards: Pro, Premium and Business.
- Custom CSS: Business.
- Custom JavaScript: Business. It runs only on your site, never in the builder's preview, and not with the iframe code.
- A hidden "Powered by" badge: Pro, Premium and Business. On other plans the badge always shows. See Remove ReTestimonial branding.
What your site can and can't change
Your site's stylesheet can't reach the parts inside a widget, such as its cards, stars and buttons. Style them on the Design tab instead. What does come from your page is the font when you haven't chosen one, the space the widget gets, and the background behind it.
Still looks different?
Contact us and include:
- the address of the page where you added the widget;
- the widget's name;
- a screenshot of the widget on your page, and one of the builder's preview.
Next steps
Was this page helpful?
Widget not showing on your website
Find out why a widget doesn't appear on your site, from an unpublished draft to a blocked script, and fix each cause.
Video testimonial still processing
Why a new video testimonial shows no video yet, how long processing takes, and what to do when a video is refused or fails to process.