Livelink (CDN)

What is Livelink?

A Livelink is a publicly accessible link that points to one of your Lotties in Lottielab.

With the help of Livelink, you can embed and display your Lottie across a variety of platforms: from website builders to mobile applications, and everything in between. Here's an example of a Livelink:

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

If you click it, you'll notice that it might look familiar. That's right—the animation at the top of this article was put there using Livelink itself!

Livelink comes in two different flavors: as a direct link to a Lottie JSON, and as a standalone webpage that you can embed. Depending on your target platform, you'll use one or the other. (The example above was a standalone webpage link.)

What can it do?

At this point, you might be wondering what the big deal is. After all, you can simply download a Lottie JSON and follow a video tutorial to display this Lottie across many platforms. And you're right! Lottie is an ubiquitous, open format, and so resources on playing, embedding, and using a Lottie JSON are easily available.

But Livelink gives you several other goodies that you don't get by working with JSON files directly.

1. Single-click version updates. When working directly with a JSON file, if you decide to make a change to the animation, you have to do everything again: download the file, upload it to your platform, publish your changes. If you used your animation in several different places, you have to go through the whole effort multiple times. With Livelink, this is reduced to a single click. Open your animation in Lottielab, make your change, and click Publish version to links. Your animation instantly updates everywhere where you've used the link.

2. The best Lottie optimisation tech in existence. Underpinned by state-of-the-art compression and advanced Lottie optimisation techniques, Livelink automatically reduces your Lottie file sizes by 10-50x. Livelinks are served using Lottielab's content delivery network (CDN). Our CDN is built with performance and reliability as the top priority. It is capable of delivering Lottie files to end-users in tens of milliseconds, regardless of location. This allows you to you use a Lotte in parts of websites and apps that are the most sensitive to load time, such as replacing large hero images.

3. Easy to use and compatible out of the box. We provide tailored, step-by-step instructions on using and embedding your Lottie via a multitude of platforms, available right from Lottielab. Even if a platform has no Lottie support, a Livelink in its Embed link flavor will likely work with it. For example, this documentation tool has no native Lottie support, but embedding the animation at the top was as easy as pasting a Livelink and pressing Enter.

Getting started with Livelink

We've made Livelink-related functionality easily accessible from the Export panel of Lottielab.

To use Livelink, open your Lottie in Lottielab, and then click Export on the top right.

When the Export panel opens, you'll be greeted with a selection of links that you can use right away to point to your Lottie. In the bottom of the panel, you can choose among many supported platforms to get tailored, step-by-step instructions on embedding your Lottie on that platform.

If your Export panel has a Livelink version update section, this means that you have previously used this file's link. In this case, you can refer to the Managing Livelinks section below.

Otherwise, to see controls for managing your Livelink, click Optimise and publish. You can also use the Livelink without explicitly clicking this button. In that case, your Lottie will be automatically optimised in the background on your first usage.

Using a Livelink

Embed instructions

By far the easiest way to use your Lottie is to find your platform in the Embed Instructions in the Export panel. These instructions will provide an easy-to-follow path to getting your Lottie displayed wherever you want, be it a React app, an iOS project built using SwiftUI, or a bespoke vanilla JavaScript code snippet.

If you don't find your platform, try choosing HTML in the platform list, since a lot of web platforms have some support for raw HTML input.

Manual usage

If we don't provide instructions for your platform of choice, or if you prefer a self-serve approach, use the Lottie Embed options section of the Export panel.

You can choose between the following options:

1. Embed Link: This is an embeddable webpage that plays your Lottie using an included Lottie player. It has the widest compatibility, as it can be used wherever you can embed a webpage. However, it's more difficult to control details of the playback. This link supports the oEmbed standard, so it is compatible out-of-the-box with a lot of software. This link can be customised with additional options, see Customising embed links.

2. iFrame code: This is the same as the Embed Link, but in the form of HTML code that uses an <iframe> tag to embed your Lottie. You can use this code snippet whenever raw HTML input is accepted. This snippet can be customised with additional options, see Customising embed links.

3. JSON URL: Direct link to a Lottie JSON file. Unlike the previous options, the JSON URL is not standalone and can only be played using a Lottie player. If your platform offers a Lottie integration, you can usually use this link with it. With this method, the player is under your control and, depending on your platform, you can customise how the Lottie is played or interact with the player from code. However, the player might be an old version or otherwise incompatible, which cannot happen with the other link types. If you are able to install and/or use your own player, we recommend using Lottielab's own player, the best and tiniest option for playing Lottielab-exported Lotties.

In summary:

• If you need advanced control over the playback, dynamic manipulation or code interaction, or prefer a more native integration, choose a JSON URL with an appropriate platform-specific player or platform-native Lottie support.

• If you're using your Lottie similarly to how you would use an image, choose an Embed Link or iFrame code, depending on your platform.

Managing Livelinks

Once you have an active Livelink, your Export panel will contain the Livelink version update section.

This section allows you to update your Livelink with the latest changes from the editor, view previously published versions of the Lottie, and roll back or restore the link to any past or current version.

At the bottom, you will see the optimisation info box. This box contains information about your Livelink's total page weight, and how much it was reduced by Lottielab's advanced compression and optimisation. To learn more about these numbers, see the Optimisation page.

The asset version dropdown

The asset version dropdown contains all current, past and new (unpublished) versions of your Livelink.

There are three types of version that can appear in the dropdown:

1. Latest version, with a yellow dot. This is the version currently in Lottielab that is not yet published to your Livelink.

2. Current version, with a green dot. This version is what's currently visible on your Livelink.

3. Past versions, with a grey dot. These are historical versions were published to your Livelink in the past.

Publishing new versions

To publish new changes made in Lottielab to your Livelink, select the Latest version in the asset dropdown, then click Publish version to links. All places where you have used the link will instantly update. However, you might need to refresh pages or restart apps where you've used the animation to see it update.

Reverting or restoring versions

If you make a mistake or would like to revert the link to an earlier version or restore it to a newer one, simply select it, and then click Revert links to this version or Restore links to this version.

Deleting a Livelink

Once created, a Livelink cannot be deleted. If you delete your file, its Livelink will continue to exist, but you will not be able to publish new versions or change it in any way. This is a security measure to avoid accidentally breaking websites and apps which use the link. Contact us if you would like to irreversibly delete an existing Livelink.