While Heyflow offers a quick and easy solution to embed your Clickflow into your website by copying an automatically generated HTML code into your website code, sometimes a custom iFrame fits better.
The reason, the range of different website builders and their technical infrastructure varies and so does the likelihood that the auto-generated code will not work as it should.
To get around this, you can embed your Clickflow using custom HTML code called iFrame.
🔎 If you want to learn about Heyflow's website embedding, click here.
Setup
Website Builder
If you're working with a website builder like Instapages, WordPress or other alternatives, choose an HTML block and place it where you want your Clickflow to appear later.
iFrame
Copy the following code inside the HTML block.
<iframe src="XXXX" width="100%" height="700" border="0px" style="border:none;"></iframe>
Insert your Clickflow
Now get the URL of your clickflow and paste it into the iFrame code. You can get your clickflow URL by simply clicking the arrow to the right of the publish button and copying the link.
Paste it where the XXXX are in the previous code snippet.
❗ Since this iFrame code is custom-made, it will not automatically adjust to the screen size within your flow. Therefore, it is advisable to adjust the height in the iFrame code to fit the screen size of your flow.
This only affects screens that are higher than the default 700 pixels, the iFrame will still adjust if the screen height is below the set value. You have to find the perfect height yourself. Most flows work with a height of 700 pixels, as suggested in the iFrame code.
