Golive.fm Web Widgets

Owned by Maxime Cote (Unlicensed)
Last updated: Sept 11, 2017 by Mickaël Gagné (Unlicensed)
4 min read

Thank you for choosing golive.fm web widgets solution!

Below are the instructions on how to integrate the widgets into your website and some details about how the widgets work for an efficient display of your event program.

Easy Integration

The golive.fm web product is based on the concept of widgets (basic widgets being artists or schedule). Widgets are really easy to embed into your website.

The sample code below presents a basic example of the HTML code you will need to embed into your website in order to activate goevent web widgets. 

It's as simple as that.

<goevent-web id="goevent-web" data-language="eng"></goevent-web>
<script id="gw-script" src="https://s3.amazonaws.com/goeventweb-static.greencopper.com/HASH/PROJECTNAME-YEAR/public/scripts/endpoint.min.gz.js" type="text/javascript" data-gzip="true"></script>

How it works

The provided HTML code loads the endpoint JavaScript file stored directly in our Amazon S3 server. Once loaded, the script will load additional elements required by the widgets to operate correctly including:

  • main minified js files
  • main minified CSS file
  • JSON files

All these elements are stored on our S3 server running on Amazon Web Services.

Changing the default widget

Changing the default widget (the first widget seen when the page is loaded) is really easy. All you have to do is change the 'data-default-role' value to the widget you want (artists or schedule). If you want the widgets on separate pages of your website, and on each pages show a different widget on page load, you'll have to copy/paste our code in each page, and change the 'data-default-role' attribute.

 

Example : You have a 'lineup' page on your website where you want to show the artists widget on page load. You'll have your 'data-default-role' set to artists, like this : 

 

<goevent-web id="goevent-web" data-language="eng" data-default-role="artists"></goevent-web>
<script id="gw-script" src="https://s3.amazonaws.com/goeventweb-static.greencopper.com/HASH/PROJECTNAME-YEAR/public/scripts/endpoint.min.gz.js" type="text/javascript" data-gzip="true"></script>


You also have a 'schedule' page on your website, where instead you want to show the schedule widget on page load. You'll have your 'data-default-role' set to schedule, like this : 

 

<goevent-web id="goevent-web" data-language="eng" data-default-role="schedule"></goevent-web>
<script id="gw-script" src="https://s3.amazonaws.com/goeventweb-static.greencopper.com/HASH/PROJECTNAME-YEAR/public/scripts/endpoint.min.gz.js" type="text/javascript" data-gzip="true"></script>

Support for Multiple Languages

If you have a multi-language website (e.g. supporting English and French at the same time), you will have to embed one set of code by language. Simply copy/paste the code in the pages that need to expose the widgets. Change the 'data-language' attribute in the code so it refers to the appropriate language code (ie : 'eng', 'fre', 'spa', etc...).

See below a code sample for the french widgets:

<goevent-web id="goevent-web" data-language="fre" data-default-role="artists"></goevent-web>
<script id="gw-script" src="https://s3.amazonaws.com/goeventweb-static.greencopper.com/HASH/PROJECTNAME-YEAR/public/scripts/endpoint.min.gz.js" type="text/javascript" data-gzip="true"></script>


Golive.fm web widgets v6 (deprecated)

This section is only relevant if you deployed your widgets before 30/03/2017

Previous widget code
 

<div id="goevent-web" class="goevent-web">
<div class="goevent-web-widget clearfix" data-id="!account" data-default-role="account"></div>
<div class="containerPage">          
    <div class="goevent-web-widget" data-id="!programmation" data-default-role="artists"></div>
</div>
<script async src="https://s3.amazonaws.com/goeventweb-static.greencopper.com/HASH/PROJECTNAME-YEAR/assets/widgets/widgets_loader.min.js" type="text/javascript"></script>
<div id="goevent-web-loader" data-lang="eng"></div>
</div>


Changing the default widget

Changing the default widget (the first widget seen when the page is loaded) is really easy. All you have to do is change the 'data-default-role' value to the widget you want (artists, grid, events, or timeline). If you want the widgets on separate pages of your website, and on each pages show a different widget on page load, you'll have to copy/paste our code in each page, and change the 'data-default-role' attribute.

 

Example : You have a 'lineup' page on your website where you want to show the artists widget on page load. You'll have your 'data-default-role' set to artists, like this : 

 

<div id="goevent-web" class="goevent-web">
<div class="goevent-web-widget clearfix" data-id="!account" data-default-role="account"></div>
<div class="containerPage">          
    <div class="goevent-web-widget" data-id="!programmation" data-default-role="artists"></div>
</div>
<script async src="https://s3.amazonaws.com/goeventweb-static.greencopper.com/HASH/PROJECTNAME-YEAR/assets/widgets/widgets_loader.min.js" type="text/javascript"></script>
<div id="goevent-web-loader" data-lang="fre"></div>
</div>


You also have a 'schedule' page on your website, where instead you want to show the grid widget on page load. You'll have your 'data-default-role' set to grid, like this : 

 

<div id="goevent-web" class="goevent-web">
<div class="goevent-web-widget clearfix" data-id="!account" data-default-role="account"></div>
<div class="containerPage">          
    <div class="goevent-web-widget" data-id="!programmation" data-default-role="grid"></div>
</div>
<script async src="https://s3.amazonaws.com/goeventweb-static.greencopper.com/HASH/PROJECTNAME-YEAR/assets/widgets/widgets_loader.min.js" type="text/javascript"></script>
<div id="goevent-web-loader" data-lang="fre"></div>
</div>

 

Support for Multiple Languages

If you have a multi-language website (e.g. supporting English and French at the same time), you will have to embed one set of code by language. Simply copy/paste the code in the pages that need to expose the widgets. Change the 'data-lang' attribute in the code so it refers to the appropriate language code (ie : 'eng','fre','spa', etc...).

See below a code sample for the french widgets:

<div id="goevent-web" class="goevent-web">
<div class="goevent-web-widget clearfix" data-id="!account" data-default-role="account"></div>
<div class="containerPage">          
    <div class="goevent-web-widget" data-id="!programmation" data-default-role="artists"></div>
</div>
<script async src="https://s3.amazonaws.com/goeventweb-static.greencopper.com/HASH/PROJECTNAME-YEAR/assets/widgets/widgets_loader.min.js" type="text/javascript"></script>
<div id="goevent-web-loader" data-lang="fre"></div>
</div>


Force the alphabetical segments of the Artists widget to show or hide

By default, the segments on the Artists widget, sorted alphabetically, are shown if there are 15 or more artists on the widget. 
You can bypass this rule by adding the attribute "data-alpha-segments” to the "goevent-web-loader” <div> tag and setting it to “true” or “false”.

See an example here:

<div id="goevent-web" class="goevent-web">
<div class="goevent-web-widget clearfix" data-id="!account" data-default-role="account"></div>
<div class="containerPage">          
    <div class="goevent-web-widget" data-id="!programmation" data-default-role="artists"></div>
</div>
<script async src="https://s3.amazonaws.com/goeventweb-static.greencopper.com/HASH/PROJECTNAME-YEAR/assets/widgets/widgets_loader.min.js" type="text/javascript"></script>
<div id="goevent-web-loader" data-lang="fre" data-alpha-segments="true"></div>
</div>
<div id="goevent-web" class="goevent-web">
<div class="goevent-web-widget clearfix" data-id="!account" data-default-role="account"></div>
<div class="containerPage">          
    <div class="goevent-web-widget" data-id="!programmation" data-default-role="artists"></div>
</div>
<script async src="https://s3.amazonaws.com/goeventweb-static.greencopper.com/HASH/PROJECTNAME-YEAR/assets/widgets/widgets_loader.min.js" type="text/javascript"></script>
<div id="goevent-web-loader" data-lang="fre"></div>
</div>