Handoff & Embed
The Handoff button </> on the top bar provides developer handoff and embed options for deploying your Lottie animation to websites, apps, and more.
Toggle on Enable Asset CDN to make your animation available for implementation.
Asset Configuration
In this section, you can:
- Get your asset link - Direct URL to your Lottie file
- Choose format - Select JSON or dotLottie format (standard and optimised)
- Select version - Pick which version of your asset to use
- oEmbed URL & iFrame code - Copy the oEmbed URL or iFrame code directly and simply paste it into your website or app.
Integration Guide
Click Handoff instructions to open the Developer handoff panel, where you’ll find everything you need to implement the animation in your project.
Under Configure your setup, choose:
- Asset format – dotLottie or Lottie JSON
- Target platform – Web, iOS, Android, React Native or Flutter
- Framework (Web) – React, Vue, Web Component or Svelte
- Player – dotLottie Player or Lottie Web (SVG)
The Implementation steps update based on your selections, with ready-to-copy code for each step. You can also click Copy AI prompt to get a prompt you can paste into your AI coding assistant.
💡 Using plain HTML? If you’d rather not install a package through a package manager, select Web Component as your framework, then switch Step 1 from CLI to CDN. This gives you a script tag you can paste straight into your HTML.
CDN Usage & Limits
Asset CDN usage is based on bandwidth traffic with the following allocations:
| Plan | Monthly CDN Allowance | Add-on Available |
|---|---|---|
| Starter | 100 MB | No |
| Individual | 10 GB | Yes |
| Team | 50 GB | Yes |
| Enterprise | Custom allocation | Custom allocation |
Monitoring Your Usage
To check your CDN usage:
- Go to Workspace Settings
- Navigate to Asset Link Usage
⚠️ Important: If you exceed your CDN quota, your assets will be disabled until you upgrade your plan or add more bandwidth.