Webflow allows you to create visually stunning websites while keeping full control over the design. By embedding your Heyflow directly into your Webflow pages, your visitors can interact with your flow without leaving the site, creating a seamless and engaging experience.
🔎 If you want to learn more about embedding and customization options, click here.
❗ Having issues with embedding? Check out our troubleshooting guide for solutions to common problems and tips on how to get your embed working smoothly.
Setup
Before we start, make sure to publish your flow before you embed it into your website. Only after you've published your flow is the embed script generated. To embed our flow, we have to insert two scripts. One goes into the Head section, the other into the body.
Step 1: Insert Head Code
Let's first insert the Head script. In Webflow, you can either add a custom code in all the pages or one specific one. Find more information here.
To add custom code inside the <head> tag of an individual page:
Open your site in the Designer
Open Page settings for the page where you’d like to add your code
Add your custom code to the Inside <head> tag section under Custom code and save your changes.
Step 2: Insert Body Code
Now, create or update the page you want your heyflow to appear on.
Go to a Collection item
Open Rich text field options
Select custom code
Paste in your second embed code from Heyflow:
Save, close and publish!
❗ Note: Custom code and scripts will only appear on the published site.