How To: Embed in a React app

Embedding your embeddable in a React app is straightforward, and looks similar to the process of embedding in a regular website.

For embedding in other environments, check out embedding in your website or a React Native app.

<script> const SAVVY_PRELOAD_IDS=...

<savvy id="flow_abcdefhijklm"></savvy>

​

Embedding in a website or 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:

Warning: The tag <savvy> is unrecognized in this browser.
If you meant to render a React component, start its name with an
uppercase letter.

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:

useEffect(() => {
  const htmlElement = `<savvy id="flow_abcdefhijklm"></savvy>`;
  const container = document.getElementById("my-container"); // Select the container that the embeddable should appear in
  container.innerHTML = htmlElement; // Use '+=' if you want to append the embeddable to the contents of the container, instead of replacing the contents
});