# Welcome to Yeerlo!

Limitless events at your fingertips.

{% hint style="info" %}
Hey! 👋 If you want to simplify your event management and ticket sales, you've come to the right place. Yeerlo SDKs & Client Libraries are here to make things easier for you.
{% endhint %}

## Overview

Welcome to the Yeerlo documentation page, where events come to life! 🚀

Yeerlo enables seamless integration of events hosted on Yeerlo.com directly into your website using our powerful Client Libraries. 

Yeerlo isn't just another event platform; it's the digital heartbeat of your events. We specialize in simplifying event management and ticket sales, from planning to execution. With our SDKs & Client Library integrations, showcasing your events on your website has never been easier.

## Yeerlo Use Cases

1. Events & Conferences
2. Cinemas
3. Sports & Gaming
4. Online Tutors
5. Appointment Booking
6. Club Houses... and many more

{% hint style="info" %}
**Helpful tip:** We recommend that you carefully examine every part of the documentation to fully grasp the issue we are tackling, our present solutions, and how they might integrate with your product or address your specific challenges.
{% endhint %}

## Get Started

We've put together some helpful guides for you to quickly get started with our services.

{% content-ref url="/pages/JAxLmCo5rMPLOV9nOco2" %}
[Embed Yeerlo](/documentations/embed-yeerlo)
{% endcontent-ref %}

{% content-ref url="/pages/AYBHURCER3tilB1L0CcZ" %}
[Custom Kickstarter](/documentations/custom-made-kickstarter)
{% endcontent-ref %}

{% content-ref url="/pages/eUJppNAsjrbxxQrRVIoS" %}
[Yeerlo API](/documentations/yeerlo-api)
{% endcontent-ref %}


# Embed Yeerlo

Start using Yeerlo in your Javascript apps

This section shows you how to get started and use the Embed Yeerlo in your JS based web apps and frameworks. Pay close attention to the live demo and illustrations for proper clarity.


# Live Demo

View the live demo of Yeerlo Client Library below, on codepen

{% embed url="<https://codepen.io/SamHJ/pen/rNbVdGO>" %}


# 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


# Yeerlo Partnership Program

Create and embed eventful experiences with Yeerlo!

To enhance online accessibility to events, we have launched a partnership program that enables website and app owners to embed any Yeerlo event directly into their platforms, providing them an opportunity to earn revenue.

The **Embedded Events** opportunity allows you to integrate Yeerlo's event management platform into your website.

By embedding our client library, you can facilitate direct ticket sales for events hosted on Yeerlo. For every ticket sold through your website, you earn **20%** of the revenue generated by Yeerlo from that ticket. It's a seamless way to enhance event promotion and monetize your platform. This benefit is endless, meaning there are no expirations to how much you can earn from events hosted on Yeerlo.

To get started with embedding Yeerlo events in your website, you must provide your business' domain name and verify that you actually own that domain via a DNS record verification process, after which you can proceed to using the **Yeerlo Client** **Library** described in the previous page, to render the events on your website.

To join this program, visit <https://build.yeerlo.com> and sign up as an **Embedded Events** partner.


# Custom Kickstarter

Get your own event platform, tailored specifically for you, all for free!

<figure><img src="https://3518345162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fu1bUcvrXv8zIBBMfNIRL%2Fuploads%2FAHGtgm2RVYf5mRJMu0AW%2FScreenshot%202024-10-16%20at%2009.06.25.png?alt=media&amp;token=1866ee33-6d90-4bfb-8610-62fd03534a85" alt="Yeerlo custom kickstarter project"><figcaption><p>Preview of the Yeerlo custom made kickstarter project</p></figcaption></figure>

Use the custom kickstarter project to host your own personal event platform without writing a line of code.

Just clone and deploy to your preferred hosting platform.

View demo here: <https://my-yeerlo-website.netlify.app>

To get started, clone the project here: <https://github.com/Yeerlo/MyYeerloWebsite>


# Yeerlo API

Start interacting with our GraphQL API

This section shows you how to interact with our APIs


# Getting Started

The Yeerlo API exposes our powerful event capabilities through a GraphQL based API

## First Things First

You must sign up for the Yeerlo API here <https://build.yeerlo.com>, and obtain your API key to be able to continue with our API.

## Endpoint Information

The table below shows the endpoint information for interacting with the Yeerlo API:

| Role     | Value                    |
| -------- | ------------------------ |
| Base URL | <https://api.yeerlo.com> |
|          |                          |

## Authorization Header Information

Each interaction with the Yeerlo API must be authenticated. Therefore, you have to provide an `authorization` header when initiating any call to the Yeerlo API.

```javascript
headers: {
   Authorization: "Bearer x-your-yeerlo-api-key"
}
```

## API Key Security

