How to Embed Google Reviews on Squarespace, Webflow, Framer & Carrd (No-Code Guide)

Showing real Google reviews on your website is one of the highest-leverage five-minute tasks in local business marketing. A review widget placed above the fold can be the difference between a visitor calling you and a visitor bouncing back to Google. The frustrating part is that the tools built for this job mostly assume you run WordPress, and the ones that support modern site builders charge per-site, per-month fees with view caps that make no sense for a business of your size.

This guide covers the four site builders where the majority of small businesses now build their sites — Squarespace, Webflow, Framer, and Carrd — with exact copy-paste steps for each, plus the performance rules that keep your Lighthouse score above 95. Whether you are a freelancer delivering a build for a client, a no-code developer shipping dozens of sites, or a business owner editing your own pages, everything here works without touching a terminal.

1. The $40/Month Widget Tax Nobody Talks About

Walk into the marketplace of SaaS review widgets and every product looks the same: connect your Google Business Profile, pick a design from 40 templates, paste an <script> tag, done. It works. It also quietly reintroduces a cost structure that feels wrong for a small business, and if you manage websites for clients it compounds with every site.

Here is what the typical pricing actually looks like across the market. Prices shift frequently, so treat this as a shape-of-the-market view and verify current numbers before you quote a client.

The view limit is the part that catches agencies out. A view limit sounds like a strange metric for a reviews widget until you realise how it is counted: every time the widget renders for a visitor, that is a view. A site with 2,000 monthly visitors and a widget on three pages burns 6,000 views in a good month. An agency running 12 client websites at 5,000 views each is looking at $120–$480 per month for the privilege of displaying customer feedback that the client’s customers already wrote for free on Google.

• Per-site pricing is the real tax. Widget vendors have a legitimate reason to charge per domain, but it means cost scales linearly with your client count instead of your revenue.
• Watermarks on free tiers. A small “Powered by” badge sits next to a five-star review. It costs you conversion rate on the exact social proof you are trying to display.
• Annual lock-in. Most platforms push a yearly plan to get the lowest price. If a client leaves, you are still paying for them until the term ends.
• Limited control over the look. Template libraries look impressive in a demo, but your design system is rarely one of the forty presets. You will spend more time fighting the widget’s CSS than pasting it in.
• Review syncing is often a paid add-on. The base price may cover a static review list you paste in yourself. Automatic syncing from Google — the reason you want a widget at all — can sit in a higher tier.

The widget itself is not the product. The product is a maintained, cached pipeline that pulls your latest Google reviews and renders them in a handful of styles. Once you understand that, you can decide whether you need a subscription or a single script tag.

2. Five Decisions Before You Paste a Single Line of Code

2.1 Where do the reviews come from?

• A link to your Google Business Profile. Zero setup, zero code, zero sync. The visitor lands on Google and reads your reviews there. Excellent as a simple CTA button; weak if you want reviews visible for visitors who never click.
• The Google Places API (New). The official way to pull reviews programmatically. You create a Google Cloud project, enable the Places API, generate a key, and restrict it to your domains. It bills per request and requires a billing account, but it gives live reviews with full layout control.
• A keyless generator. A hosted service (such as the free GR Review widget generator) fetches and caches the reviews on its side, then serves your page a single lightweight embed. You get live reviews with no API key and no per-request charges — the trade-off is that the renderer is styled by the service’s templates rather than your own CSS.

2.2 How many reviews, and which ones?

Show five to ten. Enough to establish a pattern, not so many that the widget becomes a wall pushing your call-to-action below the fold. Show your most recent reviews by default, and if you have volume, prioritise ones mentioning a specific service — “they fixed my boiler same day” is worth more than a generic five-star review.

2.3 Which layout?

Covered in detail in section 7. Short version: carousel for tight hero sections, masonry grid for pages where depth of proof matters, compact badge for the header or sidebar.

2.4 Where on the page?

Reviews placed directly after your main proof section (pricing, case studies, before-and-after galleries) outperform reviews at the very bottom, because the visitor has just been convinced and is looking for confirmation. For service businesses, the highest-performing position is immediately after the first “why choose us” block.

2.5 Who holds the API key?

If you use the Places API, restrict the key by HTTP referrer to your exact domains. A key leaked from an embed is then useless elsewhere, and you see abuse in your console instead of discovering it on an invoice. For client work, keyless is the only approach that scales without managing an API credential per domain.

3. Squarespace: Embedding in Fluid Engine

