Skip to main content
Unlisted page
This page is unlisted. Search engines will not index it, and only users having a direct link can access it.

Events Widget Installation Guide

This guide explains how to install the Onlive Events widget on a web page.

Creation of a New Installation in the VMS​

To create a new installation, access the Settings > Installations section and create a new installation of type OnliveAppEvents. Then, configure the installation step by step.

  1. Add the contexts that the application responds to, covering the cases:

    {
        "type": [
            "ievent-homepage",
            "ievent-available-slot",
            "ievent-update",
            "ievent-survey",
            "ievent-cancellation"
        ]
    }

  2. Then, specify on which pages the installation can be shown using regex expressions for paths or domains:

    {
        "paths": [
            "^/path/name.html$"
        ],
        "domains": [],
        "excludePaths": []
    }

  3. Subsequently, customize the widget's style, color palette, typography, spacing, etc.:

    :root,
    :host,
    .ol-theme-light {
      /* Onlive UI Palette - Light Theme */
      --ol-color-primary-50: rgb(255 255 255);
      --ol-color-primary-100: rgb(255 255 255);
      --ol-color-primary-200: rgb(240 240 240);
      --ol-color-primary-300: rgb(230 230 230);
      --ol-color-primary-400: rgb(200 200 200);
      --ol-color-primary-500: rgb(160 160 160);
      --ol-color-primary-600: rgb(0 0 0);
      --ol-color-primary-700: rgb(0 0 0);
      --ol-color-primary-800: rgb(0 0 0);
      --ol-color-primary-900: rgb(0 0 0);
      --ol-color-primary-950: rgb(0 0 0);

      /* Cupra Theme Specific Variables */
      --cupra-font-family-book: "CupraBook", sans-serif;
      --cupra-font-family-light: "CupraLight", sans-serif;
      --cupra-font-family-medium: "CupraMedium", sans-serif;
      --cupra-font-family-bold: "CupraBold", sans-serif;
      ...
    }

  4. Finally, specify configuration about the installation options. Here, each parameter is explained. The targetElementId is the ID of the element where the widget will be rendered.

    {
        "events": {
            "baseUrl": "https://ievents.onlive.site/v1"
        },
        "tracking": {
            "enabled": true
        },
        "appearance": {
            "theme": "light"
        },
        "targetElementId": "onlive-events"
    }

Installation on the Client's Page via Loader Script​

Subsequently, add the script to load the widget to the page where it should be displayed. The script has the following format.

Keep in mind that in the widget configuration, rules must be added so that it can be shown on that page. By default, the widget rules will show it on all pages.

<div id="onlive-events"></div>
<script>
    (function (o, n, l, i, v, e) {
        v = o.createElement(n);v.onload = i;v.async = 1;v.src = l;
        e = o.getElementsByTagName(n)[0];e.parentNode.insertBefore(v, e);
        })(document, 'script', 'https://cdn.onlive.site/loader/v1/loader.min.js', function () {
        window.onliveManager.loader.load("<organization-id>");
    });
</script>