# Configuring the player
Configure native Webflow Lottie elements and advanced dotLottie players.

The inserted element has two possible runtime models. Identify which one the app created before changing it.

## Native Webflow Lottie

The app uploads the prepared JSON to Webflow Assets and creates a native Lottie Animation element. Use Webflow to control its size, classes, position, visibility, and native animation behavior.

The selected palette or theme is already applied to the inserted JSON. It is not a live theme connection to the Workspace file.

<Image src="https://assets.docs.lottiefiles.com/static/837f117627-640.webp" alt="Selected Webflow animation with app preview" caption="Selected Webflow animation with app preview" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/837f117627-640.webp 640w, https://assets.docs.lottiefiles.com/static/837f117627-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/837f117627-1920.webp 1920w" width="1920" height="1080" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAlUlEQVR4nB3IywqCQABA0fmAMLIsxGdmD1ObURNCJLSolq7S/v87ihu1OJsjbt3AvRt4/L1ouyd1e6M6X3/3EZ7v463W2EGEG4Q4rsOpuRAfJInMEZOJxsLfkTRPdNPBXMxR9Zm9ytioCqFpIwzTouh7xrqOMZviOxbh0iOOtojimCOzjDQvKMojaV5iy5b5tkQq9f4CYcY9n4KksIYAAAAASUVORK5CYII=" />

## Advanced dotLottie player

The app inserts a `<dotlottie-wc>` element inside the selected container and adds the page-level runtime script. The element can carry:

- Source or embedded animation data.
- Autoplay and loop.
- Active animation ID.
- Default, light, and dark theme IDs.
- Active state-machine ID.
- Background and element dimensions.

Webflow can show a still thumbnail on the design canvas. The page custom code hides that thumbnail and initializes the real player in Preview and on the published site.

{/* [screenshot:W21] Capture the advanced dotLottie element in the Navigator, its canvas thumbnail, and the same running player in Webflow Preview. */}

## Layout and responsive behavior

Use Webflow styles for width, height, display, positioning, and responsive layout. Do not edit generated player attributes or page custom code unless the site owner is prepared to maintain those changes outside the app workflow.

## Related

- [Recoloring an animation](/en/integrations/webflow/04_prepare/recoloring-an-animation)
- [Using themes](/en/integrations/webflow/04_prepare/using-themes)
- [Compatibility and limitations](/en/integrations/webflow/06_reference/compatibility-and-limitations)