Leap Mobile Web Embed

Owned by Othmane (Unlicensed)
Last updated: Nov 07, 2023 by Hillary Sipe (Unlicensed)
5 min read

Thank you for choosing Greencopper's web embed.
Here are the instructions on how to integrate your embed into your website and some details about how the web app works for an efficient display of your event program:

Easy Integration

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

It's as simple as that.

<goevent-web id="goevent-web" project-tag="EVENTNAME-YEAR" project-hash="HASH" data-language="eng"></goevent-web>
<script id="gw-script" type="text/javascript" src="https://s3.amazonaws.com/goeventweb-static.greencopper.com/VERSION/public/scripts/endpoint.min.gz.js" 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 web app 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 view

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


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

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


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

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

Changing the views that are shown

For multiple reasons, like separating your views between multiples pages of your website or showing only a single view for a given period, you may want to edit the list of views that are shown for a given code snippet and in some cases use multiple versions of code snippets to organize your website. 

Here is the list of valid views that can be used (you may not have all these tabs included with the basic widget):

  • artists
  • schedule
  • timeline
  • events
  • recommender
Note that if a view is not included in your unique configuration, configured by your account manager, it will not show up even if you add it there.


To achieve that, you can add the "data-views" HTML attribute to your "goevent-web" HTML element with the list of views inside (separated with commas), like in these examples:

Situation #1
"I want to show only my artists lineup."

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


Situation #2
"I want two code snippets: one with my artists lineup and one with my schedule and my timeline, that I will put in two separate pages of my website."

Artists lineup code snippet

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

Schedule and timeline code snippet

<goevent-web id="goevent-web" project-tag="EVENTNAME-YEAR" project-hash="HASH" data-language="eng" data-views="schedule,timeline"></goevent-web>
<script id="gw-script" type="text/javascript" src="https://s3.amazonaws.com/goeventweb-static.greencopper.com/VERSION/public/scripts/endpoint.min.gz.js" data-gzip="true"></script>

Multi-language

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 web app. 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 a french web app:

<goevent-web id="goevent-web" project-tag="EVENTNAME-YEAR" project-hash="HASH" data-language="fre"></goevent-web>
<script id="gw-script" type="text/javascript" src="https://s3.amazonaws.com/goeventweb-static.greencopper.com/VERSION/public/scripts/endpoint.min.gz.js" data-gzip="true"></script>CMS Support

Dynamic navigation

If your website uses dynamic navigation, meaning there is no page reload upon navigation, you will have to separate your embed code and integrate it in a slightly different way.

Given that your embed code looks like this:

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

You will have to integrate the goevent-web tag where you normally would have wanted to put the whole thing, for example: in the content section of your lineup page.

<goevent-web id="goevent-web" project-tag="EVENTNAME-YEAR" project-hash="HASH" data-language="eng"></goevent-web>

Then, you will have to integrate the rest of the code, the script tag, in your main website template.

<script id="gw-script" type="text/javascript" src="https://s3.amazonaws.com/goeventweb-static.greencopper.com/VERSION/public/scripts/endpoint.min.gz.js" data-gzip="true"></script>

If you don't know where your main website template is, keep in mind that it is the place where scripts are loaded in any page of your website.
For example, on Squarespace, you can inject any HTML in the Settings → Advanced → Code Injection section in the FOOTER area. This is where this part of our code would go.

For further technical help on this subject, do not hesitate to contact your account manager.

CMS Support

Our embed can be embedded in any Content Management System that we know of except for Wix. Sadly, technical limitations make the use of our embed impossible inside a Wix website.
If you are experiencing problems on another CMS, please contact your account manager and we will investigate further.


Our embed is not based on the iframe technology for multiple reasons. You should not insert it inside an iframe HTML tag as we don't guarantee all functionalities will be working inside that environment.


Golive.fm web widgets v6 (deprecated)

This section is only relevant if you deployed your web app before 30/07/2017

Previous code
 

<div id="goevent-web" class="goevent-web">
<div class="goevent-web-widget clearfix" data-id="!account" data-default-url="account"></div>
<div class="containerPage">          
    <div class="goevent-web-widget" data-id="!programmation" data-default-url="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>