You have a WordPress page set up, and you now want to integrate your Heyflow?
Easy. Just follow these few steps.
In this guide, we have set up a new WordPress page via wordpress.com. Alternatively, you can also set up and manage WordPress yourself. In this case, the installation might be slightly different.
💡 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.
🔎 If you want to learn more about embedding and customization options, click here.
Setup
Step 1: Install Head Code Plugin
To embed our heyflow, we have to insert two scripts. One goes into the Head section, the other into the body. 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 Integrate > 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
Almost there.
Now, create or update the page your want your heyflow to appear on.
Add a block Columns block. This allows you to style the heyflow 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.