RevuKit
Tutorial10 min read

How to Add Google Review Widgets to Framer (Without Code)

Step-by-step tutorial for adding live Google review widgets to any Framer site. Covers plugin installation, widget selection, styling, and publishing β€” all without writing a single line of code.

RevuKitRevuKit

Why Reviews Matter (More Than You Think)

Let's skip the generic "social proof is important" preamble and talk numbers. According to research from the Spiegel Research Center at Northwestern University, displaying reviews can increase conversion rates by 270%. For higher-priced products and services, the effect is even more pronounced β€” up to 380%.

The psychology is straightforward: when a potential customer lands on your site, they're making a trust decision in seconds. A beautifully designed hero section tells them you care about presentation. Real reviews from real people tell them you deliver on promises.

For Framer sites specifically β€” which tend to be design-forward SaaS landing pages, agency portfolios, and local business sites β€” reviews bridge the gap between "this looks good" and "I should actually buy this."

The Traditional Approach (and Why It Fails in Framer)

Before dedicated tools existed, adding Google reviews to a website meant one of three approaches β€” all of which have significant drawbacks in Framer:

  1. Manual copy-paste. Screenshot reviews, create text blocks, update them manually. Looks polished initially but goes stale within weeks. You also can't verify they're real, which erodes trust.
  2. Google's embed widget. Google provides a basic Places widget, but it uses an iframe with Google's styling. It looks completely out of place on a high-end Framer site, can't be customised, and often loads slowly with layout shifts.
  3. Custom API integration. Build a Code Component that calls the Google Places API directly. This works but requires API key management, usage billing ($17 per 1,000 requests), and significant development time for rendering, caching, and error handling.

None of these options respect the core value of Framer: shipping fast without compromising quality.

The RevuKit Approach

RevuKit is a Framer plugin purpose-built for this problem. It connects to your Google Business Profile, syncs your reviews automatically, and renders them using native Framer Code Components that match your site's design.

Key differences from other approaches:

  • No iframes. Widgets render as real DOM elements inside your Framer site, so they inherit your fonts, respect your layout, and don't cause layout shifts.
  • Automatic sync. Reviews refresh automatically β€” new reviews appear without you touching anything. Pro plans sync every 24 hours.
  • Fully customisable. Match your brand colors, border radius, shadows, and typography from the Framer properties panel.
  • Performance-first. Widgets are loaded as lightweight UMD bundles from a CDN. Total payload is under 30KB gzipped.
  • Works on published sites. Not just in the editor β€” the widget renders identically on your live, published Framer site.

Step 1: Install the RevuKit Plugin

Open your Framer project and navigate to the Plugins panel (the puzzle piece icon in the left toolbar, or press ⌘ + /).

  1. Search for "RevuKit" in the plugin marketplace
  2. Click Install
  3. The plugin appears in your Plugins panel β€” click to open it

Alternatively, visit the RevuKit for Framer page and click "Add to Framer" to install directly.

Step 2: Connect Your Google Business Profile

When you first open the RevuKit plugin, you'll see a search field. Type your business name and select it from the dropdown β€” RevuKit uses the Google Places API to find your listing.

Once connected, RevuKit pulls in your current reviews, rating, and Business Profile information. This data is cached on our CDN so your site never makes direct Google API calls β€” which means no API billing for you and faster load times for visitors.

πŸ’‘ Tip: If you manage multiple locations, you can search for each one individually. Each widget instance is bound to a specific location.

Step 3: Choose a Widget Layout

RevuKit offers multiple widget layouts, each designed for different use cases and page positions. Browse the widget gallery inside the plugin to preview each one with your actual review data.

Available Widget Types

  • Compact Badge β€” A small, inline badge showing your star rating and review count. Perfect for headers, footers, or next to CTAs. Takes up minimal space but adds instant credibility.
  • Featured Reviews List β€” A vertical list of your best reviews with reviewer names, star ratings, dates, and full review text. Ideal for dedicated testimonial sections.
  • Review Carousel β€” An auto-scrolling horizontal carousel that cycles through reviews. Great for social proof sections between content blocks.
  • Review Wall β€” A masonry grid displaying multiple reviews simultaneously. Creates a powerful visual impact β€” best used for full-width sections.
  • Animated Rating Grid β€” A dynamic, animated display that draws attention with subtle motion. Excellent for hero sections and landing pages.
  • Detailed Reviews β€” Full-length reviews with rich formatting, ideal for service-based businesses where review depth matters.

Step 4: Customise Your Widget

Every RevuKit widget is fully customisable from within the Framer plugin. No code required β€” just adjust the controls:

  • Primary color β€” Sets star rating color and primary accents. Default is Google's yellow (#FBBC04), but you can match your brand.
  • Secondary color β€” Controls text and card backgrounds for contrast control.
  • Tertiary color β€” Subtle accents for secondary text and borders.
  • Border radius β€” From sharp corners (0px) to fully rounded (24px+). Match your site's card style.
  • Shadow β€” None, subtle, or elevated. Controls the depth perception of review cards.

The plugin shows a live preview as you adjust settings, so you can see exactly how the widget will look on your site before inserting it.

