How to Add Google Reviews to Webflow Without Breaking Your Layout
Add Google reviews to Webflow with a Code Embed element, stop flex and grid parents from squashing it, reuse it as a component, and put floating badges in site-wide footer code.
On this page
- Check your plan first
- How to add Google reviews to Webflow with Code Embed
- Why the widget turns into a sliver
- Check each breakpoint, then a real phone
- Same reviews on many pages: make it a component
- Floating badges go in footer code, not an embed
- Troubleshooting Google reviews on Webflow
- Should you build reviews in the CMS instead?
- Next step
Key takeaways
- Code Embed needs a paid Workspace (Core, Growth, Agency or Freelancer) or an active Site plan.
- The Designer only shows a placeholder, so check the reviews in Preview or on the live site.
- Inside a flex row, set the Code Embed to 100% width or it can shrink to a sliver.
- Wrap the embed in a component to reuse one widget across many pages.
- Floating layouts belong in Site settings > Custom code > Footer code.
To add Google reviews to Webflow, drag a Code Embed element from the Add panel into the section where the reviews belong, paste your widget's script, click Save & Close and publish. The Designer only shows a gray placeholder, so judge the result in Preview or on the published site.
That part takes two minutes. Where people lose an afternoon is the box around the embed. When a review widget looks wrong on Webflow, in my experience the code is fine and the layout is squeezing it. Most of this post is about that.
Check your plan first#
Code Embed isn't available on every Webflow site. Webflow's Code Embed guide says you need a Core, Growth, Agency or Freelancer Workspace, or an active Site plan on the site itself (checked 23 October 2026). On a free Starter workspace with no Site plan, the element simply isn't in the Add panel.
Site-wide code under Site settings > Custom code has the same requirement, according to Webflow's page on custom code in head and body tags. When I build a client site on a free workspace, I leave the widget until the client has bought the Site plan.
You'll also need your widget's code. Our Webflow install guide shows where to copy it.
How to add Google reviews to Webflow with Code Embed#
- Open the page in the Designer and click Add (the plus icon).
- Drag a Code Embed element into the section, container or div where the reviews should go.
- Paste the one-line script into the code editor that opens.
- Click Save & Close. A placeholder appears on the canvas.
- Click Preview, or publish to your webflow.io staging domain, to see the real reviews.
- Check every breakpoint (more on that below), then publish to your custom domain.
Webflow warns against pasting <html>, <head> or <body> tags into an embed. Our code has none of those, so paste it exactly as you copied it.
Don't worry if the canvas stays blank. Webflow notes that custom code doesn't run in the expand canvas view, and it only takes effect once you publish.
Why the widget turns into a sliver#
Webflow's docs say an embed whose code sets no dimensions takes the full width of its parent. That's what you want, until the parent has no real width of its own.
It's inside a flex row#
This is the one I see most. A flex child with no width set shrinks to fit its content, and a widget that hasn't loaded yet has almost no content, so the reviews end up in a tiny box. Select the Code Embed and set its width to 100% in the Style panel, or set it to grow in its flex child settings.
It's in a narrow grid cell#
A slider in one column of a four-column grid will feel cramped whatever you do. Span the cell across more columns, or pick a layout made for tight spaces, like a Badge, a List or the Sidebar.
A parent has overflow hidden#
Webflow designers (me included) set overflow to hidden on sections to stop animations spilling out. It also clips card shadows and the edges of a slider. If the reviews look cut off at the sides, click up through the parents in the Style panel and change overflow on the culprit, or add a little padding inside it.
You can skip the height. The widget renders straight into your page, not inside an iframe, sets its own height and reserves that space before it loads. Content below it won't jump, and you don't have to guess a number.
Check each breakpoint, then a real phone#
Webflow styles cascade from desktop down to tablet and the two phone sizes. Your 100% width carries down with them, but a flex or grid change you made at a smaller breakpoint can quietly undo it.
In Preview, step through each breakpoint. Does the widget fill its column? Are the slider arrows still on screen, or pushed off the edge? Is anything overlapping the section below?
Then open the published page on your own phone, which shows real fonts loading over a real connection.
Same reviews on many pages: make it a component#
If the same reviews belong on every service page, wrap the Code Embed in a component and drop that component wherever you need it. Webflow recommends this for any repeated embed, and I'd do it even for two pages. When you want a different look later, change the design in ReviewPine. The code doesn't change, so you never touch the component again.
Locations are different. One widget shows one Google Business Profile, so if you run two branches, create a widget for each and put each one on its own location page.
Floating badges go in footer code, not an embed#
A Floating badge, Review toasts, Side tab or Corner card sits on the browser window and should appear on every page. Paste it once, site-wide:
- Open Site settings > Custom code.
- Paste the floating widget's code into Footer code. Webflow adds it before the closing body tag on every page.
- Save and publish.
For a single page, use that page's Page settings > Custom code and its before closing body tag field instead.
Why not a Code Embed in the footer component? It can work. But Webflow interactions often add a CSS transform to a parent, and a fixed-position element inside a transformed parent gets pinned to that parent instead of the window, so the badge scrolls away with the section. Footer code keeps it out of your layout entirely.
Troubleshooting Google reviews on Webflow#
| What you see | Likely cause | Fix |
|---|---|---|
| A gray box in the Designer | Scripts don't run on the canvas | Use Preview or the published site |
| No Code Embed in the Add panel | No paid Workspace or Site plan | Activate a Site plan or move to a paid Workspace |
| Widget is a thin sliver | Code Embed in a flex row with no width | Set width to 100% or let it grow |
| Slider edges cut off | A parent has overflow hidden | Change overflow on that parent, or add padding |
| Fine on desktop, broken on mobile | A smaller breakpoint changed the parent's layout | Check flex and grid settings at that breakpoint |
| Floating badge scrolls with a section | It sits inside an animated or transformed parent | Move it to Site settings > Custom code > Footer code |
| Works on webflow.io, not on your domain | Not published to the custom domain yet | Publish to both domains |
Webflow's support team doesn't troubleshoot custom code, so for anything the widget itself does, ask the widget provider. Ours starts with the widget not showing checklist.
Should you build reviews in the CMS instead?#
If you design in Webflow, you've probably thought about a Reviews collection with cards you style yourself. Full control of the markup, and a job for life: somebody has to copy every new review in by hand. In my experience that stops happening within a few months.
A hosted widget keeps itself current. It renders in its own shadow DOM, so your Webflow classes can't break it, and any custom CSS you add stays inside the widget. The trade-off is that the markup isn't part of your Webflow project, so you style it in the ReviewPine customizer rather than the Style panel. For most sites I'd take that trade.
Doing the same job on another builder? On Wix your code runs inside a fixed frame, and on Squarespace the plan decides whether scripts run at all. If you're still deciding on a tool, start with what a Google reviews widget is and how it works, and how to add Google reviews to your website covers every other method.
Platform details checked on 23 October 2026.
Next step#
Try a few layouts at different widths in the customizer playground so you know which one suits your Webflow grid, then create your widget. The 7-day trial includes every feature and needs no card.
Frequently asked questions
Can I add Google reviews to Webflow on the free plan?
Why does my Google reviews widget not show in the Webflow Designer?
Why is my reviews slider cut off at the edges on Webflow?
How do I show the same Google reviews on several Webflow pages?
Do I need to set a height on the Code Embed?
Turn your Google reviews into your best salesperson
Show real, always-fresh Google reviews on any page of your website, with a "Review us on Google" button that brings in new ones. Set up in about two minutes.
- Works on WordPress, Shopify, Wix and any site
- Updates by itself
- No cookies, loads after your page
Anjanee Shukla
Founder, Ainygo Technologies
Anjanee Shukla is the founder of Ainygo Technologies and has been working in the technology industry for over 15 years. He has helped businesses worldwide by developing more than 1,000 websites, web applications, and digital solutions. His expertise spans WordPress, web development, website maintenance, hosting, automation, and business technology. Through this blog, he shares practical advice, technical knowledge, and real-world solutions gained from years of hands-on experience.
