Let real feedback build your reputation by showcasing 5-star reviews on your website.
A review carousel is a powerful way to display social proof on your website, helping to build trust and influence potential customers. The Yonder review carousel highlights only 5-star reviews, ensuring only the best feedback is shown.
- Display Yonder reviews only or both Yonder and Google Reviews.
- Filter reviews for a specific product, perfect for product-related pages.
- Reviews update automatically with the latest 10 high-rated comments.
How to Set Up Your Review Widget
Step 1: Select Your Widget Style
- Open Yonder, click Reviews, and then select Showcase.
- Choose your preferred widget style:
- Review Badge: Displays your average 5-star rating from all Yonder survey responses.
- Carousel: Showcases your 10 most recent 5-star reviews from Yonder and Google My Business.
- Customise the look and feel by selecting your preferred styling colours.
Step 2: Generate Your Widget Code
- If you've selected Carousel, you can filter reviews by 'product'.
- Click Get Installation Code.
- Copy the auto-generated script that Yonder provides.
Example widget script:<div class="yonder-review-widget" data-settings='{"YONDER_CLIENT_CODE":"XX","type":"carousel","background_fill":"#ffffff00","font_color":"#000000"}'></div>
<script async defer src='https://show-reviews.yonderhq.com/embed.bundle.js'></script>
Step 3: Add the Script to Your Website
- Paste the installation code into the HTML of your website where you’d like your Reviews Badge or carousel to appear.
- For codeless website builders: Use an Embed or HTML element and paste the script inside.
- For custom-coded websites: Ensure the <div> container uses flex so the carousel fills the available width.
How Reviews Appear
- Only 5-star reviews are shown, including reviews rated 4.5+ (e.g., 9/10).
- Only reviews with comments are displayed (no empty reviews).
- If a review appears on both Yonder and a public review site, only the public review version is displayed to prevent duplicates.
- For privacy reasons, only the reviewer's first name and surname initial are shown.
Carousel Customisation Options
Filter Settings
-
Show all 5-star reviews – Default setting
-
Yonder reviews only – Add "source":"yonder"
-
Product-specific reviews – Add "source":"product" along with the product ID from your booking system. Ex. "product_id":"xxxxx"
Styling Parameters
- Transparent Background: Use background_fill":"#ffffff00"
- White Background: Use background_fill":"#FFFFFF"
- Text Colour (Black): Use "font_color":"#000000" (Also controls the carousel left and right arrow colour)
Responsive design:
- Review Text: Mobile 16px | Other screen sizes 20px.
- Customer Name & Date Text: Mobile 14px | Other screen sizes 16px.
Custom Fonts & Styling
You can override the default font styles to match your website using these class names:
- p class="reviewText"
- p class="reviewAuthor"
- p class="dateLabel"
- p class="productName"
Adding a Yonder review carousel to your website helps showcase trusted, high-quality customer feedback, influencing potential customers and improving conversions. The installation process is simple, and you have full control over styling and review filtering to ensure the reviews match your website’s design and content.
Frequently Asked Questions
Where should I place the review widget for the best results?
Your homepage is a great choice to build trust instantly. You can also add product-specific carousels to relevant product pages for targeted social proof.
Can I choose which reviews to display?
No, the carousel updates automatically each time the page loads, displaying the latest 10 reviews.
Will 1-star reviews appear in the carousel?
No! The carousel only showcases your best feedback, featuring 5-star reviews to highlight customer satisfaction.
Can I display reviews from sources other than Yonder and Google?
No, the widget only pulls reviews from Yonder and Google.
Does the carousel work on mobile devices?
Yes! The review widget is fully responsive for both mobile and desktop viewing.
For further assistance, contact support@yonderhq.com.