Upload lotties code to Evolve

General Help
1

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

2

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

3

Hey,

It doest let me an option:

image
image1936×798 75.3 KB

Do you know why?

4

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

5

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!

2 Likes
6

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

7

I understand, Thank you so much for your help!

Shoval.

8

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

3 Likes
9

Hey Barry,

How do you upload gifs to Evolve today?

10

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

11

Hey, good to know
Thanks for sharing!

Shoval.

12

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

13

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

14

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:
<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:
<!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
image1040×534 24.2 KB

and drag the zip into here

image
image1276×803 18.5 KB

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

image
image1222×593 22.6 KB

2 Likes
15

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

1 Like
16

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

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 :slight_smile: