How To: Embed in a React app
How to publish your embeddable inside a React app
Embedding your embeddable in a React app is straightforward, and looks similar to the process of embedding in a regular website.
Looking for other ways to publish your Embeddable? Check out the Publish to your site guide.
Embedding in React
Grab the embed code
Head to the Embeddable in the Web App, click Embed Code in the top-right corner, and you’ll see the two-part embed code in the pop-up modal.
Insert the first part in the Head
The first part of the embed code (the large part) should go in the <HEAD>
of the page.
This only needs to be added once - if it’s already installed on all pages of your site then you can skip this step.
This is the large part that starts like this:
Insert the second part in the Body
The second part of the embed code should go in the <BODY>
of the page, wherever you want the embeddable to appear on the page.
The is the part that looks like this (where flow_abcdefhijklm
is your embeddable ID):
Embedding in a website or native app?
How To: Embed in your site
How to publish your embeddable to your site
How To: Embed in a Webflow site
How to publish your embeddable to your Webflow site
How To: Embed in a WordPress site
How to publish your embeddable to your WordPress site
How To: Embed in a React Native app
How to publish your embeddable inside a React Native app
Troubleshooting
React is giving me a warning about an unrecognized <savvy>
tag
Sometimes in the console, you will see this warning log from React:
This warning can be safely ignored, and should have no impact on your app.
However, if you want to avoid the warning appearing in the console, a workaround is to
insert the savvy just after the initial render using React’s useEffect
hook: