Insert a lottie interaction with plugin custom html

1

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:

<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

2

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

<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.

<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