# Upload lotties code to Evolve

**URL:** <https://community.evolveauthoring.com/t/upload-lotties-code-to-evolve/3121>\
**Category:** General Help\
**Tags:** component\
**Created:** [August 27, 2024, 10:45am UTC](https://community.evolveauthoring.com/t/upload-lotties-code-to-evolve/3121 "2024-08-27T10:45:38Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![Shoval\_Shirom](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.evolveauthoring.com/shoval_shirom/32/1499_2.png) [@Shoval\_Shirom](https://community.evolveauthoring.com/u/Shoval_Shirom)\
**Post date:** [August 27, 2024, 10:45am UTC](https://community.evolveauthoring.com/t/upload-lotties-code-to-evolve/3121/1 "2024-08-27T10:45:38Z")

</div>

Hey,

We have started to use lotties to create gifts.

Is there any component in Evolve that supports the following HTML code?

Thank you,  
Shoval

---

<div class="post-metadata">

**Author:** ![hbailey](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.evolveauthoring.com/hbailey/32/603_2.png) [@hbailey](https://community.evolveauthoring.com/u/hbailey)\
**Post date:** [August 27, 2024, 11:24am UTC](https://community.evolveauthoring.com/t/upload-lotties-code-to-evolve/3121/2 "2024-08-27T11:24:23Z")

</div>

Yes - the iFrame component can be used to embed the files from Lottie.

---

<div class="post-metadata">

**Author:** ![Shoval\_Shirom](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.evolveauthoring.com/shoval_shirom/32/1499_2.png) [@Shoval\_Shirom](https://community.evolveauthoring.com/u/Shoval_Shirom)\
**Post date:** [August 27, 2024, 12:54pm UTC](https://community.evolveauthoring.com/t/upload-lotties-code-to-evolve/3121/3 "2024-08-27T12:54:03Z")

</div>

Hey,

It doest let me an option:

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/evolveauthoring/original/2X/c/c152a8ebe6e1e155bb595571c720f36ebdf7e959.png)  
Do you know why?

---

<div class="post-metadata">

**Author:** ![Sam\_Cook\_Evolve\_LQA](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.evolveauthoring.com/sam_cook_evolve_lqa/32/902_2.png) [@Sam\_Cook\_Evolve\_LQA](https://community.evolveauthoring.com/u/Sam_Cook_Evolve_LQA)\
**Post date:** [August 27, 2024, 1:17pm UTC](https://community.evolveauthoring.com/t/upload-lotties-code-to-evolve/3121/4 "2024-08-27T13:17:53Z")

</div>

Hi @Shoval_Shirom , have you tried change ‘script’ to ‘iframe’ in the source code field (at the start and the end)?  
Cheers-Sam

---

<div class="post-metadata">

**Author:** ![Shoval\_Shirom](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.evolveauthoring.com/shoval_shirom/32/1499_2.png) [@Shoval\_Shirom](https://community.evolveauthoring.com/u/Shoval_Shirom)\
**Post date:** [August 27, 2024, 2:50pm UTC](https://community.evolveauthoring.com/t/upload-lotties-code-to-evolve/3121/5 "2024-08-27T14:50:48Z")

</div>

I have asked my team for a different code and then it worked thank you!

Do you think that we can implement this to items in the accordion component?  
Or it gets only files?

Thank you so much for your help!

---

<div class="post-metadata">

**Author:** ![Sam\_Cook\_Evolve\_LQA](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.evolveauthoring.com/sam_cook_evolve_lqa/32/902_2.png) [@Sam\_Cook\_Evolve\_LQA](https://community.evolveauthoring.com/u/Sam_Cook_Evolve_LQA)\
**Post date:** [August 27, 2024, 2:53pm UTC](https://community.evolveauthoring.com/t/upload-lotties-code-to-evolve/3121/6 "2024-08-27T14:53:44Z")

</div>

Hi @Shoval_Shirom , the iframe component is the only component that allows you embed external content like this, so it wouldn’t be possible in an accordion.  
Cheers-Sam

---

<div class="post-metadata">

**Author:** ![Shoval\_Shirom](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.evolveauthoring.com/shoval_shirom/32/1499_2.png) [@Shoval\_Shirom](https://community.evolveauthoring.com/u/Shoval_Shirom)\
**Post date:** [August 27, 2024, 3:10pm UTC](https://community.evolveauthoring.com/t/upload-lotties-code-to-evolve/3121/7 "2024-08-27T15:10:02Z")

</div>

I understand, Thank you so much for your help!

Shoval.

---

<div class="post-metadata">

**Author:** ![BarryBPS](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.evolveauthoring.com/barrybps/32/540_2.png) [@BarryBPS](https://community.evolveauthoring.com/u/BarryBPS)\
**Post date:** [August 28, 2024, 6:12am UTC](https://community.evolveauthoring.com/t/upload-lotties-code-to-evolve/3121/8 "2024-08-28T06:12:09Z")

</div>

I’d like to see full Lottie integration into more components too, please 🙂

---

<div class="post-metadata">

**Author:** ![Shoval\_Shirom](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.evolveauthoring.com/shoval_shirom/32/1499_2.png) [@Shoval\_Shirom](https://community.evolveauthoring.com/u/Shoval_Shirom)\
**Post date:** [August 28, 2024, 6:18am UTC](https://community.evolveauthoring.com/t/upload-lotties-code-to-evolve/3121/9 "2024-08-28T06:18:02Z")

</div>

Hey Barry,

How do you upload gifs to Evolve today?

---

<div class="post-metadata">

**Author:** ![BarryBPS](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.evolveauthoring.com/barrybps/32/540_2.png) [@BarryBPS](https://community.evolveauthoring.com/u/BarryBPS)\
**Post date:** [August 28, 2024, 6:35am UTC](https://community.evolveauthoring.com/t/upload-lotties-code-to-evolve/3121/10 "2024-08-28T06:35:13Z")

</div>

Hey Shoval, it’s been a while since I’ve done so, but I’ve just checked and we used the Gif component.

---

<div class="post-metadata">

**Author:** ![Shoval\_Shirom](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.evolveauthoring.com/shoval_shirom/32/1499_2.png) [@Shoval\_Shirom](https://community.evolveauthoring.com/u/Shoval_Shirom)\
**Post date:** [August 28, 2024, 6:55am UTC](https://community.evolveauthoring.com/t/upload-lotties-code-to-evolve/3121/11 "2024-08-28T06:55:20Z")

</div>

Hey, good to know  
Thanks for sharing!

Shoval.

---

<div class="post-metadata">

**Author:** ![BarryBPS](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.evolveauthoring.com/barrybps/32/540_2.png) [@BarryBPS](https://community.evolveauthoring.com/u/BarryBPS)\
**Post date:** [August 28, 2024, 8:56am UTC](https://community.evolveauthoring.com/t/upload-lotties-code-to-evolve/3121/12 "2024-08-28T08:56:14Z")

</div>

HI Shoval, I’ve checked again and you can Gifs to components, such as an Accordian, but you have less control over it.

---

<div class="post-metadata">

**Author:** ![Shoval\_Shirom](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.evolveauthoring.com/shoval_shirom/32/1499_2.png) [@Shoval\_Shirom](https://community.evolveauthoring.com/u/Shoval_Shirom)\
**Post date:** [August 28, 2024, 11:03am UTC](https://community.evolveauthoring.com/t/upload-lotties-code-to-evolve/3121/13 "2024-08-28T11:03:34Z")

</div>

Ha sorry I am confused …  
I mean how do you upload lotties today to Evolve?

---

<div class="post-metadata">

**Author:** ![BarryBPS](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.evolveauthoring.com/barrybps/32/540_2.png) [@BarryBPS](https://community.evolveauthoring.com/u/BarryBPS)\
**Post date:** [August 29, 2024, 12:17pm UTC](https://community.evolveauthoring.com/t/upload-lotties-code-to-evolve/3121/14 "2024-08-29T12:17:18Z")

</div>

Hi Shoval, you’ll need to use an iFrame component. I’ve just tested it again and this is how you can do it.

1. Go to your Lottie animation and copy the web embed code. It should look lilke this:

```auto
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://lottie.host/7546a4c1-071a-4925-977a-d8c5f104f407/Qc1NfeCZWX.json" background="#FFFFFF" speed="1" style="width: 300px; height: 300px" loop controls autoplay direction="1" mode="normal"></lottie-player>

```

1. Add this code into a basic HTML file like so:

```auto
<!DOCTYPE html>
<html>
<body>

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://lottie.host/7546a4c1-071a-4925-977a-d8c5f104f407/Qc1NfeCZWX.json" background="#FFFFFF" speed="1" style="width: 300px; height: 300px" loop controls autoplay direction="1" mode="normal"></lottie-player>

</body>
</html>

```

1. The HTML filename needs to be index.html

2. Zip up the index.html file into a zip file.

3. In your Evolve iFrame, select the ‘Use Embedded Content’ setting

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/evolveauthoring/original/2X/1/1457f96cbdf391d3b1898148257f741d7cae59d2.png)

and drag the zip into here

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/evolveauthoring/original/2X/0/0a1fa58d51ef4eedb4587064a53bf11bb875a8b7.png)

1. Your Lottie file should then display in the course:

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/evolveauthoring/original/2X/e/e8caac0eddcfd3a60fa8b08d4f15a990f6be3c65.png)

---

<div class="post-metadata">

**Author:** ![Shoval\_Shirom](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.evolveauthoring.com/shoval_shirom/32/1499_2.png) [@Shoval\_Shirom](https://community.evolveauthoring.com/u/Shoval_Shirom)\
**Post date:** [August 29, 2024, 4:52pm UTC](https://community.evolveauthoring.com/t/upload-lotties-code-to-evolve/3121/15 "2024-08-29T16:52:58Z")

</div>

Yeah it worked for me as an Iframe as Sam said.  
Just like you said, we would like to see full Lottie integration into more components too.

Thank you,  
Shoval

---

<div class="post-metadata">

**Author:** ![BarryBPS](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.evolveauthoring.com/barrybps/32/540_2.png) [@BarryBPS](https://community.evolveauthoring.com/u/BarryBPS)\
**Post date:** [August 30, 2024, 6:56am UTC](https://community.evolveauthoring.com/t/upload-lotties-code-to-evolve/3121/16 "2024-08-30T06:56:00Z")

</div>

I realsed after I’d posted that you’d said that you had already got it to work! 😆

But someone else my find the process useful.

I do often wonder if how I do things is the only way of doing them, or if there are better ways. So feel free to let me know otherwise.

Cheers 🙂