HeroKit

Publish your hero

First, make sure that you’re logged in to HeroKit. Once you’re done with all edits to your Hero, click the publish button to open the publishing panel. Click on “Publish Hero”.

Copy embed code

The first time you publish, HeroKit will generate a unique embed code for your hero. Under “Embed on your site” select “Component”, then click on “Copy to Clipboard”

Framer

Insert embed component

Open or create a new project in Framer where you want to add your hero. In the toolbar, click Insert. Select Utility, then choose Embed

Place and resize embed component

Place the embed component at the top of your page. To make sure your Hero will cover the entire viewport use the following size options in the inspector panel:

• Width: 100% Rel
• Height: 100vh View

Also make sure to remove any padding around the component to make it fill the whole screen.

Paste embed code

Look for the Embed section in the inspector panel (bottom right). Select the HTML option and paste the embed code that you’ve copied from HeroKit in the input field.