Skip to main content

Embedding (inline or popup): Intro

Embed your heyflow into your website in just a few clicks

Updated today

⭐ Available on the following plans: Basic (limited), Pro, Agency, Business

👀 Not sure which plan you're on? Check your subscription here.

You can use your heyflow in many ways, one being embedded on your website, when you already have one. You are flexible when it comes to placing it on your website, such as an inline or popup embed.

This article covers:

🔎 If you’d rather want to use your heyflow as a standalone page on your website, learn here how to connect a domain to your heyflow.

❗ General support information

❗ Important updates

  • If you have set up your embedding before October 2024, we recommend disabling any caching to avoid the risk of pointing to an old version of the widget.

  • As of February 2023 Heyflows are now embedded as web components instead of iFrames which allows for better responsiveness to dynamic heights, increased loading speed and improved tracking possibilities. If you have set up your embeds before, we strongly recommend setting these up again and checking out our changelog below.

Setup

Intro

  1. Within your heyflow, go to the tab "Integrate" and then to "Embed"

    ❗ Please note: Your flow needs to be published before you can proceed.
    ​

  2. Click on "Add Embedding". This will open a bar on the right side, in which you can select your website operator.
    ​

  3. Select your operator or "Other"
    ​

  4. Choose between the two options for embedding:

    • When “Inline” is selected, your heyflow will appear as an element within your website

    • When “Popup” is selected, your heyflow will be centered in front of your page.
      ​

💡 If you make changes to your flow and publish it again, all changes will be reflected automatically in your embedded flow.

Inline Embedding

If you want to use our inline embedding, you choose the inline option and follow the next steps:

  1. Enter the domain, where your flow will be embedded
    ​

  2. Define the size of the embed as needed, e.g. initial height and width
    ​

  3. Change other settings of your embed like

    1. Dynamic height: Automatically set the height of the heyflow according to the screen content. This overwrites the initial height set above.

    2. Pass URL parameters: Automatically pass URL parameters (query string), such as utm_source, to the heyflow.

    3. Full width: Sets the element's width to 100%.

    4. Scroll to top: Automatically scroll the page to the top of the flow when navigating from screen to screen.
      ​

  4. Click on "Add inline".
    ​

  5. Copy the given code snippets and paste them into your website

    1. The first part goes into the head of your page. You only need to do this once for your whole website.

    2. The second part should be once for each flow you want to embed inside the body of your specific page. You can also individually style the embed directly within the code.
      ​

🔎 Check out the different provider below for some guides on how to use the code snippets with the most common website providers.

If you want to make changes later on, just go to the embed settings and enter your changes. After that, don’t forget to replace the newly generated code snippets on your website accordingly!

Popup Embedding

⭐ Available on the following plans: Pro, Agency, Business

👀 Not sure which plan you're on? Check your subscription here.

If you want to use our popup embedding, you choose the popup option and follow the next steps:

  1. Enter the domain, where your flow will be embedded
    ​

  2. Define the size of the embed as needed, e.g. initial height and width
    ​

  3. Change other settings of your embed like

    1. Dynamic height: Automatically set the height of the heyflow according to the screen content. This overwrites the initial height set above.

    2. Pass URL parameters: Automatically pass URL parameters (query string), such as utm_source, to the heyflow.

    3. Full width: Sets the element's width to 100%.

    4. Scroll to top: Automatically scroll the page to the top of the flow when navigating from screen to screen.

  4. Click on "Add popup".
    ​

  5. Copy the given code snippets and paste them into your website

    1. The first part goes into the head of your page. You only need to do this once for your whole website.

    2. The second part should be once for each flow you want to embed inside the body of your specific page. You can also individually style the embed directly within the code.

    3. The last part is in our example just an unstyled button element, which dispatches an event that the modal element reacts to. Add this code in the exact spot you want the button to appear. You can also individually style this button within the code:

<button style="background:#3630a3;color:white; border-radius: 8px;
onclick="window.dispatchEvent(new CustomEvent('heyflow-modal-element:open', { detail: { modalId: 'XoonEvirK4H-_B0Qq4y3m' }}))">My  button text</button>

💡 You can have more than one of these elements, without requiring more than one of the <heyflow-modal-elements>. The linking between the two is based on the modal-id. These need to match in your element that triggers the customEvent and the element that you want to open.

Different provider

If you want to know how to use the code snippets for your website provider, please follow the guidelines below. If your operator is not listed here, please consult their user guide for further instructions.

More Customizations

Passing URL parameters

As mentioned above, passing parameters from the parent page are now synced with your heyflow’s settings and enabled by default.

If you’d like to manually add URL parameters to your embedded heyflow, you can do so by directly defining them in the <heyflow> tag.

So if your code snippet looks like the one in the screenshot below, you’d have to adjust it like this:

<heyflow-wrapper flow-id="test" dynamic-height style-config='{"width": "800px"}' url-parameters="utm_source=Google&utm_campaign=spring01"></heyflow-wrapper>

Starting from a different screen

If you want to start your embedded flow from a different screen, you can simply insert a screen property to the embed code:

<heyflow-wrapper flow-id="test" dynamic-height style-config='{"width": "800px"}' screen="screenname"></heyflow-wrapper>

Your flow will then start from the desired screen and not the first screen as usually.

Custom JavaScript for embedded heyflows

If you want to use custom JavaScript while embedding your flow, make sure to head over to this help article to get started.

Troubleshooting

My flow doesn't show up.

Make sure you have inserted both embedding scripts correctly, one in the Head code section and one where you want your flow to appear.

❗ General support information

My flow is not starting from the top.

If you're having trouble with your flow not starting from the top when navigating, there could be a few different reasons for this.
​
Activate the feature Scroll to top in the settings of the embed, which automatically appends the following addition:
​


Also, make sure to not use any input field with Autofocus enabled. This would make the flow start directly in the input field and not the top.

If the top part of your flow is still covered when navigating in your embedded flow, the reason can also be a fixed header on your website which overlaps the embedded flow. When Heyflow scrolls up, the flow content gets hidden behind the header.

To prevent the embedded flow from getting hidden, add the following CSS to the heyflow-wrapper element, adjusting the value to match the height of the fixed header: style="scroll-margin-top: 100px".

❗ The amount of px for “scroll-margin-top:” needs to be the same as the height of the header element

UTM parameters are not passing through.

If you're using WIX as a web builder, passing UTM parameters is not possible. In all other cases, it's sent automatically to your flow response.

💬 If you're having any other issues, please contact the support.

Changelog

Here is what has changed with our February 2023 update:

  • Passing URL parameters is now synced with your heyflow’s settings and enabled by default. If you would like to disable this option, please do so in your flow settings

  • If you want your submit button to redirect to the parent window, you previously had to select “Parent window (embedded)” as Target in the button settings. This option doesn’t work with the new inline, please select “Same window (_self)” instead.

So if you want to change your existing embeds, you just need to follow these steps:

  1. Set up your inline embed as instructed in the initial setup above.

  2. Make sure to change your redirect from “Parent window (embedded)” to “Same window (_self)”.

  3. Paste the new code snippets into your website.

Related Articles
Custom iFrame Embedding (Deprecated)
Webflow Embedding
Wix Embedding
WordPress Embedding
Unbounce Embedding
Did this answer your question?