Webflow · 4 min read
How to embed Google reviews in Webflow
Webflow's Embed element takes any HTML, so live Google reviews are a drag, a paste and a publish away. The one thing to know up front: Designer will not render them, and that is expected behaviour rather than a broken snippet.
Last reviewed by the Reviews Widget product team.
The Embed element in Designer
The Embed element sits in the Add panel under Components and accepts raw HTML up to 50,000 characters. It behaves like any other Webflow element for layout purposes — you can place it in a grid cell, give it classes, and control its width and spacing normally.
Step-by-step in Webflow
Skip the reading — build your widget now
Free plan, no credit card. Your reviews are embedded before you finish this guide.
Build the widget, copy the script tag, open Designer, press A and drag an Embed element into position, paste into the code editor, click Save and Close, then publish and check the live URL rather than the canvas.
- 1
Create your free Reviews Widget
Sign up, search your business name to attach your Google Business Profile, and let the first fetch pull in your reviews and aggregate rating.
- 2
Style the widget
Choose a layout and match your Webflow style guide — colours, corner radius and font scale — using the live preview at desktop, tablet and mobile widths.
- 3
Copy the embed snippet
Open the Embed tab and copy the one-line script tag.
- 4
Open the page in Webflow Designer
Open the project and navigate to the page and section where the reviews belong.
- 5
Add an Embed element
Press A or open the Add panel, find Embed under Components, and drag it into the div or grid cell you want. Webflow opens the HTML Embed code editor automatically.
- 6
Paste the snippet and save
Paste the script tag into the code editor and click Save and Close. Designer renders a placeholder rather than the live reviews.
- 7
Publish and verify
Publish to your webflow.io staging domain or your custom domain, open the live URL, and run it through Google's Rich Results Test to see the JSON-LD parse.
Components, symbols and CMS pages
| Placement | Behaviour | Best for |
|---|---|---|
| Single page section | Renders on that page only | Homepage, about, service pages |
| Inside a component | Appears on every instance | A footer star badge sitewide |
| Navbar or footer component | Sitewide, above or below the fold | Persistent reassurance |
| CMS collection page template | Same widget on every collection item | Store-wide or brand-wide proof |
| Beside a form block | Renders next to the conversion point | Contact and quote pages |
A CMS collection page renders the same grid for every item, since the snippet is static. If you need different reviews per item, create a separate grid per record and manage them from the dashboard.
Styling alongside Webflow classes
Webflow classes style the wrapper; the widget styles itself. Because the widget renders in a shadow root, your global styles cannot leak in and its styles cannot leak out — which is what stops a reviews block from inheriting stray typography rules from your project.
Use Webflow for margin, padding, max-width and grid placement. Use the Reviews Widget design panel for colours, radius, typography and layout, mirroring the values in your Webflow style guide.
Troubleshooting
| Symptom | Likely cause | Fix |
|---|---|---|
| Placeholder in Designer | Designer does not execute embedded scripts | Publish and check the live URL |
| Works on staging, not on the custom domain | Custom domain not republished | Republish to all domains |
| Nothing renders on the published site | Free Starter plan restricts custom code | Move the project to a paid site plan |
| Embed stretched or squashed | Wrapper has a fixed height or overflow hidden | Set height to auto on the wrapper |
| Widget ignores your project styles | Shadow root isolation, by design | Restyle in the widget dashboard |
| Layout shift when reviews load | No reserved height on the wrapper | Set a min-height on the wrapping div |
Sources & further reading
- Webflow — HTML embed element — Official documentation, including the character limit
- Webflow — custom code on published sites — Plan requirements for custom code
- Google Search Central — review snippet guidelines — Self-serving review rules