Squarespace is the easiest of the four, because 7.1 and 8 both give you a code block and a global injection point. The only real challenge is mobile sizing, since most widgets render at a fixed pixel height.

1. Open the page. In the Squarespace editor, hover over the target section and press the section handle to open the section menu.
2. Add the code block. Click + in the block inserter, search for “Code”, and select the Code block. Do not use a Text block — Squarespace escapes HTML inside text blocks and your widget renders as visible markup.
3. Paste your embed and delete the placeholder text Squarespace inserts (the words “Add a code block” with the docs link). If you are using a keyless generator, this is the whole snippet:

<div class="gr-review"
     data-widget-id="YOUR_WIDGET_ID"
     data-limit="8"
     data-theme="card"
     style="max-width:760px;margin:0 auto;">
  <div class="gr-review__loading" style="min-height:420px;"></div>
</div>
<script async src="https://cdn.besthelptool.com/widget/embed.js"
  data-widget-id="YOUR_WIDGET_ID"></script>

4. Add container styles globally. Code block contents do not inherit your page typography, and widgets usually need a font-size and line-height reset. Use Settings > Advanced > Code Injection > Header for one shared style block instead of styling each widget separately:

<style>
  .gr-review { font-size: 15px; line-height: 1.6; color: #1a1a1a; }
  .gr-review__loading { display: flex; align-items: center; justify-content: center;
    color: #777; font-size: 14px; }
  @media (max-width: 767px) { .gr-review { font-size: 14px; } }
</style>

5. Fix the mobile height. In Fluid Engine a Code block has no intrinsic height. The widget reserves space via the min-height on the loading placeholder, but a carousel needs more height on mobile and a masonry grid needs far more. Test in mobile preview and adjust the placeholder until there is no jump on load.
6. Control the width. A Code block spans its column by default. Add max-width and margin: 0 auto so it centres instead of stretching across a 1,200px content area.
7. Publish and verify. Squarespace runs the live embed only after publishing. If it is blank on the published site too, open the browser console — a Refused to execute script error pointing at Content Security Policy means you must add the widget domain to your script-src allowlist in Settings > Advanced > Content Security Policy.

4. Webflow: Embed Element, Custom Code, and the Styling Trap

Webflow gives you more control than Squarespace, but it introduces one gotcha that catches nearly everyone: content inside a custom embed is not stylable with Webflow’s class-based CSS. Webflow’s generated stylesheet targets only elements it knows about in the canvas, and markup you paste into an embed is invisible to it.

1. Create the section wrapper. Add a Section with the background and spacing you want, then inside it a Div Block. Give it a class such as review-widget and set max-width around 900px with margin: auto. This wrapper is what you style with Webflow’s typography and layout tools.
2. Add the Embed element. Drag an Embed element into that Div Block. In its settings, switch the source from an iframe URL to Custom code, then paste your widget container and script tag.
3. Give the embed a class (for example gr-review-embed) so you can target it; the embed renders an iframe wrapper occupying 100% width and a default height.
4. Set the height explicitly in the style panel — roughly 480px for a carousel, 900px for a masonry grid. If you set it to Auto, Webflow uses the iframe’s height after load, which means content below the widget jumps.
5. Add the styling workaround. Either ship a small <style> block inside the embed (travels with the snippet you paste into every project), or add custom CSS to the site head via Site Settings > Custom Code > Head:

<style>
  .review-widget { max-width: 900px; margin: 0 auto; }
  .gr-review-embed { width: 100%; }
  .gr-review-embed iframe { border: 0; display: block; }
  .gr-review { font-family: inherit; }
  @media (max-width: 767px) { .review-widget { max-width: 100%; } }
</style>

6. Anchor it. Because the reviews live in a named section, set the Section’s anchor ID to reviews and link a nav item or hero CTA straight to #reviews so visitors can jump to the proof point in one click.
7. Test in preview, then staging. Webflow’s preview serves from a subdomain and some widgets refuse to run on unpublished domains. If it does not render, publish to a staging domain and check there.

For Webflow specifically, the most maintainable setup is one shared embed snippet in your clipboard, pasted into a Div Block with a standard class name. Every new client site then takes about four minutes instead of an hour.

5. Framer: HTML Components and Full-Width Scaling

Framer is a design canvas first and a code tool second. Code components are the intended mechanism for third-party scripts, and they work well — provided you respect Framer’s fixed-frame layout model.

1. Create a code component. Go to Code > Create code component, paste your widget markup and script into the component’s HTML, and delete Framer’s default placeholder markup.
2. Publish before you trust the preview. Framer only executes custom code on a published site. Your canvas will show an empty frame in design mode; that is expected. Publish to your domain and check the live URL.
3. Insert the component via Insert > Component into the frame where you want reviews.
4. Set the width to fluid, not fixed. In the Layout panel set Width to 100% (or Fill) rather than a pixel value, and cap the width with a wrapper:

<div style="width:100%;max-width:960px;margin:0 auto;">
  <div class="gr-review" data-widget-id="YOUR_WIDGET_ID"></div>
</div>
<script async src="https://cdn.besthelptool.com/widget/embed.js"
  data-widget-id="YOUR_WIDGET_ID"></script>

5. Set height to Auto with a reserved minimum. Framer frames default to Fixed height; switch to Auto so the component grows with content, and set a 400–500px minimum so the layout does not collapse and re-expand during load.
6. Constrain on wide artboards. Framer sites are often built on a 1440px artboard, so a reviews strip stretches full width unless you place the component in a frame with a 960px max width and centre it.
7. Check every breakpoint. If the component is Fill at desktop but Fixed at mobile, it will overflow on smaller screens. Set width to Fill on all breakpoints.

6. Carrd: The Embed Element and Container Sizing

Carrd is the most constrained of the four, with two viable routes depending on your plan.

Route A — Embed element with an iframe (works on free plans)

1. Add an Embed element. Click + in the Carrd element menu and select Embed.
2. Paste the iframe source provided by your widget generator into the src field. Carrd renders it in a sandboxed iframe.
3. Set the element height. Carrd requires an explicit pixel height for embeds, typically 300–700px. Guessing short truncates the widget; guessing tall leaves dead space. Start at 520px for a carousel and adjust on mobile.
4. Control width through the container. Set the container to 100% width and add a maximum via Custom CSS if you need to cap it on a wide layout.

Route B — Custom HTML in a Code element (Pro)

5. Add a Code element. Pro plans include a Code element accepting your own HTML, CSS, and JavaScript.
6. Paste the same snippet you used on Squarespace and Webflow — this is the route to choose if you want the keyless script and full container control.
7. Remember Code elements are page-scoped. A widget on the home page means pasting the snippet again on every other page. Ten pages, ten pastes — another point where a single keyless tag beats a per-site subscription.
8. Publish to a real domain. Some providers whitelist domains; a *.carrd.co subdomain usually works, but connect a custom domain if the provider requires one.

7. Core Web Vitals: Why Keyless and Async Matter

This is the section that separates a widget scoring 98 on Lighthouse from one scoring 62, and it is why the GR Review embed is built keyless and asynchronous. A keyless embed means your page never carries an API key, never makes a server-side API call, and never waits on a third-party response before rendering — the script loads asynchronously, fetches cached review data, and paints into a container whose height was already reserved.

The three rules that keep your score at 95+

1. One tag, asynchronous, no dependency. A single <script async src="..."> that carries its own styles or injects them at runtime. No second script for themes, no separate blocking CSS file.
2. Reserve the space. Every container needs a declared height before the widget loads. This is the biggest CLS factor and the easiest fix.
3. Keep the widget out of the critical path. Below the fold wherever the layout allows. A widget that loads a second late is invisible to the user; a widget that blocks the hero is not.

8. Layout Selection: Carousel vs Masonry Grid vs Compact Badge

Three layouts cover about 95% of use cases. Choosing wrong is worse than not embedding at all, because a badly fitted widget pushes your call-to-action out of view.

Decision rules

• Lead with a carousel only above the fold, and never with autoplay. A moving carousel under a nav bar is the most common reason people scroll past your proof. Static with manual arrows performs better and does not fight the scroll gesture.
• Use masonry when reviews are the argument. On a page whose job is to convince, a grid of six to ten reviews of different lengths feels substantial; a carousel showing one at a time feels thin.
• Use the badge when the review is a footnote, not a headline. A compact “4.9 — 127 Google reviews” badge is enough for a header. It should link to your Google profile, where the full text lives.
• Always add a link to the Google profile. One clickable link sends the visitor to the source. It satisfies the sceptic and it passes review data to search engines over time.

9. Copy-Paste Starter Templates

Four snippets to keep in a text file. Adjust the ID, the limit, and the container width for your site.

Template 1 — Keyless widget, responsive, CLS-safe

<div class="gr-review"
     data-widget-id="YOUR_WIDGET_ID"
     data-limit="8"
     data-layout="grid"
     style="max-width:960px;margin:0 auto;">
  <div style="min-height:820px"></div>
</div>
<script async src="https://cdn.besthelptool.com/widget/embed.js"
  data-widget-id="YOUR_WIDGET_ID"></script>

Template 2 — Compact badge for a header or footer

<a href="https://g.page/YOUR-BUSINESS-ID" target="_blank" rel="noopener"
   class="gr-review-badge"
   style="display:inline-flex;align-items:center;gap:8px;
          padding:8px 14px;border:1px solid #e5e5e5;border-radius:999px;
          text-decoration:none;color:#1a1a1a;font-size:14px;">
  <span aria-hidden="true">⭐️</span>
  <span>4.9</span>
  <span style="color:#666">on Google</span>
</a>

Template 3 — Google Places API version (keyless providers skip this)

<script async
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&libraries=places&loading=async"
  defer></script>
<div id="gr-reviews" data-place-id="ChIJ...PLACE_ID"></div>

Template 4 — Reserved container heights by layout

<!-- Carousel, one visible card -->
<div style="min-height:420px"></div>
<!-- Grid, 2 columns x 3 rows -->
<div style="min-height:820px"></div>
<!-- Badge -->
<div style="min-height:56px"></div>

10. Pre-Launch Checklist

• Reserved height set on every container, verified at 375px, 768px, and 1440px widths.
• Script is async with exactly one tag per page — no theme CSS, no extra font request.
• Published-site test, not just preview: Squarespace, Webflow, and Framer all behave differently in preview mode.
• API key restricted by referrer, if you use the Places API directly.
• Link to the Google profile from the widget, with rel="noopener" and a new tab.
• Lighthouse run on mobile after publishing: target 95+ across Performance, Accessibility, and Best Practices. If Performance drops, look for a third-party script inside the embed.
• Widget type tested on mobile — carousel arrows at least 44×44px, text legible at 14–16px, no horizontal scroll.
• Reviews are recent and real. Stale five-star reviews from 2019 do not persuade, and selectively displaying only positive reviews is the kind of behaviour that draws regulatory attention. Show what your customers actually said.

Frequently Asked Questions

Do I actually need a Google Maps API key to display Google reviews?

No, not if you use a keyless provider. The API key exists so that your server can query Google and bill your account for the request. A keyless widget service performs that request on its own infrastructure, caches the result, and serves you a script — you still get live reviews that update on the provider’s refresh cycle. You only need your own key if you want direct control over the data, custom filtering rules, or the ability to display reviews from multiple locations under your own API account, and you accept the billing and key-management overhead. For most single-location businesses, keyless is the sensible default.

Can I embed Google reviews on Squarespace without paying for a plugin?

Yes. Squarespace has included a Code block and a global code injection area since version 7.1, so no paid plugin, app, or third-party script is required. Paste the widget markup into a Code block and, if you need shared styles, add a <style> block under Settings > Advanced > Code Injection > Header. The only Squarespace-specific constraints are explicit widget heights (no intrinsic sizing) and the fact that the widget executes only on the published site. If a paid platform is proposing an “Squarespace integration”, what they are really selling is the template library and automatic syncing, not access to the embed capability itself.

Will an embedded reviews widget hurt my Lighthouse score?

It can, and the reason is almost always one of three things: a synchronous script that blocks parsing, an unreserved container that shifts when content arrives, or a bloated framework bundle. A widget that ships as a single async script with no external CSS, renders into a container with a declared minimum height, and sits below the fold will not move your performance score meaningfully. Run Lighthouse before and after and you will typically see less than a two-point change either way. The dangerous pattern is an iframe pointing at a heavy widget builder that also loads web fonts and a carousel library — that combination routinely costs 20–30 points.

How many reviews should I show, and am I allowed to hide the bad ones?

Show five to ten, ordered by recency. You are free to display any public review on your site — they were published by your customers on Google, not by you. What you should not do is misrepresent the aggregate: if you display a “4.9 stars” badge, that number should be your actual Google rating, and you should not present a filtered subset as though it were the whole picture. Regulators in the US and UK have taken enforcement action against businesses displaying curated testimonials in a way that implies they are the full set. The safe pattern: show real reviews with a visible link to the full Google profile, display your true aggregate rating, and respond professionally to the negative ones.