Streaming live at 10am (PST)

Lottie files in CMS items

I’m loving the new Lottie integration, and was wondering if there was a way to use it with the CMS.

I’d love to have a dynamic Lottie element in my CMS template page filled by a Lottie JSON file I upload to each individual CMS entry.

Has anyone managed to do this, or is it not yet possible?

1 Like

I stopped trying to make this work with Embed and json code because of the size of my jsons. My plan was to try to emulate the component and use a dummy lottie component with a certain class that’d match the class declared in custom code…

Well, we all want what you want and I think we’re all entitled to because it makes sense, right? So I hope this happens some day soon :slight_smile: Go check if the idea is on the whishlist already maybe and if it’s not, add it.

https://wishlist.webflow.com/

Thanks Vincent, just added it in. Here’s the link if anyone else comes across this thread and wants to help make it happen :smile: https://wishlist.webflow.com/ideas/WEBFLOW-I-2281

Hmm your solution actually sounds pretty good, if I can keep the size of the JSONs down. If you ever end up writing out what you were doing I’d love to check it out (sadly can’t code so I can’t piece it together from what you wrote there :sweat_smile:)

4 Likes

I found out how to do this very easily.

Step 1: Upload a Lottie JSON to your Webflow project:

Step 2: Copy the URL to the file, and add a URL field to your CMS collection:

Step 3: Visit the Lottie web player page, add your JSON url to the form:

Step 4: Customize and tweak your embed settings to your liking:

Step 5: Add a custom embed, and replace the URL with a dynamic link referencing your CMS JSON URL:

Step 6: There is no step 6. You’re done. Congratulations.

6 Likes

This looks PERFECT @Julian_Wan :smile: I’ll be trying this out in the next week or so, thanks for taking the time to write it all up :blush:

@Julian_Wan Can you provide the full code snippet using “Preformatted text”?

Sure, I linked to the site which has it (https://lottiefiles.com/web-player) but here it is:

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js">
</script>
<lottie-player src="<YOUR LOTTIE URL HERE>"  
background="transparent"  
speed="1"style="width: 300px; height: 300px;"
loop controls autoplay></lottie-player>