How to Add HTML to Framer Sites With the Embed Component

Can you add HTML to Framer? Yes, and without writing a code component. This walkthrough covers the built-in Embed component, the site-wide Custom Code settings and which of the two each ElectricBlaze widget should use.

Two routes for third-party code in the editor

  • Embed component. A layer on the canvas with two modes: URL, which loads a page in an iframe, and HTML, which accepts markup and script tags. You size it like any frame, so it sits inside stacks, grids and sections.
  • Custom Code in project settings. Snippets you name, place in the head or body of the document and assign to all pages or chosen ones. Nothing appears on the canvas; the code simply loads with the page.

Galleries and embedded video players are layers you want to position, so they go into an Embed. A chat button or a floating player overlays the whole viewport, which makes Custom Code the better home. Third-party guides report that site-wide Custom Code needs a paid site plan, so check your plan before relying on it.

Framer also lets developers write React code components. For a ready-made widget that is unnecessary: the snippet from ElectricBlaze is plain HTML.

Insert HTML in Framer with the Embed component

Open your widget at a.electricblaze.com, click Add to website and copy the snippet. Then switch to your Framer project.

  1. Open the page in the editor and select the section or stack that should hold the widget.

  2. Click Insert in the top toolbar, type Embed in the search field and drag the component onto the canvas.

  3. With the Embed selected, change its type in the right-hand properties panel from URL to HTML.

  4. Paste the snippet into the HTML field. The canvas keeps showing a placeholder, because scripts do not run inside the editor.

  5. Set the width to Fill and give the layer enough height, then publish and open the live URL in a browser.

Framer states that scripts execute only in the browser, not in the editor. Judge the result on the published site.

Layout details for embedded widgets

Width inside stacks and grids

An Embed with a fixed width stays that width on every breakpoint. Switch it to Fill so it follows its parent stack, and put a maximum width on the parent if the gallery should not stretch across a wide monitor. In a grid, let the Embed occupy a full row rather than a single cell.

Height and breakpoints

The HTML inside the component cannot resize the layer for you, so pick a height that fits the tallest state. Review the Tablet and Phone breakpoints separately: a three-column gallery may need more room once columns drop, while a slider barely changes.

Floating widgets

In project settings open Custom Code, click Add Script, give it a name, choose the end of the body tag as the placement and apply it to all pages. If the button vanishes after moving between pages, switch the script to Run on every page visit.

Embed not showing? Common causes

  • Empty box on the canvas. Normal. Publish, then open the site URL.
  • Nothing on the live page. The Embed is still in URL mode, so the snippet was treated as an address. Switch it to HTML.
  • Bottom of the feed clipped. The layer is too short for the rows; increase its height or use a slider layout.
  • Chat button only on the home page. The script is assigned to one page only, or runs once. Assign all pages and try the every-visit option.
  • Button behind a sticky header. Move the widget to a free corner or lower the header's stacking order.

New posts and edits from the widget editor appear on the site without republishing Framer.

Widget guides for Framer

Pick a widget for detailed steps and layout advice specific to it.

Adding HTML to Framer: FAQ

How to embed HTML in Framer without the code turning into text?

Paste it into an Embed component set to HTML mode. A Text layer or the URL mode will not execute markup.

Can I add custom HTML to Framer on the free plan?

The Embed component is part of the editor, so you can place the snippet while building. Site-wide Custom Code is reported to require a paid site plan.

How to add JavaScript to Framer for every page?

Use Custom Code in project settings, assign the snippet to all pages and choose whether it runs once or on every page visit.

Is an iframe embed the same as HTML mode?

No. URL mode wraps a web address in an iframe. ElectricBlaze widgets use a script, so they need HTML mode.

Build a widget for your Framer site

Start free, copy the snippet and paste it into an Embed layer.

Create a widget