Once you've got an animation that you're ready to add to your site, there are two main methods for embedding. We'll look at the use cases  and provide some tips for each.

When choosing which embed method to use, you'll want to consider whether you need the animation to interact with anything outside of its canvas.

1. The Easy Method - iframe embed

Adding an interactive Rive animation is really easy with the iframe embed method. You can setup any animations and state machines you'd like and they'll all work within the canvas area of the Rive artboard.

With iframe embed all interaction happens within the Rive canvas area
Learn about using iframe embeds

2. The Advanced Method - JS runtime

Using the JS runtime requires more code writing/editing, but also enables much deeper integration with your website. Using this method allows you to reference the state machines, animation states, and inputs of your Rive file to affect changes within and beyond the canvas.

The JS Runtime can enable interactions inside and outside of the Rive Canvas
Learn about using JS Runtimes