Embedding GuideFramer

How to Embed a Widget on Framer

Framer is a powerful visual design tool for building interactive, production-ready websites without writing code. There are two ways to embed an Embeddy widget in a Framer project: using the built-in Embed component on the canvas (recommended for visible widgets), or using Custom Code in Project Settings for script injection.

1. Prerequisites

1An active Embeddy account with at least one published widget.
2A Framer account with an existing project, or a new project open in the Framer editor.
3Your Embeddy widget's direct URL or iframe embed code — both available in your dashboard under the widget's Share or Embed tab.

Where to find your embed code

In your Embeddy dashboard, click on any widget and go to the Embed tab. You will see both the iframe code and the direct URL. Copy either one before opening Framer.

2. Method 1: Embed Component (Recommended)

The Embed component is Framer's native solution for displaying third-party content inline on your page. It renders as an iframe and is the cleanest way to show a visible Embeddy widget on a Framer site.

Recommended for visible widgets

Use this method when you want the widget to appear as a visible element on your Framer page — for example, a chat widget, quiz, or interactive embed placed in the page layout.

Steps

1
Open your Framer project canvas.
Navigate to the page or section where you want the widget to appear.
2
Open the Insert menu.
Click the + icon in the toolbar, or press I on your keyboard to open the Insert panel.
3
Search for and add the Embed component.
In the Insert panel, search for Embed. Drag it onto your canvas and place it where you want the widget.
4
Paste your Embeddy widget URL.
With the Embed component selected, look at the properties panel on the right side. Find the URL field and paste your Embeddy direct widget URL:
https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID
5
Resize the component.
Drag the handles to set the desired width and height. Most widgets look best at 100% width and a fixed height (e.g., 500px or taller, depending on your widget content).
6
Publish your site.
Click Publish in the top-right corner. The widget will appear live on your published Framer site.

Alternative: Code Component with iframe

If you need more control over the iframe attributes (such as allow or custom styles), you can use a Code Component instead. In Framer, create a new Code component and paste the following:

export default function EmbeddyWidget() {
  return (
    <iframe
      src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
      width="100%"
      height="500"
      frameBorder="0"
      style={{ border: "none", borderRadius: "8px" }}
    />
  );
}

Replace WIDGET_ID and PROPS_ID with the values from your Embeddy dashboard.

3. Method 2: Custom Code Scripts

Framer's Custom Code feature (Project Settings → Custom Code tab) is designed for injecting scripts and tags into your site's <head> or<body>. This is the standard approach for analytics tools, support chat scripts, Meta Pixel, and structured data — not for inline visible embeds.

When to use Custom Code

Use this method only if you need to inject a JavaScript snippet sitewide or per-page — for example, a floating chat widget that loads from a script tag. For visible embedded content, use Method 1 (Embed Component) instead.

Steps

1
Open Project Settings.
In the Framer editor, click the gear icon or navigate to Project Settings from the top menu.
2
Go to the Custom Code tab.
Find the Custom Code section. You will see options for injecting code into the <head> or end of <body>, either sitewide or for specific pages.

Paste your script tag in the End of Body section.

<div id="embeddy-widget-container"
     style="width:100%;height:500px;">
  <iframe
    src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
    width="100%"
    height="100%"
    frameborder="0">
  </iframe>
</div>

4
Set targeting and frequency.
Framer lets you target specific pages and control whether the code runs once per session or on every visit. Set this according to your widget's use case.

Good use cases for Framer Custom Code

Google Analytics 4 (GA4) tracking script
Meta Pixel or LinkedIn Insight Tag
Intercom or live chat initialization script
JSON-LD structured data per CMS page
Floating widget that renders outside the normal page flow

4. Troubleshooting

The Embed component shows a blank white box in the Framer editor

This is expected. Framer's editor does not render live external iframes in the design canvas to avoid slowdowns. Your widget will appear correctly on the published or previewed site. Click Preview to test it before publishing.

Widget is cut off or has scrollbars

Increase the height of the Embed component. Select the component on the canvas and set a fixed height value in the right-side panel. Alternatively, in a Code Component, you can add overflow: hidden or adjust the height dynamically.

Widget does not appear on mobile

In Framer, use breakpoint-specific layout to ensure the Embed component is visible on all breakpoints. Check that the component is not set to hidden on mobile by reviewing the visibility settings in the properties panel for each breakpoint.

Custom Code script does not execute

Make sure you are testing in a published version of your Framer site, not just in the editor preview. Custom code scripts execute in the live published environment. Also verify the script is placed in the correct section (body, not head) and has no syntax errors.

5. FAQ

Can I embed different widgets on different Framer pages?

Yes. The Embed component is placed per-page on the canvas, so you can drop a different Embeddy URL into each page's Embed component. If using Custom Code, Framer supports per-page targeting so you can configure unique scripts or iframes for each page.

Does the Embed component affect Framer's CMS or SEO?

The Embed component renders an iframe which is isolated from Framer's CMS and SEO metadata. Search engines do not index content inside iframes, so your Framer page's SEO is not affected. Embeddy widget content remains separate and is served from embeddy.ai's infrastructure.

Can I use Framer's CMS to pass dynamic widget IDs?

Yes, with a Code Component. Create a Framer Code Component that accepts a CMS field as a prop and constructs the Embeddy URL dynamically. For example, store the widget_props_id in a CMS field and pass it to the iframe src as a template literal.

Ready to embed on Framer?

Build your widget in minutes with embeddy.ai — no coding required.

Open Dashboard Browse All Docs