How to Embed Google Reviews in Webflow: A Practical Guide

01Why Webflow users choose an embed

Webflow gives designers precise control over layout, typography and spacing. A hosted reviews widget can provide a maintained source of review content without manually updating every quote, but the embed still needs to fit the design and comply with the review source’s terms.

Related guideHow to Add Google Reviews to Your Website: Methods, Examples and Mistakes

02Step-by-step installation

Create or select a review widget for the correct business. In the Webflow Designer, add an Embed element inside the section where reviews should appear. Paste the provider’s public snippet, save it and publish to a staging domain. Test the published page because custom code may not behave identically inside the Designer.

• Confirm the business and review source are correct.
• Configure a layout that fits the page.
• Paste the public embed into a supported website element.
• Preview the published page on desktop and mobile.
• Verify attribution, source links and accessibility.

03Style the container, not the iframe internals

Set the parent container width, max-width and padding in Webflow. Use widget settings for colours and typography inside the embedded frame. Avoid CSS hacks that depend on private iframe markup or break after provider updates.

04Choose a layout that fits

A carousel suits a wide services page; a grid suits a dedicated social-proof section; a compact badge works near a call to action. Limit the number of cards on mobile and avoid hiding essential text behind sliders.

05Performance and SEO

Prefer async loading and place the widget below critical page content. A hosted iframe may not contribute the same crawlable text as native page content. Maintain your own service copy, FAQs and location details in ordinary HTML; the widget is evidence, not your entire SEO strategy.

06Webflow troubleshooting

If nothing renders, verify the snippet, the published domain, script permissions and browser console errors. Check that the embed wrapper has height. Test Webflow interactions that hide or transform parent elements, since they can affect iframe sizing.

07Accessibility and final QA

Test keyboard focus, links, pause controls and colour contrast. Check desktop, tablet and narrow mobile views. Make sure a floating badge does not obscure cookie consent or chat controls.

08Choosing between Embed element, page code and site code

09Putting reviews into a Webflow layout

Webflow sites tend to be design-led, so the widget should look intentional rather than dropped in. Give it a section of its own with a heading in your site's type style, and let the container control width and spacing.

1. 1

   Create a section and container

   Add a section with your normal padding, a container at your usual max width and a heading such as "What customers say on Google".

2. 2

   Add the Embed element inside the container

   Paste the embed code and set the element to 100% width so the widget can size itself.

3. 3

   Set a minimum height

   Give the wrapper a sensible min-height so the page doesn't jump when the widget loads.

4. 4

   Check every breakpoint

   Switch through desktop, tablet and mobile landscape and portrait. Adjust padding on the wrapper, not inside the widget.

5. 5

   Publish and test

   Publish to staging, test in a private window, then publish to your custom domain.

10A worked example: a Belfast design studio

An illustrative interior design studio in Belfast builds its site in Webflow and uses CMS collections for projects. It has 60 Google reviews and wants them visible without breaking its minimalist look.

• The home page gets a single-row carousel in a light card style, under the project showcase.
• Each CMS project page stays focused on the work, with a small rating badge in the footer of the template.
• The contact page uses a compact list of three recent reviews beside the enquiry form.
• The badge script sits in site settings so it's managed in one place.

11Client handover checklist for Webflow agencies

• Document where the embed lives (element, page code or site code).
• Confirm the widget account belongs to the client, not the agency.
• Note that the widget updates on its own — no CMS editing needed.
• Explain how to change layout from the widget dashboard rather than in Webflow.
• Record a before-and-after page speed result.

12How Ranknua can help

Ranknua provides a free Google Reviews Widget for displaying existing customer feedback, alongside a free Google review QR code generator. If your business also wants to request reviews after completed customer experiences, explore Ranknua’s review automation and pricing. These are different tasks: the widget displays reviews you have, while automation supports compliant invitations for new feedback.

Frequently asked questions