WordPress is one of the most popular website platforms - and the good news is, you can easily integrate your Heyflow directly into your WordPress site. Whether you’re using the block editor or a classic setup, embedding your flow only takes a few minutes. This way, your visitors can interact with your Heyflow seamlessly, without leaving your page.
🔎 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: Install Head Code Plugin
Let's first insert the Head script. To conveniently insert code into the Head section of your WordPress page, install the plugin WPCode Lite or Insert Headers and Footers by WPBeginner. You can use another method or plugin to insert the script if you prefer.
In the hosted WordPress environment, installing plugins requires a Business plan. In the self-hosted environment, installing plugins is generally free of charge.
Step 2: Insert Head Code
After you've successfully installed the plugin, switch to the Connect > Embed section of your Heyflow and add a WordPress embedding. Here, we recommend setting the width to 100% (full-width). This allows us to manage the container width directly in WordPress which is a bit more convenient.
Now, copy the first code snippet.
Now switch back to your WordPress page and go to Settings > Install Headers and Footers in the left-hand sidebar.
In the Script in Header section, paste your copied code and click Save at the bottom of the page.
Step 3: Insert Body code
Now, create or update the page you want your heyflow to appear on.
Add a block Columns block. This allows you to style the flow container easily. Select One Column.
In the newly created column container, add an HTML block.
Switch back to Heyflow and copy the second code snippet and paste the code into the newly created HTML block.
Now publish or update your page (see the Update button in the top right corner).
Tada 🎉 Your heyflow is now embedded into your WordPress page.