Customising embed links

The Lottie Embed Link supports several URL (query) parameters which can be used to control how the Lottie will be played when you embed or otherwise use this link.

Supported URL parameters

  • background: Possible values are transparent (no background, default), original (background set in Lottielab document properties ), or a hexadecimale color value without the leading `#`. For example, ff0000 would be red.

  • loop: Possible values are true (loop the animation, default), false (play the animation only once without looping), or any positive number (e.g. 2), which means to loop the animation that many times before stopping.

  • speed: Adjusts playback speed. Possible value is any positive number. For example, 0.5 will play the animation twice as slowly.

  • width and height: Adjusts the animation's width and height. Possible values are a numerical pixel value (e.g. 200), or original (uses the original respective dimension of the Lottie).

Examples

https://cdn.lottielab.com/l/EFurnxiztpDwSV.html?background=00ff00
https://cdn.lottielab.com/l/EFurnxiztpDwSV.html?loop=false&width=200&height=400
https://cdn.lottielab.com/l/EFurnxiztpDwSV.html?loop=3&speed=0.5
<iframe
     src="https://cdn.lottielab.com/l/EFurnxiztpDwSV.html?background=original"
     width="456"
     height="204"
     frameborder="0">
</iframe>

How-to

The list above refers to URL (query) parameters supported by the Embed link provided by Lottielab.

To get your Lottie's embed link, open it, and then click the Export button in the top right. If necessary, click Embed Link in the newly opened export panel. Your embed link ends with .html.

This document also applies to the iFrame code, since it also uses the embed link. To customise the iFrame code, simply apply the customisations to the link inside the code snippet, which you will identify by its .html ending.

If you're using a JSON URL, your Lottie player or Lottie integration will typically offer these controls instead.

URL (query) parameters

The list at the top explains URL (query) parameters that you can add to your embed link to customise how the Lottie is played back and displayed.

URL (query) parameters are added to a link by appending a single question mark (?), and then adding parameter-value pairs with an equals sign (parameter=value) and delimited by ampersands (&).

For example, if we have a link:

https://cdn.lottielab.com/l/EFurnxiztpDwSV.html

And want to add the following parameters to it:

  • loop with value 4

  • background with value original

The link will look like this:

https://cdn.lottielab.com/l/EFurnxiztpDwSV.html

Last updated