4 ways to add JavaScript libraries in Modyo

In Modyo we have four ways to load a JS library.

1- Directly from a CDN

The first and least recommended is to load the libraries directly from the CDN where they are hosted.

In Modyo Platform, in your Site, go to Templates, we open the head Snippet and load the libraries with the script tag.

2- In a Snippet globally

This is the best option when loading libraries that we will use throughout the site, for this we are going to create a new snippet with the name of the library you want to add, if we type _js or _css as part of the name, our editor will set the correct syntax and will help with Autocomplete.

Then we paste the code from the library.

Then we paste the snippet code into the base stylesheet of our site.

3- In a snippet, inside a widget

This is very similar to the previous example, but now we will load the snippet inside a widget, so that it is only loaded when this widget is called.

4- Creating a new layout

If you have a site where you need many pages to load these libraries, it is best to generate different Layouts and add those layouts individually to the corresponding pages.

For this, inside Modyo Platform, go to Templates, click + to add a new Layout. Type a name that will identify the new Layout.

Then, create a new JS file by clicking the + next to the JavaScript section and inside this new file, paste the snippet from the library. (you can paste it directly or you can also paste it as a snippet).

Finally, we return to the layout 'Vue' and paste the code of the JS sheet below the head. Click Save and Publish your Layout.

Now you can apply this Layout to your pages. Go to a page and in its properties, you can now see and apply the new Layout.

Photo by James Harrison on Unsplash.