Framer guide

How to add live Google reviews to a Framer site

Framer can't read your Google reviews on its own. This walks through the whole setup end to end: creating a Google API key, restricting it so it can't be abused, finding your Place ID, and dropping the component onto a frame. Around ten minutes, and most of that is Google Cloud Console rather than Framer.

Updated August 2026 · 9 min read

Before you start

You need three things, and you can get all of them for free:

• A Google account with access to Google Cloud Console.
• A credit card to enable billing on the Cloud project. Google requires one even inside the free allowance, and a normal small business site will not exceed it.
• Your business on Google Maps. You do not need to own or have claimed the listing to display its reviews.

You do not need a Vanssay account, a server, or a subscription. The component talks to Google directly from your site.

Step 1: Enable the Places API

Open Google Cloud Console and create a project, or pick an existing one from the dropdown at the top. The project name is only for your own reference.

Then go to APIs & Services → Library, search for Places API (New), and click Enable.

If the project has no billing account attached, Google will ask for one now. Add it. Nothing is charged inside the monthly free allowance, and what this actually costs is broken down further down.

Step 2: Create the API key

Go to APIs & Services → Credentials, click Create credentials, and choose API key. Google generates the key immediately. Copy it somewhere for a moment, it starts with AIza.

Do not close this screen yet. The next step is the one that matters.

Step 3: Restrict the key (do not skip this)

An unrestricted Google API key is a billing liability. The key travels to the visitor's browser, so anyone can read it in the page source, and an unrestricted one can be copied and used on someone else's site at your expense. A restricted key cannot. This takes thirty seconds and it is the single most important step on this page.

Click Edit API key and set both restrictions:

1. Application restrictions → Websites. Add your live domain as https://yoursite.com/*. Add https://*.framer.website/* as well, so Framer previews and staging URLs keep working. If you use a www subdomain, add that too, Google treats it as a separate referrer.
2. API restrictions → Restrict key. Select Places API (New) and nothing else. Now the key can only be used for this one purpose.
3. Save. Google can take up to five minutes to apply restriction changes. If reviews do not appear straight away, wait a moment and reload.

Step 4: Find your Place ID

A Place ID is Google's permanent identifier for a business. Open Google's Place ID Finder, type your business name and address into the search box, and click the result. The ID appears in a small card on the map and starts with ChIJ.

Copy the whole thing, including the ChIJ prefix.

Step 5: Add the component in Framer

In your Framer project, open the Insert panel, find Google Reviews Live under your components, and drag it onto a frame. Put it on the page where you want the reviews to appear, at the width you want them to fill.

It renders sample reviews right away. That is deliberate: you can pick a layout and style it before you have gone anywhere near Google Cloud Console. The sample data disappears the moment you paste a real key, and it never appears on a published site.

Step 6: Paste the key and the Place ID

Select the component and look at the properties panel on the right. Paste your API key into API key and your Place ID into Place ID. Your real reviews replace the samples within a second.

What each control does:

• Layout. Ticker, carousel, highlight, grid, list, spotlight, or a compact rating badge. Switch freely, nothing else needs changing.
• Min rating. Hides reviews below the rating you pick. Leave it on "All reviews" unless you have a reason not to, a wall of nothing but five stars reads as fake to most people.
• Max reviews. Caps how many are shown, up to the five Google returns.
• Language. A code like en or fr. Leave it blank and Google decides, which usually means the reviewer's original language. Set it and Google returns its own translations where it has them.
• Refresh. How long reviews are cached in each visitor's browser before Google is called again. 24 hours is the default and suits almost everyone. Lower it only if you genuinely need reviews to appear faster than that, because it costs you more API calls.
• Text, Card, Radius, card size, padding, gap, font. Ordinary styling. Set the colours to match your site.

Step 7: Publish

Publish the site as usual. The component fetches reviews on the visitor's own page load, so from here on new reviews appear on their own. You never republish to refresh them.

Load the live URL once and confirm the reviews are there. If the section is empty on the live site but fine on the canvas, it is nearly always the referrer restriction from step 3, and the troubleshooting table covers it.

What this actually costs

Google bills Places API calls to your own Cloud project, and includes a monthly free allowance. Whether you stay inside it comes down to caching, which is why the component caches by default.

Without caching, every page load would be a billable call. With it, a visitor who reads five pages costs you one. You can watch the real number in Google Cloud Console under APIs & Services → Metrics, and if you want a hard ceiling, set a quota there so the API simply stops rather than bills you.

Google's current rates are on the Places API billing page. Check it yourself rather than trusting any widget's marketing, including ours, because Google changes the tiers periodically.

Five reviews, and what to do if you need more

Five is all the Places API returns. Ask for a place's reviews and Google sends at most five, chosen by its own relevance ordering. There is no parameter to request more and no paid Google tier that raises it. Every product that works from an API key you paste yourself hits the same ceiling, this one included.

For most sites that is genuinely fine. Five recent reviews under a real star average is the social proof people actually read, and it costs you nothing per month.

If you need your full review history, the reviews have to be fetched somewhere other than the visitor's browser, on a schedule, and stored. That is a different kind of product, and we make one.

Vanssay Reviews, when five is not enough

Vanssay Reviews is our hosted plugin. It syncs your reviews server-side and keeps them in sync, so the widget is not limited to what a single browser request can fetch:

• Well past five Google reviews on the paid plans, synced on a schedule rather than fetched per visit.
• Trustpilot alongside Google in the same widget, with one combined rating across both. No other Framer plugin does the cross-platform average.
• No API key to create, and no Google Cloud billing to set up. You search your business, connect it, and you are done.
• A free plan to try it on, which shows the same five Google reviews as this component so you can see the widget before paying.

The honest trade-off, so you pick the right one: Reviews is a subscription rather than a one-time purchase, and the widget loads through our servers instead of talking to Google directly. If what you want is no recurring cost and no third party in the path, the component in this guide is the better fit and five reviews is the price of that. If you want your whole review history, several platforms in one place, and none of the Google Cloud setup above, Reviews is what that looks like.

Troubleshooting

The component tells you what is wrong, but only inside the Framer editor. On your published site a failure renders nothing at all, so visitors never see a broken box or an error meant for you. If reviews are missing on the live site, open the canvas and read the message there.

Common questions

Sources: Places API (New) place details · Place ID Finder · Places API usage and billing · Google Maps API key security best practices.