--- title: "How to Add Lottiefiles to an Elementor Pricing Table Button?" url: https://theplusaddons.com/docs/add-lottiefiles-to-an-elementor-pricing-table-button/ date: 2024-06-20 modified: 2026-09-15 lang: en author: "Aditya Sharma" description: "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..." image: https://theplusaddons.com/wp-content/uploads/2024/06/How-to-Add-Animated-Headings-In-Elementor-7-1024x536.jpg word_count: 715 --- # How to Add Lottiefiles to an Elementor Pricing Table Button? ## - Integrates Lottiefiles into Elementor Pricing Table Button using The Plus Addons for Elementor. - Requires a JSON file URL from LottieFiles.com to implement animated Lottiefiles. - Enables customization of Lottiefiles size and animation through the style tab in the Pricing Table widget. 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](https://theplusaddons.com/docs/add-a-pricing-table-in-elementor/).* ***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.*** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/pricing-table/?utm_source=tpae&utm_medium=docs&utm_campaign=text) ## 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**. ![Icon Type set to Lottie in the Button section of the Pricing Table widget](https://theplusaddons.com/wp-content/uploads/2026/09/pricingtable-button-icon-type.webp) - 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**. ![Lottie URL field filled in with the animation](https://theplusaddons.com/wp-content/uploads/2026/09/pricingtable-lottie-url.webp) ![Style tab Lottie section with Width, Height, Speed and the loop and hover switches](https://theplusaddons.com/wp-content/uploads/2026/09/pricingtable-lottie-style.webp) ## The Result The animation plays inside the button on the live page: ![Animated demo: a pricing card button with a Lottie animation playing next to the text](https://theplusaddons.com/wp-content/uploads/2024/06/pricing-table-lottie-demo.gif) ## 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 `.json` file 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. ## Related Docs - [Pricing Table widget settings overview](https://theplusaddons.com/docs/add-a-pricing-table-in-elementor/)- [Add a tooltip to a pricing table](https://theplusaddons.com/docs/add-a-tooltip-to-an-elementor-pricing-table/)- [Add a ribbon to a pricing table](https://theplusaddons.com/docs/add-a-ribbon-to-an-elementor-pricing-table/)