Integration Guide
Framer Component
Drop a testimonial widget into any Framer project with our ready-made embed. Add a Code component in HTML mode, paste the iFrame code, and your widget is live the moment you publish — no npm packages or custom overrides required.
Copy your embed code
In your Credibly dashboard, open the widget you want to display and copy the iFrame embed code from the embed options panel. The iFrame embed is the recommended method for Framer because it gives you precise control over the widget's dimensions directly on the Framer canvas.
Add a Code component
In your Framer project, click Insert (or press I) and search for "Code" to add a Code component to your canvas. In the component settings on the right panel, switch the mode from "React" to "HTML" — this enables raw HTML and iframe embedding directly in your design.
Paste and publish
Paste the iFrame embed code into the Code component's HTML field. Resize the component on the canvas to set your preferred widget dimensions — the iframe will fill the component's bounding box. Click Publish to push your site live and your testimonial widget will render on the published URL. A native Framer component is coming soon for one-click installation from the Framer Marketplace.
Integration Features
Credibly works with Framer the way designers think — visually, on canvas, without writing production JavaScript.
Native Embed Support
Framer's Code component with HTML mode accepts the Credibly iFrame embed directly. No custom code overrides, no workarounds — it works the same way Framer handles any embedded third-party content.
Responsive on the Framer Canvas
Resize the Code component on your Framer canvas and the testimonial widget scales to fill it. Set percentage-based widths and the widget responds correctly across all breakpoints you define in Framer.
Works With Any Framer Template
Whether you started from a blank canvas, a Framer template, or a Framer Site, the Code component HTML approach works identically. There are no theme or template restrictions.
Breakpoint-Aware Layout
Create different Code component instances for desktop, tablet, and mobile breakpoints with different heights, then hide/show them per breakpoint using Framer's responsive visibility controls.
Framer CMS Compatible
Embed Credibly widgets on Framer CMS collection pages to show relevant testimonials alongside your CMS-powered content — blog posts, case studies, team bios, or product pages.
No External Dependencies
The iFrame embed approach adds zero JavaScript to your Framer bundle. The widget loads in its own sandboxed iframe context and has no impact on your Framer site's build size or performance scores.
Best Practices
A few things Framer users should know before embedding to avoid common sizing and preview pitfalls.
Pin the component height explicitly on each breakpoint
iFrames do not auto-resize their parent container. In Framer, set an explicit height on the Code component for each breakpoint (desktop, tablet, mobile) rather than relying on auto-height. A grid layout typically needs 600–800 px, while a carousel works well at 400–500 px.
Use Framer's scroll-based animations for entrance effects
Wrap the Code component in a Framer Stack or Frame and apply a scroll-triggered animation (fade-in, slide-up) so the widget animates into view as the user scrolls. This draws attention to testimonials at the right moment without JavaScript you need to write.
Duplicate the component across pages instead of re-embedding
Once you have configured a Code component with your embed code, copy it (Cmd+C / Ctrl+C) and paste it onto other pages in your Framer project. The embed code carries over, so you do not need to re-paste from the Credibly dashboard.
Preview on a published URL to verify the widget loads
Framer's in-editor preview mode may show the Code component as a placeholder box rather than rendering the actual iframe. Always click Publish or use "Preview on published domain" to verify that the widget loads and displays correctly.
Troubleshooting
Here are the three most common issues Framer users run into and how to resolve each one.
The Code component shows a blank box in the Framer editor
This is expected behavior. Framer's editor preview does not execute iFrame HTML for security reasons. Click "Preview" or "Publish" to see the widget render on the actual published URL. The embed is working correctly if the HTML is pasted in and no console errors appear on the published site.
The widget is cut off or scrollable inside the component
The Code component height needs to be taller than the widget's rendered content. Open the widget in your Credibly dashboard to preview its approximate height, then set the Framer Code component to a matching or slightly larger fixed height. Avoid setting the component to auto-height, as iFrames do not communicate their content height to the parent frame.
Widget loads in the editor preview but disappears after publishing
Check your Framer site's Content Security Policy settings if you have configured them. The Credibly iframe origin (credibly.so) must be included in your frame-src or default-src CSP directives. In most cases this is not set and the widget will work without any changes after publishing.
Frequently Asked Questions
Can I use the Credibly widget with Framer templates?
Yes. The Code component HTML approach works with every Framer template. Open the template in the Framer editor, add a Code component in HTML mode to your preferred section, paste the Credibly iFrame embed code, and publish. There are no restrictions based on which template you started from.
How do I resize the testimonial widget in Framer?
Resize the Code component directly on the Framer canvas by dragging its edges or setting explicit width and height values in the right panel. The iFrame fills the component's bounding box, so the widget dimensions follow your component size. Set different sizes per breakpoint to control the widget's appearance on desktop, tablet, and mobile.
Does the Credibly widget work with Framer's responsive breakpoints?
Yes. You can create the Code component at each breakpoint and set appropriate heights for desktop, tablet, and mobile. Alternatively, create a single component with a percentage-based width and a fixed height that works acceptably across breakpoints. Use Framer's responsive visibility controls to hide or show different component instances per breakpoint.
Can I use multiple Credibly widgets on the same Framer page?
Yes. Add as many Code components as you need, each with a different iFrame embed code corresponding to a different Credibly widget. Each component is independent — you can size and position them separately. There is no limit on how many widgets a single Framer page can contain.
Will the Credibly widget affect my Framer site's performance score?
No. The iFrame embed loads in a sandboxed context entirely separate from your Framer site's JavaScript bundle. Your Framer site's Lighthouse performance score, LCP, and CLS are unaffected. The widget loads after your page's critical content is already visible.
More Integrations
Credibly works across every major website platform. Explore our other integration guides.