# Customize a widget

Use the widget builder to choose testimonials, pick a layout, style each element, preview the widget on any device and publish it.

The widget builder is where you choose what a widget shows and how it looks. It opens when you create a widget. If you built your widget on our website before you had an account, see [Keep the widget you built before signing up](/help/display/keep-a-widget-you-built-before-signing-up). To come back to it later, click the widget's name, or **Edit**, on the **Widgets** page, under **Share** in your project's sidebar.

The builder has four tabs on the left: **Content**, **Layout**, **Design** and **Settings**. The preview on the right updates as you work, and your changes save automatically.

1. **Choose your testimonials**

   On the **Content** tab, pick a **Selection Mode**:

   - **Curate**: you pick the testimonials and their order. Click **Add**, tick the testimonials you want and click **Add Selected**. Drag a testimonial by its handle to move it, or click the X beside it to remove it.
   - **Auto-sync**: rules such as rating, type, tags and source keep the widget filled as new testimonials are approved.
   - **Proof Match**: shows the testimonials that fit each page of your site, by URL, campaign and referrer. Proof Match is available on Premium and Business. See [Set up Proof Match rules](/help/display/set-up-proof-match-rules).

   A widget only ever shows approved testimonials. If you switch away from **Curate**, your hand-picked testimonials and their order stay saved for when you switch back.

   ![The widget builder's Content, Layout, Design and Settings tabs, with Selection Mode and the selected testimonials](https://assets.retestimonial.com/app-statics/help/shots/widgets-builder-sidebar.870c8247.webp)

2. **Pick a layout**

   On the **Layout** tab, choose a **Widget Type**. Below it, the settings for that type (for example **Carousel Settings**) include a style picker, such as **Carousel Style**, and the options for that layout. Every widget type is available on Pro, Premium and Business.

3. **Style each element**

   On the **Design** tab, pick the part of the widget you want to style. The list is grouped into **Global** (such as **Theme & Frame**, **Global Colors** and **Typography**), **Card elements** (such as **Card**, **Author** and **Rating**) and **Widget elements** (such as **Navigation Arrows** on a carousel). It shows only the parts your style uses. Click one to open its options, and click **Back** to return to the list.

   You can also click the widget itself: hover over any part of it in the preview to see an outline, then click to open that part's options on the **Design** tab.

   On plans without custom colours, your site still shows the six preset accent colours from the free widget builder and your theme's standard card, text and background colours. Any other colour you pick is left out of the published widget, which shows its standard colour instead. Custom colours are on Pro, Premium and Business.

   **Reset styling** clears the changes to the element you have open. **Reset all design**, at the bottom of the list, resets all design styling and keeps your layout settings.

4. **Preview it**

   Click **Desktop**, **Tablet** or **Mobile** above the preview to see the widget at that size. To try the widget the way your visitors will, click **Preview** in the top bar (or press Ctrl+P). Every control in the widget works there. You can switch device, change the page background and turn on **Page context** to see the widget inside a sample page. Press Esc to return to the builder.

5. **Publish it**

   A new widget starts as a **Draft**, shown in the badge beside its name. Click **Publish** in the top bar, or in the **Preview** window. Then [add it to your website](/help/display/embed-a-widget-on-any-website).

   A published widget has no separate draft: the builder saves your edits to the live widget. For what publishing needs, how to try changes on a copy first and how to take a widget off your site, see [Publish, update or unpublish a widget](/help/display/publish-update-or-unpublish-a-widget).

## Settings worth knowing

The **Settings** tab starts with the widget's status. For a published widget it says on how many pages the widget was viewed in the last 30 days and when it was last seen, such as **Live on 3 pages · 2h ago**, or **No views yet**. A published widget has a **Get code** button there, which opens the same window as **Get code** in the top bar; a draft has **Publish**. See [Find the code again](/help/display/embed-a-widget-on-any-website#find-the-code-again).

Under it is a list of settings for the whole widget. Each row says what is set. Click a row to open it, and **Back** to return to the list. A dot beside a name means the setting differs from its default, and **Reset** in an open setting puts it back.

- **Size**: **Width**, **Max width** (click its unit to switch between pixels and a percentage of the space), **Shrink on small screens** and, for most styles, **Min** and **Max** under **Height**. A style that floats over the page sizes itself, and its row says **Managed by this style**. See [The layout or size is different](/help/troubleshooting/widget-looks-different-on-your-site#the-layout-or-size-is-different).
- **Star rating snippet** adds schema.org rating markup for search results, and shows how many of the widget's ratings count towards it. Available on Business. See [Can search engines see the testimonials in my widget?](/help/display/widget-questions#can-search-engines-see-the-testimonials-in-my-widget)
- **Branding badge** shows or hides the "Powered by" badge. You can hide it on Pro, Premium and Business. See [Remove ReTestimonial branding](/help/account/remove-retestimonial-branding#widgets).
- **Translations & texts** holds two things. **Show testimonials in** shows testimonials in your visitor's language, using the translations you added in the inbox, on Business: see [Turn translations on for a widget](/help/manage/translate-testimonials#turn-translations-on-for-a-widget). **Edit**, beside **Widget texts**, rewords the widget's built-in text, such as "Read more", on Pro, Premium and Business: see [Translate the widget's own words](/help/manage/translate-testimonials#translate-the-widgets-own-words).
- **Google Analytics** sends the widget's events, such as a view or a testimonial click, to the Google Analytics 4 or Google Tag Manager on your site. Available on Pro, Premium and Business. See [Send widget events to Google Analytics 4 and Google Tag Manager](/help/integrations/google-analytics-and-google-tag-manager).
- **Custom JavaScript** runs your own script on your site after the widget renders, never in the builder's preview. When you leave the box, the builder checks the script and tells you if a mistake in it would stop it from running. Available on Business, and only with the **Script** code: see [Script or iframe](/help/display/embed-a-widget-on-any-website#script-or-iframe).
- **Widget details** lists the widget's **Embed key**, which is the `data-widget-key` in its code, with its **Widget ID** and **Slug**. Above them, **Where it's live** lists the pages the widget was viewed on in the last 30 days and when it was last seen on each. A page shows up after its first visitor. On Pro, Premium and Business, it also shows each page's views.

## Undo, redo and saving

The builder saves as you work. The top bar shows **Saving...** while it saves, then when it last saved. Use the undo and redo buttons in the top bar, or these shortcuts:

| Keys                       | What it does                |
| -------------------------- | --------------------------- |
| `Ctrl+Z`                   | Undo                        |
| `Ctrl+Y` or `Ctrl+Shift+Z` | Redo                        |
| `Ctrl+S`                   | Save now                    |
| `Ctrl+P`                   | Open the **Preview** window |

On a Mac, use `Cmd` instead of `Ctrl`. Undo, redo and preview don't respond while you're typing in a field.

## Next steps

- [Choose a widget type](/help/display/choose-a-widget-type)
- [Publish, update or unpublish a widget](/help/display/publish-update-or-unpublish-a-widget)
- [Embed a widget on any website](/help/display/embed-a-widget-on-any-website)
- [Approve, reject and archive testimonials](/help/manage/approve-reject-and-archive)