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

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.

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

Setup

Inline Embedding

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

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

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

  2. The second part should be once for each flow you want to embed inside the body of your page.

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

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

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.

My flow is not starting from the top.

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.

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.

Did this answer your question?