Lottie json files

[DesignMunky]

Hi,

I’ve been looking at the new Lottie element just released - looks awesome. Just a query on something in the help docs:

Regarding loading the lottie json, they mention, “A URL will load independently from the page meaning your page size will be smaller on load”.

I have the json code for some Lottie animations I’ve got from Envato Elements. If I wanted to load them separately and enter them as URLs, where on a site would I typically do this?

Thanks,
Darren.

[ruenel]

Hello Darren,

Thanks for writing in! To load your Lottie animations separately and enter them as URLs, you will have to insert 1 Lottie element for each URL you have.

Best Regards.

[DesignMunky]

Hi Ruenel,

You misunderstand my question. Rather than inserting json code into the lottie element, if I wanted to create a URL myself using that json code, how / where do I do that on the site?

Thanks,
Darren.

[tristup]

Hi Darren,

You can upload the JSON file to your website and add that URL to the Lottie element, as shown in the given screenshot. The example URL is from Lootie animation itself.

https://lottie.host/46b24b39-3cd1-42a4-9a6f-2e97122fc30b/oqyYEQeYOQ.json

Hope it helps.
Thanks

[DesignMunky]

Hi Tristup,

Yes I understand that I need to upload the json file to my website, but where do I upload it? Do I create a folder in WP-Content? And how do I get the URL for the uploaded file?

THanks,
Darren.

[tristup]

Hi Darren,

You can upload the JSON file to your WordPress media library and use the File URL as the URL in the Lottie element.

Please remember that WordPress does not allow JSON files to be uploaded, you may need to add some code to allow them. I would suggest you please go through the following article, which may help you with this.

3 Ways Of Uploading JSON Files To WordPress - WPenroll

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes, which means we can’t fix it in case it conflict with something on your site, nor will we enhance it. Further customization should be directed to a third-party developer or you can avail of One, where we answer the questions beyond normal theme support.

Thanks

[DesignMunky]

Hi Tristup,

Just wanted to say thank you for taking the time to send this reply & Resource. Understood regarding the limits of support with regards to this custom code.

Thanks again,
Darren.

[ruenel]

You are most welcome.