Get started  

Help Center

Community / Forum Ask Zappter Support We build your app Marketplace





Mastering the content editor Pixel perfect design Setup your E-Commerce Store Configure your booking engine Event-System / Drop-In


App Store Submission Creating Push Notifications Typography Changing template Changing Rules

Business Modules


More Tutorials


Adding Lottie Animation

Adding Lottie animation

The below steps guide you through integrating a Lottie animation into your content.
1. Admin > Customize > Content. Click to edit your app.
2. In the app customization, expand the group, Media under Content. Click on the 'Lottie Animation.'
image.png 491.18 KB
3. The Lottie animation setup screen comes up.
image.png 342.21 KB
  • Lottie Type: Provide a URL link for the Lottie file or upload your own Lottie .JSON file: 
                  1. Link: When selected, you are able to copy/paste the Lottie animation URL in the text field.
                  2. JSON file: When selected, you're able to browse your computer to upload a Lottie .JSON file.
image.png 361.8 KB
When Lottie Type is Link: 
Provide a URL link to a Lottie animation: 
image.png 347.93 KB
You can get registered at and either download or get an animation URL.
Note: External source is subject to change. 
When Lottie Type is JSON:
Upload a Lottie file from your own: 
image.png 368.32 KB
4. At this point, click on the 'Create' and complete adding Lottie animation to your content with default animation settings. Or, move on to the next step to set up your animation behavior.
5. Set up animation behavior as described under 'Additional tasks.'
6. 'Put online' to publish your Lottie animation so that it will appear on your users' devices. The button's caption changes from 'Put online' to 'Published'  once the changes have been applied successfully.
Additional tasks
You can do more with Lottie animation by click on the 'More options' button when creating or editing a Lottie animation. More options > Settings:
image.png 475.87 KB
  • Play mode: Normal & Bounce are choices
  • Animation speed:  Set your preferred animation speed
  • Controls: Enable/disable the display of play controls
  • Autoplay: Enable/disable autoplay of the animation when app loads
  • Background color: Set a background color
  • Loop: Enable/disable animation play looping 
When all set, click on the 'Create' or 'Save' to complete.

Sample on mobile devices

image.png 281.03 KB
Lottie JS