How to Use Lottie as a Hotspot Pin in Elementor?

Updated onApril 9, 2026By

Key Takeaways

  • The Plus Addons for Elementor includes a Hotspot widget that allows users to integrate Lottie animations as hotspots.
  • Users must obtain a JSON file URL from LottieFiles.com to use a Lottie animation in the Hotspot widget.
  • To set up the Lottie hotspot, users need to select Lottie from the Pin Type dropdown and paste the JSON link in the Lottie URL field.
Table Of Content

Do you want to use a Lottie animation as a hotspot in Elementor? Using Lottie animation as a hotspot can make your hotspots more engaging.

With the Hotspot widget from The Plus Addons for Elementor, you can easily use a Lottie as a hotspot in Elementor.

To check the complete feature overview documentation of The Plus Addons for Elementor Hotspot widget, click here.

Requirement  – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.

For this, you need to have the JSON file URL of the LottieFile you want to use.

First, go to LottieFiles.com and create a free account there if you don’t have one.

Now log into your account and go to Featured here you’ll find all the free Lottie files.

Click on the animation you like, it will open in a popup, click on the Save to workspace to generate button.

It will open the Lottie animation in a new window.

From the right panel enable the Enable Asset Link toggle. 

Then copy the Lottie file URL from the Asset link field. 

Then add the Hotspot widget from The Plus Addons for Elementor on the page and follow the steps –

1. Add the appropriate image in the Hotspot Image section.

2. Then open the repeater item on which you want to use Lottie. Then select Lottie from the Pin Type dropdown.

Hotspot pin type lottie how to use lottie as a hotspot pin in elementor? From the plus addons for elementor

3. Then paste the copied JSON link in the Lottie URL field.

4. Then add the appropriate content for the tooltip from the Pin Content section.  

Now you will see the Lottie animation as a hotspot over the image.

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 10 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressElementorn8nAIClaudeAutomationServer
LinkedIn X GitHub YouTube Website
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What if I can't find the Lottie file URL after enabling the Asset Link?

If you're unable to find the Lottie file URL, ensure that you've enabled the 'Enable Asset Link' toggle in the LottieFiles panel. This step is crucial because it generates the link you need to paste into the Hotspot widget. If the toggle is off, the URL won't appear, preventing you from using the animation in Elementor.

Can I use Lottie animations from other sources as hotspots?

The tutorial specifically mentions using Lottie files from LottieFiles.com. You need to create a free account there to access and generate the JSON file URL required for the Hotspot widget. The Plus Addons for Elementor does not support Lottie files from other sources, so ensure you are using LottieFiles for compatibility.

What settings work best for Lottie animations as hotspots?

When using Lottie animations as hotspots, ensure that the animation is visually engaging and relevant to the content it represents. Selecting a clear and concise tooltip content in the Pin Content section is also important, as it enhances user interaction. The Plus Addons for Elementor allows you to customize these elements for optimal engagement.

Why isn't the Lottie animation showing up on my image?

If the Lottie animation isn't appearing, double-check that you've pasted the correct JSON link in the Lottie URL field. Also, verify that the Hotspot widget is properly configured with the right image in the Hotspot Image section. Any discrepancies in these settings can prevent the animation from displaying.

What steps should I follow to add a Lottie animation as a hotspot?

To add a Lottie animation as a hotspot, start by selecting the Hotspot widget from The Plus Addons for Elementor. Then, upload your image, select Lottie from the Pin Type dropdown, and paste the copied Lottie file URL in the Lottie URL field. Finally, add your tooltip content. This process allows for an interactive and engaging user experience.

Are there any limitations when using Lottie animations as hotspots?

One limitation to consider is that the Hotspot widget, which enables using Lottie animations, is part of The Plus Addons for Elementor. This means you must have this plugin installed and activated to utilize the feature. Without it, you won't have access to the Lottie integration functionality.

Last reviewed: April 9, 2026

Related Docs