How to embed a lottie animation in wordpress and Elementor with code snippet

This method works without any plugin, by adding the snippet in an HTML block in Gutenberg or Elementor you can embed the lottie.

If you have a lottie link (basically where lottie.com hosts the json file) (ex. https://lottie.host/6f4ee854-3625-4849-8985-e423a0752949/hZWZsrb0zk.json) You can simply add it in the snippet bellow, set the size (if you want) and that’s it!

Now, if you want you can even host the json file yourself by uploading it in your website’s media so you wont need to store the lottie on your lottie Dashboard. This way you can use unlimited lotties with the free lottie account.
Follow these steps:

  • find the lottie you like, add it in your Lottie Dashboard in order to be able to download the .json file
  • After downloading you can delete it from the dashboard (this way you get unlimited downloads)
  • Now you need to upload the .json file on your wordpress site’s media
  • If you get this error: Sorry, you are not allowed to upload this file type. Add this snippet in your functions.php to allow .json files upload in the media
  • Finally replace the link in the snippet bellow with the link you get from the media, set the sizes (not required)
  • And put the snippet in an HTML element in your website. It doesnt matter if you use a Gutenberg block, Elementor or any other page editor.
    

Leave a Reply