Embed Lottie animations on my site
Lottie plays a small designer-made animation, such as a moving icon or an illustrated scene, at a fraction of the weight of a video. Designers hand you a .lottie or .json file and it drops onto the page.
The prompt
“Put our animated tick illustration at the top of the Thank you page and let it loop.”
Signed in, Get my prompt fills in your site for you. Otherwise press Copy and fill in the [bracketed] parts. First time? Connect your AI to bernard once: Use your own AI (opens in a new tab).
Ask your AI
Put our animated tick illustration at the top of the Thank you page and let it loop.
What you need first
A .lottie or .json animation file, either uploaded to the site or hosted on lottie.host.
What bernard checks
Lottie animations is on bernard’s permitted list. Someone read the maker’s own instructions (https://github.com/LottieFiles/dotlottie-web) on 2026-09-14 and decided it was safe to run on a customer’s site: The src pattern is constrained to lottie.host, a lottiefiles.com subdomain or a file uploaded to the site, so the element cannot pull an animation from anywhere on the web. Loaded as a module, which the base tag allowlist permits. Your site loads it from its published package, version 0.3.0 or newer, at a version bernard pins and only ever moves forward.
Your AI writes the exact tag bernard permits, on a private preview. You look at it and approve it before anything goes live.
People search for this as: animation, lottie, animated icon, illustration, motion graphic.
For the full list of libraries, what is waiting, and how to ask for one that is not there, see Embed a calendar, a diagram, a chart or another tool on my site.
Questions people ask
- Do I need to write any code to use Lottie animations?
- No. Your AI writes the exact tag bernard permits and puts it on a preview. You approve it before it goes live, and pasted code is removed for safety every time.
- Is Lottie animations safe on my site?
- bernard admits it only from its own published address, with its settings written as plain data rather than code, at a version bernard pins and only ever moves forward. Nothing else about it can be changed from a page.
- What do I need from Lottie animations first?
- A .lottie or .json animation file, either uploaded to the site or hosted on lottie.host.
- Can I change it later?
- Yes. Say what you want different and your AI redoes it on a preview for you to approve. Nothing about it is baked in.