# Using Interactive Lotties

## Interactive Lottie player support

At the moment, we consider Lottielab Interactivity **a beta feature**. The only Lottie player that implements full support for Interactive Lotties is [Lottielab's Lottie player](https://www.npmjs.com/package/@lottielab/lottie-player/v/next).

This player exposes a generic Web component, as well as a React one. **It works only on the Web, so it has no native mobile support presently.**

An Interactive Lottie is still backwards compatible with all other players. However, when played using another player, it will play back as a normal animation, without any interactivity.

Livelink embeds (**Embed Link** tab in the **Export panel**) use Lottielab's player by default, which means they fully support all of Lottielab Interactivity out of the box. In a lot of cases, this is the perfect way to embed your interactive animation on your website.

The Lottielab player allows you to **deeply integrate and control** Interactive Lotties from your own code, if you wish to do so. [More details below.](#deeper-integration-of-interactive-lotties)

## Export instructions

When clicking the *Export* button at the top right of Lottielab, you will get a tailored experience in case you have created an Interactive Lottie.

<figure><img src="/files/So3ycE9sjabVx1NhRW7H" alt=""><figcaption><p>The export panel for Interactive Lotties</p></figcaption></figure>

To ensure the easiest experience, simply choose your platform in the list at the bottom to get specific

&#x20;instructions using your platform of choice. If you cannot find your platform, try clicking on *See More.* If it's still not there, you can try using the generic HTML or JavaScript instructions, or using the *iFrame code* or *Embed link* for an HTML embed.

These instructions will guide you towards using either the embed link or using Lottielab's own player and the JSON link.

If you want tighter control over the Lottie, you can download it and, for example, version it in your git repository. The downloaded Lottie still retains all of the interactivity information and will play as intended when using Lottielab's player. See [technical details](#technical-details) below.

## Player docs and examples (Web/React)

Lottielab's player is well documented. See one of the resources below:

* [Readme, including docs for the Web and React components](https://github.com/lottielab/lottie-player/blob/master/README.md)
* [Interactivity docs, including hooking up custom events and variables, and how interactivity works](https://github.com/lottielab/lottie-player/blob/master/INTERACTIVITY.md)
* [Interactivity examples, including how to turn an Interactive Lottie into a React component](https://github.com/lottielab/lottie-player/tree/master/playground/interactive/examples)

### Deeper integration of Interactive Lotties

The player allows you to dynamically inspect and change the state of an Interactive Lottie from code, as well as make it respond to your app's custom events and variables.

This is a powerful feature that allows you to go one step further―instead of Interactive Lotties being just animations with a little extra flavor, they can **become fully-featured components of your web apps and UIs**.&#x20;

Since Lottielab Interactivity combines so well with [Livelink](/export-and-hand-off/livelink-cdn.md), their combination even allows you to decouple the lifecycle and delivery of non-mission-critical, marketing-oriented parts of the UI from the development lifecycle.

The interactivity examples and docs linked above provide more details.

## Technical details

An Interactive Lottie contains a special piece of JSON, called the *Interactivity Definition*, inside one if its metadata fields:

<figure><img src="/files/VaM7j2OyWcAlIx9a1DBc" alt=""><figcaption><p>Inside an Interactive Lottie JSON contents</p></figcaption></figure>

This field is ignored by all non-conforming players, so they will play the Lottie as a normal animation.

Lottielab's player knows how to read this field. Upon encountering it, it will change the mode of the Lottie to interactive and set up all of the necessary events to make sure the Lottie responds as designed.

You can introspect and change the interactive state by using the `.interactivity` field of the Lottie player. See above for player docs.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.lottielab.com/editor/interactivity/using-interactive-lotties.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.