Page Comparison

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. 

...

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

...

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.

...

<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. 

...

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

...

<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...).

...

<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.

...

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.

...

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>

...