To ensure that your API keys are only used by trusted parties, we have implemented measures to restrict their usage to authorized **domains and IPs**. We recommend that you always adhere to these security practices to prevent unauthorized access to your API keys. You can manage these restrictions directly from the `API Key` section of your Yeerlo API dashboard. With these restrictions in place, you can safely utilize your keys on both client (i.e with the help of **SSR** (it's still server side though)) and server sides.

{% hint style="info" %}
**Note:** you can only add a maximum of 10 **API key** restrictions, each with a total length of **100** characters.
{% endhint %}

{% hint style="danger" %}
**Note:** If you need to use your API key in your frontend application, please ensure that it is used exclusively on the server side of your setup. In practical terms, this means you should operate a SSR (Server-Side Rendered) application. If not, you should explore setting up a mini server application to handle all sensitive requests and proxy them accordingly.
{% endhint %}

## API Documentation

We've provided comprehensive API documentation, complete with numerous examples, in the **Calling Methods** section below.

This documentation will guide you through using our GraphQL API, including which methods to call and when to use them, as well as the differences between mutations and queries.

{% hint style="info" %}
Please note that the fields for each request in the **Calling Methods** section might not always be up-to-date. For the most accurate information, always check the available fields for the method you're calling in our GraphQL playground here: [GraphQL Playground](https://api.yeerlo.com).
{% endhint %}


# Calling Methods


# Onboarding (Auth)


# Onboard Users

{% hint style="warning" %}
**Security Recommendation:** We highly advise integrating a captcha, such as [HCaptcha](https://hCaptcha.com/?r=cd52ac96a013), to verify legitimate signups when using your API key. Please be aware that not implementing this safeguard could result in the deactivation of your API key if we detect any unauthorized signups or abuse through your API key.
{% endhint %}


# Sign In Users

&#x20;

{% hint style="warning" %}
**Security Recommendation:** We highly advise integrating a captcha, such as [HCaptcha](https://hCaptcha.com/?r=cd52ac96a013), to verify legitimate sign in actions when using your API key. Please be aware that not implementing this safeguard could result in the deactivation of your API key if we detect any unauthorized login attempts or abuse through your API key.
{% endhint %}


# User


# File Manager


# Event Categories


# Events


# Tickets


# Ticket Discount Codes

scount


# Event Speakers


# Event Sponsors

pon


# Event Reviews


# Event Bookmarks


# Orders


# Surveys


# Survey Submissions (Submitted Answers)


# Activity Logs

tivi


# Transactions History


# Client SDKs

Build faster with our wide range of client SDKs

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Rust</strong></td><td>in progress 👨‍💻</td><td></td><td><a href="https://3518345162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fu1bUcvrXv8zIBBMfNIRL%2Fuploads%2FY6evXdTVGNIKJcPdiOGc%2Frust.svg?alt=media&amp;token=1abfd9c4-4564-4ec7-b3d8-78d1a4b5c957">rust.svg</a></td></tr><tr><td>NodeJS</td><td>coming soon 🔜</td><td></td><td><a href="https://3518345162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fu1bUcvrXv8zIBBMfNIRL%2Fuploads%2FKoL8KKLTsgV31DenU1bJ%2Fnodejs-1.svg?alt=media&amp;token=dc0954b0-54c2-4f9a-938d-9f8c2265955e">nodejs-1.svg</a></td></tr><tr><td>Python</td><td>coming soon 🔜</td><td></td><td><a href="https://3518345162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fu1bUcvrXv8zIBBMfNIRL%2Fuploads%2Fcd0wnV9PKd4ZrooEDynE%2Fpython-5.svg?alt=media&amp;token=49c4accb-0c99-4dc2-9ca6-15f36b592f35">python-5.svg</a></td></tr><tr><td>Golang</td><td>coming soon 🔜</td><td></td><td><a href="https://3518345162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fu1bUcvrXv8zIBBMfNIRL%2Fuploads%2Fo2gediFbRkO4xgb3yAkK%2Fgolang-1.svg?alt=media&amp;token=61551cb4-4e74-42c5-80e7-0076803190a9">golang-1.svg</a></td></tr><tr><td>Laravel</td><td>coming soon 🔜</td><td></td><td><a href="https://3518345162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fu1bUcvrXv8zIBBMfNIRL%2Fuploads%2FDE91ar5stDLKUzMrTZpi%2Flaravel-2.svg?alt=media&amp;token=f8d671c5-014b-49df-844b-5adb96be07c1">laravel-2.svg</a></td></tr><tr><td>Ruby</td><td>coming soon 🔜</td><td></td><td><a href="https://3518345162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fu1bUcvrXv8zIBBMfNIRL%2Fuploads%2FOnTDjTazLfRiPjlAxBS8%2Fruby.svg?alt=media&amp;token=8c8db5f4-7a0b-4030-8f8c-a003080f5700">ruby.svg</a></td></tr></tbody></table>