🍊Installation & Initialization

Installing Yeerlo

Installing Yeerlo is as simple as adding up the javascript library with a script tag, and the css with a link tag. The Bare Metal installation is shown below:

<script type="text/javascript" src="https://sdk.yeerlo.com/v1.js"></script>

<link rel="stylesheet" href="https://sdk.yeerlo.com/v1.min.css">

Staying updated with latest changes: Our client library is actively being enhanced and developed. To guarantee that you're using the latest and most stable version of our libraries, you can append the current timestamp at the end of the src or href HTML tags. For example: https://sdk.yeerlo.com/v1.js?1703924649579. Alternatively, you can use any randomly generated number to circumvent our/your caching strategies for these libraries. This approach is also recommended for the css https://sdk.yeerlo.com/v1.min.css?1703924649579.

Keep in mind that this approach may result in slightly longer load times compared to scenarios where your web app uses caching mechanisms (like PWAs) to enable faster subsequent loads.

Initializing Yeerlo

The next step is initializing the Yeerlo Js library. The Bare Metal initialization is shown below:

<!-- the HTML container to render the events in -->
<div id="yc"></div> 

function renderEvents(){
      const yeerlo = new window.Yeerlo({
        container: "#yc", // where to inject the ui. e.g "#yeerloContainer" or ".yeerloContainer"
        
        
        creatorId:'2bbegYWBgxCUih8p26L17V3IM7W', // display events of a particular creator
        // creatorIds: ['2bbegYWBgxCUih8p26L17V3IM7W'], // display events of specific creators.  max. of 10 ids
        // random: true, // display random events, from the visitor's location/country, from any creator (the default mode when none of the other modes are set)
        // categorySlug: 'blockchain-and-crypto', // display events in a particular category, using the category slug and the visitor's country
        // countryName: 'Canada', // "US", "UK", "Ghana", "Nigeria", "Australia" etc. display events in a particular country
        // END 5 EVENT DISPLAY MODES
        
        layoutMode: "events", // one of "events", | "cinemas", and "meetings" are coming soon
        displayFormat: "default", // one of "default", "simple" | "masonry" and "boxed" are coming soon
        limit: 0 // (Optional) total number of events you want to show. Helpful for using multiple instances on 
        // different sections of the same page. To show all the events, set the limit to 0 or omit the field entirely
      })
      yeerlo.init();
}

renderEvents(); // The result should display yeerlo events directly in your web app

// Supports method chaining
const yeerlo = new Yeerlo({});
yeerlo.init().destroy(); // destroys the initialized Yeerlo instance

Alternatively, you can easily get started with the Yeerlo Nuxt library available on NPM here: https://www.npmjs.com/package/@yeerlo/nuxt. The updated initialization parameters can be found in the Github page here: https://github.com/Yeerlo/NuxtYeerlo

This is by far the easiest installation and initialization method available!

Structure of the Initialization Object

Now that you've known how to install and initialize Yeerlo, the next thing is to get acquainted with the possible parameters you can pass to the Yeerlo object when calling new Yeerlo({...});

Helpful tip: always refer back to this section for a proper list of all the parameters you can provide when initializing Yeerlo object.

The table below summarizes the different parameters that can be supplied when creating a new Yeerlo instance:

Property	Type	Required	Meaning
container	String	Yes	Specifies an exact location within your ui, to inject the events. Could be a class name or Id reference. e.g "#yeerloContainer" or ".yeerloContainer"
Display modes (creatorId, creatorIds, random, categorySlug, and countryName)	String | Array	Yes (but only one mode must be enabled at a time)	Helps you filter the kind of events you would want to display in your web apps. You can filter by country, category slug, creators etc.
layoutMode	String	Yes	Helps you specify a layout for each kind of event mode supported on Yeerlo. The default is events
displayFormat	String	Yes	Indicates how you want to render the events in your web apps. Available formats are default and simple
limit	Number	No	Helps you limit the number of events shown on each section of your web app. For example, you can display 1 event in your hero section, 3 or 4 in another section of the same page

Hint: a category slug on Yeerlo, is the last part of a category url after the /category/. For example, the slug in this url https://yeerlo.com/category/arts-and-culture is arts-and-culture. You can find the available list of categories by simply going to https://yeerlo.com and clicking on the Categories menu to view all categories.