Lottie Web Player

Example implementation of Lottie in Wisej

To elaborate a bit further:

From the examples I’ve seen of Lottie web player (such as this one), it looks like the Lottie web player script is loaded via this url:
https://unpkg.com/@lottiefiles/lottie-player@0.3.0/dist/lottie-player.js

To implement Lottie (or any other similar widget) in Wisej :
-Create a new wisej project

-Under the toolbox, select the “Widget” component. Add a widget to the page.

-Within the widget component, if you click on the box at the top-right corner, you should see “Border Style”, “Packages”, “Init Script”, and “Options”
-Under “Packages”, click “Add” and for the source, put the link to the Lottie web player script https://unpkg.com/@lottiefiles/lottie-player@0.3.0/dist/lottie-player.js. You can give it a name if you like, ie Lottie.

-Under “Init Script” you can type the Javascript code to initialize the widget. This is a bit awkward with Lottie, as the examples I’ve seen (such as this one) used HTML, not Javascript, to create the widget. You could look and see if they have an example where it’s initialized with Javascript, or maybe use something like document.write to get it to run the HTML inside of javascript. Instead of document, use this.widget. Like so:

this.init = function(options) {

// your initialization code.
document = this.widget;
document.write(“<lottie-player src=’https://assets4.lottiefiles.com/datafiles/zc3XRzudyWE36ZBJr7PIkkqq0PFIrIBgp4ojqShI/newAnimation.json’ style = ‘ width: 400px;’ autoplay loop controls></lottie-player>”);
}

-Under “Options”, you can set the options. It is formatted as a JSON file. You will also need to edit the init script so that options is being used to set the options of the widget (ie, you are not manually hard-coding the options in, like I just did- you are using the options variable instead). This might be a bit awkward with Lottie as it looks like the options (speed, loop, autoplay etc) are being set in HTML, so setting the options here via JSON file may not be the best approach.

Thanks a lot.

Hi Didi,

You can easily integrate most Javascript components into Wisej.NET!

You can find more info about it through our Widget Documentation.

In Wisej.NET, you can use the Widget control to integrate your JavaScript component of choice!

Also, since we do have a lot of open-source extensions, you can browse through the Extension GitHub repository to get an idea of how this kind of integration works!

If you do need additional help, you can take a look at our Professional Support Packages!

HTH,
Alaa

//