> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.blab.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Widgets: Lottie Animation

# Widget Categories: Media

Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as JSON with Bodymovin and renders them on mobile and the web.

Browse for animation through [LottieFiles](https://lottiefiles.com/recent-free-animations), or create your own animation in After Effects, exported with the [Bodymovin](https://exchange.adobe.com/apps/cc/12557) plugin.

For information on adding widgets, see [Add Widgets](https://help.booklikeaboss.com/en/articles/10353857-widgets-library-and-overview#h_45d573b76d).

**Tip**

Fore more information on widgets and the widgets library, see [Widgets: Library and Overview](https://intercom.help/book-like-a-boss/en/articles/10353857-widgets-library-and-overview).

# Content Editor

To access the content editor, right click the widget and select **Edit Content**. Or, if you are in flex mode or Editor 2.0, the option to access the content editor is available in the floating menu.

1. Paste the Lottie Animation URL in the box provided.

* To locate the URL for the animation, open the animation in LottieFiles, and click **<html>**. Alternatively, you can paste the URL of any JSON file hosted outside of LottieFiles.
2. Select **Loop Animation** to continuously play the animation or select **Animate on click**.
3. *(Optional)* To add a link to the animation, click **Link**, and select the link type. For more information on the link picker, see [Link Picker](https://intercom.help/book-like-a-boss/en/articles/10353961-link-picker).

**Note**

**If you use a free LottieFile animation**:

You must include the credential information of the animation creator. The animation creator information is located at the bottom of the animation pop up. For more information, see the [LottieFile creative common license information](https://lottiefiles.com/page/license).

# Design Editor

To access the design editor, right-click the element, and click **Edit Design**. Or if you are in flex mode or Editor 2.0, select **Edit Design** from the floating menu to open the design panel.

To resize the widget, move the width and height sliders. To maintain the proportions between the width and height, select **Keep proportion**.

For information about design options that are not specific to this widget (for example, layout, style, or spacing), see [Widget Design](https://help.booklikeaboss.com/en/articles/10353857-widgets-library-and-overview#h_bd5957206f).