Step 5: Add to Canvas & Publish

Once your widget looks right, click "Add to canvas". The widget is inserted as a Code Component on your Framer canvas. You can:

  • Resize it by dragging the handles
  • Position it within your layout stacks
  • Set responsive overrides for tablet and mobile breakpoints
  • Wrap it in a section Frame with padding and background color

When you're ready, hit Publish. The widget renders identically on your live site β€” no additional configuration needed. Reviews update automatically as new ones come in.

πŸ’‘ Layout tip: For the best visual hierarchy, place review widgets directly after your main value proposition or features section. The pattern "here's what we do β†’ here's what people say about it" is one of the highest-converting layouts in web design.

Advanced Tips

Once you have the basics working, these techniques will take your review integration to the next level:

  1. Multiple widgets per page. Use a Compact Badge in your header for persistent credibility, then a full Review Wall further down the page for depth. Each widget instance is independent.
  2. Match your CMS templates. If you're using Framer CMS for case studies or service pages, add a review widget to the template. Every CMS page will automatically include customer reviews.
  3. Pair with scroll animations. Wrap your review widget in a Frame and add a Framer Appear animation (fade up, 400ms, spring). This makes the social proof section feel intentional rather than bolted on.
  4. Dark mode compatibility. Use the secondary and tertiary color controls to create a dark-mode variant of your review widget. Place it on a dark section for visual contrast.
  5. A/B test widget placement. Try the widget above the fold vs below the fold. Move it before vs after your pricing section. Even subtle position changes can impact conversion rates.

Free vs Pro: Which Plan Do You Need?

RevuKit offers a generous free tier so you can try everything before committing:

  • Free ($0/month) β€” 250 widget views per month, all widget types, full customisation, RevuKit watermark. Perfect for testing and low-traffic sites.
  • Pro ($9/month) β€” 50,000 views, no watermark, 24-hour review sync, priority support. The right choice for professional and client sites.
  • Enterprise ($30/month) β€” Unlimited views, dedicated support, advanced analytics. For high-traffic sites and agencies managing multiple clients.

For most Framer users building a single business site, Pro at $9/month delivers the best value β€” it removes the watermark (critical for professional projects) and ensures reviews stay current with 24-hour sync.

View full pricing details β†’

Pre-Publish QA Checklist (Framer + RevuKit)

Run this before publishing. It takes 10 minutes and prevents most widget-related issues from reaching production.

  1. Desktop + mobile render: confirm widget layout at all breakpoints.
  2. Color contrast: verify stars, text, and card surfaces pass readability checks.
  3. Empty-state behavior: ensure the section still looks intentional if reviews are delayed.
  4. Placement sanity: widget appears near a CTA, not isolated at page bottom.
  5. Load behavior: no layout jump or major CLS when widget content appears.
  6. Dark sections: if used on dark backgrounds, confirm text and star visibility.
  7. Performance spot-check: verify page speed impact remains negligible.
  8. Link validation: any β€œLeave a review” or CTA links open correctly.
  9. Published-site parity: compare editor preview vs live URL output.
  10. Analytics: track clicks near the review block to measure lift.

Practical benchmark: if your review section doesn't improve either CTA click-through rate or form-start rate after 2-3 weeks, test a new placement before changing visual design.

Common Questions

Does the widget work on published Framer sites?

Yes. Unlike some plugins that only render in the editor, RevuKit widgets are built as Code Components that render identically on your published, live site. What you see in the editor is exactly what your visitors will see.

Will it slow down my site?

No. The widget runtime is loaded asynchronously from a CDN as a lightweight UMD bundle (under 30KB gzipped). It doesn't block initial page rendering, and review data is pre-cached on our CDN so there's no waiting for Google API responses.

Can I show only 5-star reviews?

RevuKit automatically curates your best reviews. The algorithm prioritises reviews with detailed text, high ratings, and recent dates. You don't need to manually filter β€” the widget shows your most impactful reviews by default.

What if I have multiple business locations?

Each widget instance is connected to a specific Google Business Profile location. Add multiple widgets on separate pages (or even the same page) to showcase reviews from different locations.

Can I use RevuKit with other Framer plugins?

Absolutely. RevuKit renders as a standard Code Component and doesn't interfere with other plugins. It works alongside analytics plugins, form builders, chat widgets, and any other Framer integration.

Start Adding Reviews Today

Adding social proof to your Framer site shouldn't require a developer, a Google API key, or a weekend of work. With RevuKit, the entire process takes 60 seconds:

  1. Install the plugin
  2. Search for your business
  3. Pick a widget
  4. Add to canvas
  5. Publish

Your reviews are already on Google. Your visitors are already looking for them. All you need to do is put them where they belong β€” right on your website.

Browse RevuKit widgets for Framer β†’


Need help choosing the right widget layout for your site? Email us at support@revukit.com with a link to your Framer project and we'll send personalised recommendations.

Relevant From Framer Hub

Continue with related reads

View all Framer articles

Ready to add review widgets to your Framer site?

Beautiful, native Google review widgets β€” installs in 60 seconds.

Browse Widgets

Build with Framer

The design-first website builder. Start for free.

Try Framer