# How can I place a Lottie animation onto the homepage?

**URL:** https://meta.discourse.org/t/how-can-i-place-a-lottie-animation-onto-the-homepage/132305
**Category:** Support
**Created:** [October 31, 2019, 9:08am UTC](https://meta.discourse.org/t/how-can-i-place-a-lottie-animation-onto-the-homepage/132305 "2019-10-31T09:08:13Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![epalley](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/epalley/32/137526_2.png) [@epalley](https://meta.discourse.org/u/epalley)
#### Post date: [October 31, 2019, 9:08am UTC](https://meta.discourse.org/t/how-can-i-place-a-lottie-animation-onto-the-homepage/132305/1 "2019-10-31T09:08:14Z")

</div>

Hi there !

I’ve designed an animated version of my logo. Have a look [here](https://lottiefiles.com/share/KrQ5B2) !

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? 🙂

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [October 31, 2019, 5:55pm UTC](https://meta.discourse.org/t/how-can-i-place-a-lottie-animation-onto-the-homepage/132305/2 "2019-10-31T17:55:32Z")

</div>

> [@epalley](#):
>
> 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’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.

---

<div class="post-metadata">

### Author: ![epalley](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/epalley/32/137526_2.png) [@epalley](https://meta.discourse.org/u/epalley)
#### Post date: [November 4, 2019, 9:26am UTC](https://meta.discourse.org/t/how-can-i-place-a-lottie-animation-onto-the-homepage/132305/3 "2019-11-04T09:26:51Z")

</div>

It’s working fine !  
Thank’s for your answer 🙂

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [December 4, 2019, 9:30am UTC](https://meta.discourse.org/t/how-can-i-place-a-lottie-animation-onto-the-homepage/132305/4 "2019-12-04T09:30:39Z")

</div>

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