All Collections
Integrations and Modules
Website Embedding
Getting Started with Website Embedding (inline or popup)
Getting Started with Website Embedding (inline or popup)

Once you have published your heyflow, you can embed it into your website in just a few clicks.

Heyflow avatar
Written by Heyflow
Updated over a week ago

Important update: 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.

This article covers:

Initial embedding setup

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

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

  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.

  5. Enter your domain and define other settings like the size as needed.

  6. Click on "Add inline".

  7. Copy the given code snippets and paste them into your website
    Check out the next steps 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 "Config" tab and enter your changes. After that, don't forget to replace the newly generated code snippets on your website accordingly!

Popup Embedding

If you want to use our popup embedding, you choose the popup option and then get three snippets as seen below.
​

The first part goes into your head of your page. You only need to do this once.
The second part should be once for each flow you want to embed inside the body of your page.
The last part is in our example just an unstyled button element, which dispatches an event that the modal element reacts to.
​
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.

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="testytest" 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="testytest" 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.

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.
    ​

Next Steps

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.

What else can you do with your heyflow?

Did this answer your question?