# Insert a lottie interaction with plugin custom html

**URL:** <https://forum.lottiefiles.com/t/insert-a-lottie-interaction-with-plugin-custom-html/2250>\
**Category:** Uncategorized\
**Created:** [February 10, 2022, 10:10am UTC](https://forum.lottiefiles.com/t/insert-a-lottie-interaction-with-plugin-custom-html/2250 "2022-02-10T10:10:09Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![maffeaffe](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/maffeaffe/32/331_2.png) [@maffeaffe](https://forum.lottiefiles.com/u/maffeaffe)\
**Post date:** [February 10, 2022, 10:10am UTC](https://forum.lottiefiles.com/t/insert-a-lottie-interaction-with-plugin-custom-html/2250/1 "2022-02-10T10:10:09Z")

</div>

Hi’Im trying to insert a lottie interaction in my joomla site with pagebuilder using custom html.  
In the header I have placed this code:  
`<script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>`

in the custom html plugin in the website I have placed this code:

```auto
<lottie-player id="tenthLottie" src="https://assets7.lottiefiles.com/private_files/lf30_b8o3uprs.json" style="width:400px; height: 400px;">"></lottie-player>

<script>
LottieInteractivity.create({
    player:'#tenthLottie',
    mode:"cursor",
    actions: [
        {
            type: "click",
            forceFlag: false
        }
    ]
});
</script>

```

But it’s not working

---

<div class="post-metadata">

**Author:** ![haris](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/haris/32/2864_2.png) [@haris](https://forum.lottiefiles.com/u/haris)\
**Post date:** [February 15, 2022, 7:29am UTC](https://forum.lottiefiles.com/t/insert-a-lottie-interaction-with-plugin-custom-html/2250/2 "2022-02-15T07:29:32Z")

</div>

You need both LottiePlayer and Interactivity Library to run this. Add the following to your header:

```auto
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>

```

There’s also a syntax issue with your element ("\> is repeated twice). Here’s a fixed version.

```auto
<lottie-player id="tenthLottie" src="https://assets7.lottiefiles.com/private_files/lf30_b8o3uprs.json" style="width:400px; height: 400px;"></lottie-player>

<script>
LottieInteractivity.create({
    player:'#tenthLottie',
    mode:"cursor",
    actions: [
        {
            type: "click",
            forceFlag: false
        }
    ]
});
</script>

```

You should be good to go now. Codepen demo: [https://codepen.io/aliharis/pen/QWOqORR](https://codepen.io/aliharis/pen/QWOqORR)