# 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:

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

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

{% hint style="info" %}
**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.
{% endhint %}

## Initializing Yeerlo

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

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

<pre class="language-javascript"><code class="lang-javascript">function renderEvents(){
      const yeerlo = new window.Yeerlo({
        container: "#yc", // where to inject the ui. e.g "#yeerloContainer" or ".yeerloContainer"
        
        <a data-footnote-ref href="#user-content-fn-1">// 5 EVENT DISPLAY MODES (only enable one of the modes below)</a>
        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
</code></pre>

```javascript
// 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({...});**

{% hint style="info" %}
**Helpful tip:** always refer back to this section for a proper list of all the parameters you can provide when initializing **Yeerlo** object.
{% endhint %}

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 style="info" %}
**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](http://localhost:3001/category/arts-and-culture) is `arts-and-culture`. You can find the available list of categories by simply going to [https://yeerlo.com](http://localhost:3001/category/arts-and-culture) and clicking on the `Categories` menu to view all categories.
{% endhint %}

[^1]: There are 5 ways to specify the type of events to display


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doc.yeerlo.com/documentations/embed-yeerlo/installation-and-initialization.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.