Embedding a heyflow with OnePage requires a few extra steps. But don't worry, with this guide it's easy peasy.

Before you start, make sure that you've published your heyflow.

Step 1: Add a code section

Go to your OnePage page and add a code section.

Add the section and click on it to edit the content. In the HTML tab, paste both scripts copied from Heyflow > Embed > Other > Code. Unfortunately, dynamic height does not work reliably with OnePage but you can keep it in. Toggle the "Save mode" in the top right.

Exit the code and you'll probably see something like this:

(OnePage nests two iframes into each other which is why the height is not set correctly.)

Step 2: Inspect the element and find the data-id

Now it will get a bit tricky. The approach differs slightly from browser to browser. We're using Chrome here. Right-click the cut-off flow and click "Inspect". A developer tool will open.

In the code, you should see something like to following: data-id="9e1a…". Copy the ID.

Step 3: Set the height of the Heyflow manually with CSS

Lastly, in OnePage, go to Settings > Code and navigate to the Styles tab. Here, enter the following code:

div[data-id="<your data ID>"] > iframe { height: 1000px; }

In this code, replace the <your data ID> with the ID you copied in Step 2. You can also adjust the value in height: 1000px to whatever you want.

Click Save and you should see your entire Heyflow. If it's still cropped, you can simply adjust the height we just set in the Code section.

Did this answer your question?