How to Customize the Appearance of the Reviews Widget

Your Reviews widget plays a key role in your website's overall appearance. With Elfsight, you can easily tailor it to match your brand’s style.

In this guide, we’ll walk you through the four main tabs that let you personalize your widget’s design: Layout, Header, Review, and Style. Each section allows you to adjust specific elements to achieve the perfect look.

Configure Widget Layout

In the Layout tab, you can select how reviews are displayed: Carousel, Grid, List, Masonry, Badge, Floating Badge, or Slider.

Click Customize to see layout-specific settings. For example, in the Grid layout, you can define the number of columns and rows for desktop and mobile views, while in the Badge layout, you can control the badge elements and customize the floating panel.

Here, you can also make the widget span the full width of your site or choose a custom width that fits your layout by adjusting the Width setting:

Choose Header Elements

In the Header tab, you can customize the top section of your widget by choosing which elements to display or hide. This includes options to show or hide the title, overall rating, number of reviews, and the 'Write a Review' button, giving you full control over the widget’s appearance:

Use the toggle next to Widget Title to show or hide the title. If enabled, you can edit the heading text in the Title field and add a message in the Caption input area:

In the All-in-One Reviews app, you can choose to show or hide tabs for different review sources, display tab elements such as icon, name, rating, and group sources by platform, or list them individually:

Select Review Style

In the Review tab, you can control how reviews are displayed and which elements are shown:

Click Customize to define which review aspects appear in the widget. You can show the reviewer's name and photo, display the source and date, and include verified badges and star ratings:

The Google source also supports client images and business owner replies! 🚀 Here's how it looks in the widget:

Under Reviewer Name Format, you can choose how customers' names appear: full name, first name only, initials, or other formats:

The How to Display Review Text option lets you choose whether to display the full review text or a short preview. You can set the preview length and use Align Cards by Height to keep the layout neat and consistent:

Adjust Colors, Fonts, and More

Use the Style tab to help your widget blend seamlessly into your website’s design. For example, you can choose a color scheme that matches your site, set an accent color, and pick a font style.

To refine the appearance further, you can adjust colors, spacing, and typography for key elements. The available options may vary depending on the layout you choose.

For a more detailed walkthrough, check out this screencast:

Need more customization? You can add your own CSS to the Custom CSS section. If a styling choice you need isn't available, check out our community post for handy CSS codes to enhance your widget even further!

We hope this guide helped you customize your Reviews widget to fit your website perfectly. If you need more design options or extra customization, just contact our Support Team. We’re here to help!🧝