Categories
active arrowAccount
active arrowGetting Started
active arrowCampaign Builder
active arrowAdvanced Design Customization
active arrowEmail Campaign Customization
active arrowSegment & Targeting
active arrowAnalytics
active arrowShopify
active arrowEmail Marketing and CRM Integrations
active arrowHow to Share Your Popup Form and Submission with a Link
active arrowHow to Create a Custom Popup with a Blank Popup Template?
active arrowHow to Create a Full Screen, Lightbox, and Floating Bar Popup
active arrowHow to Create Well-Designed Campaigns with Themes?
active arrowHow to Use Column & Row Structures Efficiently in a Popup?
active arrowDiscover the Customize Step of Popupsmart
active arrowHow to Adjust Popup Style
active arrowHow to Create a Multi-step Popup?
active arrowWhat is a Success Popup? How Does it Work?
active arrowWhich Elements Can I Add to My Popup?
active arrowHow to Add Fonts on Popupsmart
active arrowHow to Prefill Form Fields
active arrowHow to Add Hidden Inputs to Your Popup Campaigns?
active arrowHow to Add New Elements & Use Drag and Drop Editor
active arrowHow to Add New Form Fields to My Popup
active arrowHow to Add a Privacy Policy on Popupsmart?
active arrowHow to Add a Coupon Code to Your Popup
active arrowHow to Activate the Countdown Timer
active arrowHow to Add an Animation to a Popup?
active arrowHow to Create a Video Popup on Popupsmart
active arrowHow to Add Lottery Ball Gamification on The Popup?
active arrowHow Debug Mode Works
active arrowHow Preview Mode Works
active arrowDesktop & Mobile Views Working Method
active arrowHow to Use Smart Tags - Dynamic Text Replacement
active arrowWhat Is Teaser? How Teaser Works
active arrowHow to Set Up Autoresponder Email Notifications
active arrowHow to Set up Self-Email Notifications
active arrowHow to Create an A/B Testing for a Popup Campaign
active arrowHow to Call JavaScript Function with a Button Using Popupsmart

How to Add an Animation to a Popup?

If you want your popups to be dynamic, scalable, portable, and intuitive, adding a Lottie may create the difference you want to see.

Popupsmart can also provide this service since we want you to have unique popups for your website and visitors.

Add some Lottie to your popup and make your popups more interactive.

Let’s add some Lottie to our popups!

1. After signing into your Popupsmart account, create a campaign on your dashboard by clicking “New Campaign”.

create a new campaign

2. You can choose a blank popup or a ready-made template to customize among different types of popups.

We’re moving forward with a ready-made template to show how you can add a Lottie smoothly.

3. Lottie works in your popups, just like an image. First, if you have any image on your popup, you need to delete it.

deleting image from a popup

4. Then, click “Add a new element”, choose Lottie among the components, and click on it. You can carry it into the row or column you want using the drag-and-drop editor.

adding lottie element to a popup

5. To add a new Lottie, drag and drop your Lottie or choose from the files.

adding lottie file

🔔 Tip: While adding a Lottie, don’t forget to toggle on Autoplay and Loop.

toggle on autoplay loop

❗️Important: Don’t forget to save the changes to your popup.

6. It is also possible to add a Lottie as the background.

For this, you need to go to the “Style” and “Body Style.” Then, toggle on Lottie Animation, and choose your Lottie from the files or drag and drop it.

adding lottie to a background

7. You can view this popup's mobile version easily by disabling it and enabling it again.

seeing mobile view of lottie popup

That’s how you can add Lottie animation to your popups easily!

If you have further questions, please feel free to contact us!