---
title: "How to Use LottieFiles Animation with the Animated Service Box in Elementor?"
url: https://theplusaddons.com/docs/lottiefiles-animation-with-the-animated-service-box-in-elementor/
date: 2024-05-29
modified: 2026-04-09
lang: en
author: "Aditya Sharma"
description: "Do you want to use the LottieFiles animation in the Animated Service Box widget? LottieFiles are very lightweight files that allow you to easily add complex animations to your website...."
image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Use-Lottie-Animation-with-the-Animated-Service-Box-in-Elementor_-1024x536.jpg
word_count: 346
---

# How to Use LottieFiles Animation with the Animated Service Box in Elementor?

## 

- Integrates LottieFiles animations with the Animated Service Boxes widget from The Plus Addons for Elementor.
- Requires a JSON file URL from LottieFiles.com to implement animations in the widget.
- Enables customization and styling of Lottie animations through the Style tab in Elementor.

Do you want to use the LottieFiles animation in the Animated Service Box widget? LottieFiles are very lightweight files that allow you to easily add complex animations to your website.

By using LottiesFiles animation with the Animated Service Boxes widget from The Plus Addons for Elementor you can create unique and engaging designs.

*To check the complete feature overview documentation of The Plus Addons for Elementor Animated Service Boxes widget, [click here](https://theplusaddons.com/docs//animated-service-boxes-widget-settings-overview/).*

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.***

For this, you need to have the JSON file URL of the LottieFile you want to use.

First, go to[ LottieFiles.com](https://lottiefiles.com/) and create a free account there if you don’t have one.

Now log into your account and go to[ Featured](https://lottiefiles.com/featured) here you’ll find all the free Lottie files.

Click on the animation you like, it will open in a popup, click on the **Save to workspace to generate** button.

It will open the Lottie animation in a new window.

From the right panel enable the **Enable Asset Link** toggle. 

Then copy the Lottie file URL from the **Asset link** field. 

Then, add the Animated Service Boxes widget to a page and follow the steps -

1. Select **Info Banner**, **Hover Section** or **Services Element** from the **Main Style** dropdown.

Let’s select the Services Element here.

2. After selecting the appropriate style enable the **Image/Icon** toggle.

3. In the **Animated Service Boxes** section, you have to add the content. By default, you’ll find three items, open one item.

4. You can add a title in the **Title** field. 

5. Then select **Lottie** from the Select Icon dropdown.

![](https://theplusaddons.com/wp-content/uploads/2024/05/animated-service-boxes-lottie.gif)

6. After that paste the copied JSON link in the **Lottie URL** field.

Then add the necessary information in the remaining fields as per your requirement.

Following this process you can add Lottie files to the other items.

You can style and control the Lottie animation from the Style tab.

Now you’ll see beautiful Lottie animation on your selected Animated Service Box style.

![](https://theplusaddons.com/wp-content/uploads/2024/05/animated-service-boxes-lottie-demo.gif)