To dynamically display Google Reviews on your Webflow store location pages and source the Place ID from a CMS field, you’ll need to combine Webflow CMS, custom JavaScript, and the Google Places API. Here's how to do it and answer your questions step-by-step.
1. Add Your Place IDs to the CMS
- In your CMS Collection (e.g., “Store Locations”), add a new Plain Text field named something like “Google Place ID”.
- Paste the Google Place ID for each location into that field. You can find the Place ID using Google’s Place ID Finder.
2. Embed a Script on the CMS Template Page
- Open your Store Location Template page.
- Drag an Embed element from the Add panel to where you want the reviews to appear.
- Inside the embed, write custom JavaScript that dynamically uses the CMS Place ID.
Here's how you access CMS data in inline scripts:
Wrap your embed script in a <div>
and use a custom attribute or data-*
attribute to pass the Place ID from the CMS.
Example:
```html
\`\`\`Then in your script (inside the same Embed), use JavaScript like:
```javascript
const placeId = document.getElementById("reviews").getAttribute("data-place-id");
```
Use this placeId
value with the Google Places API (Place Details endpoint) to fetch reviews.
3. Why Only 5 Google Reviews?
- Google Places API limits the number of reviews returned to 5.
- This is a hard-coded limit by Google when using the Place Details API response—even though a business may have more.
- The only way to get more than 5 reviews is to use an approved third-party aggregator or GMB (Google Business Profile) content partnerships—not via public APIs.
4. Parameters That Affect Review Output
- The response from the Google Maps Places API includes a
reviews
array with up to 5 reviews only, regardless of your API key or fields requested. - You can sort the reviews or determine review language by including parameters like:
fields=review
(must request this explicitly)language=en
(or other ISO language codes)
However, you cannot increase the number of returned reviews beyond 5 via this API.
5. Important Considerations
- You need a billing-enabled Google Cloud account and an active Maps JavaScript API and Places API.
- Google may enforce usage limits or charge fees based on volume.
Summary
To dynamically show Google Reviews in Webflow using CMS and Place IDs:
- Store each location’s Place ID in a CMS field.
- Pass the Place ID to a page script using a
data-*
attribute on each template page. - Use the Google Places API to fetch up to 5 reviews dynamically.
- Google limits reviews to 5 per request—the API does not support fetching more.
For more advanced filters or more reviews, you would need a third-party review service with extended access rights.