Make sure to publish your flow before you embed it into your website.
Follow the following steps before proceeding to embed your flow into your website
You can embed through multiple website builders with customized configurations. You can find website integration through the 'Integrate' tab on go.heyflow.app under Embed.
Click on the "Add embedding" card to add a new Embedding script.
Choose the provider you are using. If your provider is not listed or writing your own HTML, choose "Other".
You can choose between two embedding styles: Inline or Popup (Popup is only available in the business plan).
Domain: Enter the domain where you want to embed your Heyflow.
Initial Height: This is the initial height in pixels that your embedded flow will start with. If you choose dynamic height, this will be overwritten based on the content on the screen.
Width: This is the fixed width of your embedded flow in pixels.
Dynamic height: Turning this on adjusts the height of the flow according to the contents on the screen and overwrites the initial height set above. The Dynamic Height property only works with one single flow of the same ID per page.
Full width: You can choose to allow the flow to fit 100% width of the parent element it is embedded in. This will overwrite the fixed width set above.
Pass URL Parameters: This allows you to pass any UTM or other URL parameters from the parent page (where the flow is embedded) to the flow so that you can use those parameters as variables in your flow and also receive those parameters in responses.
Once done with configuring your Embed settings, click on "Add inline" or "Add popup" at the bottom to generate your Embed script. You can always change the above properties later on which will regenerate the script.
Once added, head over to the Code section of the added Embedding configuration to access the code snippets.
Copy and paste the first snippet for the Head section in the Head section of your webpage.
PS: If you don't have access to the Head section, then you can also add it in the body or a custom HTML widget where you want your flow to appear. However, it is not recommended.
Copy and paste the second snippet in the body of your webpage or a custom HTML widget where you want your flow to appear.
You can always come back to the Embedding configuration under the Config section and change the properties to regenerate the snippets. Copy and paste the snippets again once you have changed the configuration.