INTEGRATIONS

Framer + Shoutjar

Add stunning testimonial widgets to your Framer site. One embed code. Fully customizable. Updates automatically.

Works with Framer Free & Pro
No plugins needed
5 minute setup
F
Framer
Shoutjar

Your Framer Site Needs Social Proof

Framer makes it easy to build beautiful websites.

But when it comes to testimonials, your options are limited:

Build it yourself — Design testimonial cards, add them manually, update every time
Static content — Screenshots of tweets that get stale
CMS workaround — Set up a collection, design templates, maintain manually

With Shoutjar:

One embed code
Auto-imports from review platforms and social media
Updates automatically — never touch Framer again
Multiple widget styles that match your design

Add Testimonials in 3 Steps

1

Create Your Widget

Sign up for Shoutjar (free). Import testimonials from G2, Trustpilot, Twitter, Product Hunt — or add manually. Customize style and colors to match your Framer design.

2

Copy Embed Code

Click "Get Embed Code" in Shoutjar. Copy the snippet. One click, done.

3

Embed in Framer

Add an Embed component in Framer. Paste the code. Publish.

Done. Live testimonials on your Framer site.

Step-by-Step Framer Integration

Method 1: Embed Component

Recommended
  1. 1.Open your Framer project
  2. 2.Click + (Insert) in the left panel
  3. 3.Search for "Embed"
  4. 4.Drag the Embed component onto your canvas
  5. 5.In the properties panel, select "HTML"
  6. 6.Paste your Shoutjar embed code
  7. 7.Resize the embed container as needed
  8. 8.Publish your site

Method 2: Custom Code

Site-Wide

For testimonials on multiple pages:

  1. 1.Go to Site Settings → General → Custom Code
  2. 2.Add the Shoutjar script to the End of <body> section
  3. 3.Use Embed components on individual pages for the widget HTML
  4. 4.Publish

Note: Custom code requires a paid Framer plan.

Tips

  • Set the Embed component to fill width for responsive behavior
  • Use Framer's breakpoint controls to adjust sizing per device
  • The widget auto-scales, but you can constrain the container width

Widgets That Feel Native to Framer

Designed to match Framer's modern aesthetic

Grid Widget

Clean, structured layout. Multiple testimonials in a polished grid. Feels right at home on any Framer page.

Best for: Testimonial sections, About pages

Carousel

Smooth transitions between testimonials. Minimal space, maximum impact. Works beautifully in hero sections.

Best for: Homepage, above the fold

Marquee

Continuous scrolling ticker. Modern, dynamic, eye-catching. Perfect for Framer's animation-rich aesthetic.

Best for: Headers, announcement bars

Badge

Compact star rating display. Tuck it into headers or near CTAs. "4.8 ★ from 150+ reviews" — small but powerful.

Best for: Navigation, hero sections, near CTAs

Single Spotlight

Feature one testimonial prominently. Bold and clean. Great for landing pages and above-the-fold sections.

Best for: Landing pages, hero sections

All widgets include:

🎨

Match your color palette

📱

Fully responsive

Smooth animations

🌓

Light & dark mode

Fast loading

🔧

No CSS needed

Match Your Framer Design System

Framer users care about design. So does Shoutjar.

Colors

Match your exact brand palette. Primary, secondary, background, text — full control.

Aa

Typography

Widgets inherit your site fonts or use custom ones. Clean, consistent type.

Layout

Set width, spacing, padding. Responsive by default. Works with Framer's layout system.

Dark Mode

Toggle between light and dark themes. Matches Framer's dark mode if you use one.

Animations

Smooth enter animations. Works alongside Framer's scroll effects.

No CSS Needed

Customize everything in Shoutjar's visual editor.

Pro Tips for Framer Users

Responsive Behavior

Shoutjar widgets are responsive by default. In Framer:

  • Set the Embed component to Fill width
  • Use min/max width to constrain on large screens
  • Preview across breakpoints to verify

Combining with Framer Animations

Wrap the Embed component in a Frame, then apply:

  • Scroll animations — fade in on scroll
  • Viewport triggers — animate when visible
  • Stagger effects — if using multiple widgets

CMS vs Shoutjar

Framer's CMS can handle testimonials, but:

  • You design and maintain the layout yourself
  • No auto-import from platforms
  • No auto-discovery of social mentions
  • Updates require manual CMS edits

Shoutjar handles all of this automatically.

Multiple Pages

Use different widgets on different pages:

  • Homepage → Carousel of best reviews
  • Pricing → ROI-focused testimonials
  • About → Full grid of customer love
  • Landing pages → Single spotlight testimonial

Import Testimonials From Anywhere

Shoutjar connects to all your review sources

Social Media

  • Twitter / X
  • LinkedIn
  • Reddit
  • Product Hunt
  • Hacker News

Manual Entry

  • Emails
  • DMs
  • Slack messages
  • Support tickets

Auto-Discovery

Shoutjar monitors the web for mentions of your product — even untagged ones.

Most Framer users manually add testimonials. Shoutjar automates the entire process.

Shoutjar vs Manual Testimonials in Framer

Compare your options

FeatureShoutjarManual in Framer
Setup time5 minutes1-2 hours (design + content)
Import from G2/TrustpilotCopy-paste manually
Auto-discover social mentionsSearch manually
UpdatesAutomaticEdit CMS or canvas
Multiple widget stylesPre-builtDesign yourself
Social image generationUse Canva
Wall of Love pageBuild yourself
Works if you change platformsFramer only
PriceFrom €9/moFree (but time-expensive)

Bottom line: Building testimonials manually in Framer works. But Shoutjar saves hours and adds features you can't build yourself (auto-discovery, multi-platform import, social content).

How Framer Users Use Shoutjar

Real use cases from our community

🚀

SaaS Landing Page

"I built my landing page in Framer. Adding Shoutjar took 5 minutes. Now I have a testimonial carousel that updates itself."

  • Homepage social proof
  • Pricing page trust
  • Feature page validation
🎨

Portfolio / Agency Site

"I showcase client testimonials on my agency site. When a new one comes in, I add it in Shoutjar — no need to open Framer."

  • Client testimonials section
  • Case study pages
  • Contact page trust
🏆

Launch Page

"Built a Framer launch page and embedded Product Hunt comments as testimonials. Social proof from day one."

  • Launch day credibility
  • Early adopter quotes
  • Community feedback display

Frequently Asked Questions

Does this work with Framer's free plan?

Yes. Embed components are available on all Framer plans. Custom code (for site-wide scripts) requires a paid plan.

Do I need to know code?

No. Just copy and paste. Shoutjar handles everything.

Will it affect my Framer site's performance?

No. Shoutjar loads asynchronously with a tiny footprint (<20KB). No impact on load times.

Can I style the widget to match my Framer design?

Yes. Full control over colors, fonts, spacing. Widgets adapt to your design system.

Do testimonials update automatically?

Yes. Changes in Shoutjar appear on your Framer site instantly. No republishing needed.

Can I use different widgets on different pages?

Yes. Create multiple widgets, embed each one where you want it.

Works With Other Platforms Too

Use Shoutjar anywhere you can paste an embed code

WebflowWordPressShopify
Squarespace
Wix
Carrd
Ghost
Next.js
React
HTML/CSS
Notion
Any website

Social Proof for Your Framer Site

Beautiful testimonials. One embed. Automatic updates. Five minutes.

Add Testimonials to Framer
Works with all Framer plans
Free plan available
No coding required