A small looping animation on the call-to-action draws the eye to the one thing you want clicked, and a Lottie file does it in a few kilobytes of JSON rather than a video.
The Pricing Table widget from The Plus Addons for Elementor can use a Lottie animation in place of the button icon.
To check the complete feature overview documentation of The Plus Addons for Elementor Pricing Table widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro for this feature — the Lottie icon type is only in The Plus Addons for Elementor Pro. The Pricing Table widget itself is in the free plugin, so the rest of the card still works without Pro.
- Widget to enable: Pricing Table, switched on under The Plus Addons > Widgets.
- One widget is one plan: the widget renders a single pricing card. For a three-column pricing section, put three Pricing Table widgets side by side in one container.
- Button Style must be Style 2. The icon controls, Lottie included, only appear for button Style 2 — which is the default.
- You need a JSON URL for the animation, not a downloaded file.
Get the Lottie JSON URL
- Sign in at LottieFiles and open the free animation you want.
- Save it to your workspace so it opens in the editor.
- In the right-hand panel open the Handoff tab and switch Enable asset CDN on.
- Set Asset link format to Lottie JSON.
- Copy the URL from the Asset link field.
Put It on the Button
- Select the Pricing Table widget and open the Button section.
- Leave Button switched on and Style on Style 2.
- Set Icon Type to Lottie.
- Paste the JSON link into Lottie URL.
- Use Icon Position to put the animation before or after the button text.
- Size and time it under Style > Lottie.
The Result
The animation plays inside the button on the live page:
How It Behaves
- The animation is rendered as a Lottie player inside the button link, 25×25 pixels by default with a small gap between it and the text.
- It loops and starts on its own as soon as the page loads.
- The player script is only loaded on pages that actually use a Lottie icon.
- Style > Lottie only appears in the panel once Icon Type is Lottie, and it holds Width, Height, Speed, the two margins, Vertical Align, Loop Animation and Hover Animation. Everything except the two switches is per device.
- Switching Icon Type back to Icon restores the Font Awesome icon; the URL you pasted is kept.
Limitations
- Icon Type and Lottie URL are Pro controls. In the free plugin they are not in the panel and the button keeps its normal icon.
- Only button Style 2 has icon controls, so a Lottie animation cannot be added to button Style 1 or Style 3.
- The animation is loaded from whatever URL you paste. If that host is slow, blocked or taken down, the button simply has no icon — there is no fallback.
- You cannot upload a
.jsonfile to the Media Library and pick it here; the field takes a URL. - There is no colour control. A Lottie file carries its own colours, so recolouring means editing the file in LottieFiles first.
- Only one animation per button, and the button is one per card.
Troubleshooting
I cannot find the Icon Type dropdown
It only appears for button Style 2, and it is a Pro control. Check Style under Button, and that the Pro plugin is active.
The button shows no icon at all
Open the Lottie URL in a browser tab. It should return JSON. A share page, a preview link or an expired CDN link will not play.
The animation is far too big or too small
Set Width and Height under Style > Lottie. The default is 25×25 pixels.
It plays once and stops
Switch Loop Animation on under Style > Lottie, or check whether the file itself is a one-shot animation.
The animation sits too close to the text
Use Margin Left and Margin Right under Style > Lottie, and Vertical Align to line it up with the button text.
