# Inserting into Webflow
Add the prepared animation as a native Lottie element or advanced dotLottie player.

Select the destination in Webflow before using **Insert animation**. The source and enabled features determine what the app creates.

## Choose the destination

- For ordinary Lottie, select an element at the intended canvas insertion point.
- For dotLottie v2, themes, multiple animations, or state machines, select a Div block or another element that can contain children.
- Avoid selecting text, an image, or another element that cannot accept a child player.

<Image src="https://assets.docs.lottiefiles.com/static/d79aa51604-640.webp" alt="Animation ready to insert into the selected Webflow container" caption="Animation ready to insert into the selected Webflow container" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/d79aa51604-640.webp 640w, https://assets.docs.lottiefiles.com/static/d79aa51604-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/d79aa51604-1920.webp 1920w" width="1920" height="1080" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAkElEQVR4nEWOQQqCUAAFvYR9pcjMhQXpT/1ZmJHVKrTAlRq0Sbv/BYqJJGgxiwfDY7RL0/Hl2jw5lRXJ7kB6PFM0HXn1eGsyVMhohdqkLENFvM/6XdRtj2aaJtZojDAGRGGEt00J1glF9ROc+QJ1u6MLgfQ9hoaOL4P/g2XbzFSAM53gxhkiznGzsu/K6/b1AVVHRGczVi9SAAAAAElFTkSuQmCC" />

## Choose the insertion path

| Prepared source                         | Webflow result                                                          |
| --------------------------------------- | ----------------------------------------------------------------------- |
| Ordinary Lottie JSON                    | Webflow Asset and native Lottie element                                 |
| dotLottie without runtime-only features | Selected animation converted to native Lottie JSON when possible        |
| dotLottie v2 or active state machine    | `<dotlottie-wc>` element, unique style, thumbnail, and page custom code |

## Add the animation

1. Confirm the intended Webflow element is selected.
2. Review the prepared animation in LottieFiles.
3. Select **Insert animation**.
4. Locate the result in the page and Navigator.
5. Apply Webflow classes, size, and responsive layout.

{/* [screenshot:W19] Capture the native Lottie result and the advanced dotLottie result as two labeled Webflow insertion outcomes. */}

## Related

- [Configuring the player](/en/integrations/webflow/05_insert-and-publish/configuring-the-player)
- [Preparing state machines](/en/integrations/webflow/04_prepare/preparing-state-machines)