Google Reviews Kit · Documentation · Version 2.0
How it works, typing reviews in the panel or connecting them from your Framer CMS, every setting, and four looks to start from.
01
Add it to your project. Open the link in your purchase email (or the Marketplace page) and drop Google Reviews Kit on the page.
Pick a layout. Badge, Ticker, Carousel, Grid or Featured. It starts in Manual mode with demo reviews, so you can design right away.
Add your reviews. Either type them in Reviews (Manual), or keep them in your Framer CMS and switch Source to CMS. The CMS section below shows how.
Check, then launch. Publish to your staging domain and open the page. You should see your own reviews and rating. Then publish to your domain.
Before launch, replace the demo reviews of Hotel Ombú with your own. In CMS mode, the canvas shows them as a preview until your Review Items are in place. The published site never shows them in CMS mode.
02
Manual. You type the reviews, the overall rating and the review count in the property panel. Good for a handful of reviews you pick by hand.
CMS. Your reviews live in a Framer CMS collection. A Collection List on the page holds one Review Item per review, and the kit shows them in its own layout. Good for many reviews, or when someone else updates them.
Either way, the component makes no network requests. There is no API key, no backend, no cache and no analytics. Everything it shows comes from your Framer project.
Live component with typed reviews. The same layouts can read your reviews from the Framer CMS.
03
Create a Reviews collection. Add these fields: Name (text), Rating (number, 1 to 5), Text (text), Date (text), Photo (image), and an optional Link (link).
Add a Collection List anywhere on the same page, connected to Reviews. Put a Review Item inside its item and connect each field: Name, Rating, Text, Date, Photo and Link.
Use the same Kit name on the kit and on the Review Item. “reviews” is the default on both. With two kits on one page, give each its own name, like “hotel” and “restaurant”, and their Review Items the matching one.
Set the kit’s Source to CMS.
On the published site, Review Items show nothing and take no space. Set the Collection List’s gap and padding to 0 so the list itself takes no space either. In the canvas, each Review Item shows a small dashed label, like “Review Item · Ana G. · ★ 4”, so you can see it.
The Collection List decides which reviews reach the kit. Its own filters, sorting and limit apply: the kit reads the items in the list’s order. Then the kit’s Min stars, Sort, Max reviews and Hide empty apply on top.
Rating. Average of items works out the rating from your Review Items, to one decimal, and counts them for the review count. To show your full count, like 312, type it in Total reviews. Typed uses the Rating and Review count you type, like in Manual.
Dates. Write dates as 2026-10-12. They’re shown in the page’s language, like “12 Oct 2026” or “12 oct 2026”, and Sort Newest can use them. Any other text, like “2 weeks ago”, shows exactly as written.
04
The kit doesn’t connect to Google. To show your Google reviews, copy them by hand:
Open your business on Google Maps and go to Reviews.
For each review you want, copy the name, the stars, the text and the date into Manual, or into a new item of your Reviews collection.
Put your Google Maps link in Profile link, so the review count opens your listing.
Copy your overall rating and review count from the listing into Rating and Review count. In CMS mode, set Rating to Typed for that.
Update them now and then. A new review on Google doesn’t appear on your site until you copy it.
Google credit. Turn it on to add “Reviews from Google Maps” under the reviews. It’s optional. Use it only when the reviews really were copied from Google, never for reviews from other places.
05
The G logo, your rating, stars and review count, linked to your Profile link. For heroes, headers and footers.
A strip of cards that moves on its own. It pauses when the visitor hovers or tabs into it, and while it’s off screen. It stops for visitors who ask their device for reduced motion: then it becomes a strip they can scroll.
Cards side by side that snap into place. Swipe on phones, arrows on desktop.
All cards at once, in as many Columns as you set.
One review, large, as a quote. Arrows move to the next one.
Summary. Shows the rating badge above any layout except Badge.
Different layout per breakpoint. Each breakpoint keeps its own settings. A common setup: Grid with 3 columns on Desktop, Carousel on Phone.
06
Avatar, Author, Date and Stars turn each part on or off. G on cards adds the small Google logo in the corner. Read more after cuts long reviews after that many lines, with a Read more link that opens them in place. 0 shows everything.
A review with a Link opens it from its date, or from the name when Date is off.
Card, Text, Muted text, Lines and Stars colour. Lines also colours the empty part of the stars and the avatar placeholder. Pick your site’s colour styles in each one. On a dark background, turn on Credit on dark so “Google Maps” is written in white.
Radius rounds the cards. Gap sets the space between cards. Padding sets the space inside each card. Border draws a thin line in the Lines colour. Shadow lifts the cards off the page.
Quote font for the review text, Featured font for the big quote, Author font, Meta font for dates and small text, Rating font for the number in the badge. The text alignment of Featured font also aligns the stars and author.
Layout Badge · Border off · Card colour transparent · Badge title empty
Layout Grid · Columns 3 · Border off · Shadow on · Read more after 6
Layout Ticker · Summary off · Card width 300 · Speed 30 · G on cards off · Radius 8
Layout Featured · Card colour transparent · Border off · Padding 0 · Featured font in your serif at 36 px
07
In the order they appear in the property panel.
Data
Manual or CMS.
CMS only. Review Items with the same name feed this kit.
CMS only. Average of items, or Typed.
CMS with Average of items. 0 counts the items. Or type your full count.
Manual
Author, Stars (1 to 5), Text, Date and an optional Avatar. Up to 20. Manual only.
The overall rating, like 4.8. Manual, or CMS with Rating on Typed.
The total number of reviews. Manual, or CMS with Rating on Typed.
Where the badge’s review count links to. Usually your Google Maps listing.
Adds “Reviews from Google Maps” under the reviews. Only for reviews copied from Google.
Filters
All, 2 and up, 3 and up, 4 and up, or 5 only.
As listed (your typed order, or the Collection List’s order), Newest or Highest. Newest needs dates like 2026-10-12.
How many to show, up to 50.
Skips star-only reviews that have no text.
Layout
Badge, Ticker, Carousel, Grid or Featured.
The rating badge above the reviews.
Grid only.
Ticker and Carousel.
Ticker only.
Carousel and Featured.
Featured only.
Card
Avatar, Author, Date, Stars, G on cards.
Read more after — lines before a review is cut. 0 shows everything.
Text
List label — read by screen readers.
Badge title — “Google rating” by default. Empty hides it.
Count label — {count} becomes the number, like “312 reviews”.
Stars label — read by screen readers. {rating} becomes the number, like “4.8 out of 5”.
Read more, Show less.
Credit label — the words before “Google Maps”, like “Reviews from”. With Google credit on.
Previous label, Next label — read by screen readers on the arrows.
Style
Card, Text, Muted text, Lines, Stars colour, Credit on dark.
Border, Shadow, Radius, Gap, Padding.
Quote font, Featured font, Author font, Meta font, Rating font.
Review Item
The same as the kit it feeds.
Connect each to its CMS field.
Optional. Opens from the review’s date, or its name when Date is off.
08
Every label is a property, so Framer Localization translates it like any other text.
Reviews show as you wrote them. To translate them, localize the Manual texts or the CMS fields with Framer Localization.
Ratings and counts are written the way the page’s language writes numbers, like 4,8 in Spanish. Dates like 2026-10-12 follow the page’s language too.
“Google Maps” in the credit stays in English on every page.
09
The component sends nothing anywhere. It makes no network requests, stores nothing in the visitor’s browser and sets no cookies. Photos and avatars you upload are served by Framer, like any image on your site.
Reviews include their authors’ names and sometimes their photos. Show only reviews you’re allowed to publish.
10
In the canvas, a small dashed note explains what’s wrong. It never appears on the published site.
Source is CMS but no Review Item reached the kit. Check that the Collection List is on the same page, that each item holds a Review Item, and that both Kit names match.
Same as above: that’s the preview while no Review Item is found.
No Review Item reached the kit. Check the Kit names, and that the Collection List isn’t hidden on this breakpoint, filtered to nothing or limited to 0.
Set the list’s gap and padding to 0.
Min stars or Hide empty filter them all out. A review with an empty Rating counts as no stars, so Min stars skips it.
Two items with the exact same name, rating, date, photo, link and text show once.
Dates written as text, like “2 weeks ago”, can’t be sorted. Use dates like 2026-10-12.
Average of items only counts the reviews in your CMS. Set Rating to Typed and copy the numbers from Google.
Your device asks for reduced motion. The ticker stays still on purpose and can be scrolled by hand.
The review has no photo, or it didn’t load. The letter is the fallback.
11
New versions are free and listed here. To update, insert the component again from the Marketplace page or from the link in your Polar order, which always points to the latest version, and copy your settings across.
— Reviews come from Manual or your Framer CMS through the new Review Item. Live mode and the Google API key are gone, so the component makes no network requests.
— The ticker pauses while it is off screen, so it uses no resources when nobody sees it.
— First release: Manual and Live sources, browser cache, five layouts, filters and sorting, and the Google Maps credit built in.
12
Questions or a bug? Write to info@miguelrecio.es. A person replies within two business days (Mon–Fri, CET).
One licence covers one designer and unlimited client projects. Reselling or redistributing the component isn’t allowed.
Reviews and ratings belong to their authors. Google Reviews Kit only shows the reviews you add.