Display Widgets: Carousel, Vertical Feed, and more
Set up and customise the widgets that showcase your best reviews.
Display widgets turn your reviews into visual trust signals on your website. They come in different sizes and layouts so you can pick the perfect fit for your page design. This guide covers setup and customisation for each type.
Before you start: You need at least 5 positive reviews (4 - 5 stars) in the last 12 months to activate widgets. Once you qualify, all settings unlock automatically in the portal.
Carousel widget
The carousel rotates through reviews with next/previous arrows and dot navigation. It's eye-catching and works well on homepages.
Getting started:
1. Go to Share > Widgets in your portal.
2. Click Carousel.
3. In the preview, toggle between Desktop and Mobile to see how it looks on different screen sizes.
4. Adjust the controls on the right, then copy your embed code.
What you can customise:
Layout options:
• Widget Width - Choose 320px (mobile), 700px (tablet), or 940px (desktop).
• Header Mode - Show your rating, review count, and industry rank as metrics. Or use a text header like "Our customers say...".
• Industry Rank - Toggle on to display your ranking within your industry category. Only available when using metrics mode and you haven't connected Google.
Look and feel:
• Style - Pick Original (Hellopeter branded) or Transparent (custom colours).
• Colours - With Transparent style, pick your font colour, border colour, and background. Use the colour picker to match your brand.
• Star Colours - Customise the colour of stars for average ratings, 5-star reviews, and 4-star reviews.
• Logo - In Transparent mode, toggle the Hellopeter logo on or off.
Content options:
• Number of Reviews - Show 10, 20, or 30 reviews in the rotation.
• Anonymous Reviewers - Hide reviewer names if you prefer.
• Review Channels - Display Hellopeter reviews, Google reviews (if connected), or both. Keep at least one channel selected.
Review Slider widget
The Review Slider appears as a fixed tab on the left or right edge of your page. Click the tab to expand a panel of reviews. It's always visible but never intrusive.
Getting started:
5. Go to Share > Widgets.
6. Click Review Slider.
7. Use the Expand/Collapse toggle to preview the open and closed states.
8. Adjust the controls, then copy your embed code.
What you can customise:
Position and header:
• Panel Position - Choose whether the tab appears on the left or right edge of your page.
• Header Mode - Show metrics (rating, review count) or text ("Our customers say...").
• Industry Rank - Available when using metrics mode without Google connected.
Look and feel:
• Style - Original or Transparent.
• Colours - Font, border, background, and star colours (just like Carousel).
• Logo - Show or hide the Hellopeter logo.
Content:
• Number of Reviews - 10, 20, or 30.
• Anonymous Reviewers - Toggle on to hide names.
• Review Channels - Hellopeter, Google (if connected), or both.
Tip: The Review Slider defaults to Hellopeter reviews only. If you want to include Google reviews, make sure you've connected your Google Business Profile first.
Vertical Feed widget
The Vertical Feed displays reviews in a scrollable grid. It's perfect for sidebars, footers, or dedicated testimonial sections. Visitors scroll to see more reviews.
Getting started:
9. Go to Share > Widgets.
10. Click Vertical Feed.
11. Toggle between Desktop and Mobile views in the preview.
12. Customise on the right, then copy your embed code.
What you can customise:
Layout:
• Widget Width - 320px (mobile), 700px (tablet), or 940px (desktop). The grid automatically adjusts columns: 1 column at 320px, 2 at 700px, 3 at 940px.
• Header Mode - Metrics or text.
• Industry Rank - Available with metrics + no Google.
Look and feel:
• Style - Original or Transparent.
• Colours - Font, border, background, and star colours.
• Logo - Show or hide the Hellopeter logo.
Content:
• Number of Reviews - 10, 20, or 30.
• Anonymous Reviewers - Toggle on to hide names.
• Review Channels - Hellopeter, Google (if connected), or both.
Drop-down Widget
The Drop-down is a compact accordion. The collapsed state shows your rating and review count. Click to expand and see individual reviews. It's ideal for websites with limited space.
Getting started:
13. Go to Share > Widgets.
14. Click Drop-down Widget.
15. Use the Expand/Collapse and Desktop/Mobile toggles in the preview.
16. Customise and copy your embed code.
What you can customise:
Layout:
• Widget Width - 320px (mobile) or 460px (tablet).
• Header Mode - Show metrics or text.
Look and feel:
• Style - Original or Transparent.
• Colours - Font, border, background, and star colours.
• Logo - Show or hide the Hellopeter logo.
Content and call-to-action:
• Number of Reviews - 10, 20, or 30.
• Anonymous Reviewers - Toggle on to hide names.
• Write a Review Button - Add a WhatsApp button to collect reviews directly. When enabled, customise the button colour and text colour to match your brand.
Note: The Drop-down Widget displays Hellopeter reviews only. Google reviews aren't supported.
Embed code formats
Once you've customised your widget, you'll see an Embed Code section with two options:
HTML/JavaScript (recommended):
• Best for SEO. Search engines can crawl your review content.
• Uses Shadow DOM encapsulation. No CSS or JavaScript conflicts with your site.
• Works on any website.
iframe:
• Use this if your website has strict security policies (Content Security Policy).
• Fully isolated from your page.
• No SEO benefit.
Both include a copy button. Click to copy to your clipboard, then paste into your website code.
Making widgets mobile-friendly
All display widgets adapt automatically to mobile screens. The preview shows you exactly how they'll look on smaller devices. When you set a 940px width, the widget automatically shrinks to fit mobile screens.
Tip: Test your embedded widget on actual mobile devices before launching. Check that the layout looks good and reviews are readable.
Still need help? Use the live chat inside your portal to get in touch with our customer success team.