How can I place a Lottie animation onto the homepage?

Support
1

Hi there !

I’ve designed an animated version of my logo. Have a look here !

I converted it into .json (as a lottiefile animation) and I would like to place that animation in my header.
It should be possible to do it, only by pasting this bunch of code onto my page:

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets3.lottiefiles.com/packages/lf20_KrQ5B2.json"  background="transparent"  speed="1"  style="width: 600px;" autoplay >
</lottie-player>

But when I do it on my Discourse project, it doesn’t work.
I don’t understand why because it’s calling an external resource, so it should be independant of the Discourse’s environnement isn’t it?

I’ve read in other topics that Discourse users weren’t able to use lottie animation instead of category icons.
But in my case, I don’t understand why it’s not working (if I paste the code in my body tag it should be working).

Could anybody help me out with this please? :slight_smile:

2 Likes
2

I’m not sure how to use the animation for your logo, but to get the script to run on your Discourse site, you need to add https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js to your content security policy script src site setting. When I do that, and add the script to my theme’s Header section, the animation displays for me.

4 Likes
3

It’s working fine !
Thank’s for your answer :slight_smile:

1 Like
4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.