A collection of widgets that make use of the Koliseo API
JavaScript CSS Shell
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



A collection of widgets that use the Koliseo API. You can see a live example here.

These widgets can be used to sell tickets for your events from your own pages without using iframes. They are responsive and have been tested with Chrome, Firefox and IE8+. Older browsers will degrade to a simple "get your tickets" button.



KButton is a simple CSS stylesheet for ticket sales buttons:

screenshot of KButton

To use, add this to your page:

<!-- Put this in your head -->
<link rel="stylesheet" href="https://www.koliseo.com/w/kbutton/1.0/kbutton.min.css">

<!-- Put this where you want the button to appear -->
<a class="kbutton">Get your tickets</a>


KPerf displays a list of scheduled performances for a event.

Screenshot of the KPerf widget

To use, add this at the end of your web page (before the ending </body> tag):

<!-- KPerf requires jQuery. If your web page already has jQuery present, you may omit this first line. -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://www.koliseo.com/w/kperf/1.0/kperf.min.js"></script>

Now put this where you want the widget to appear:

<div class="kcontainer" data-event-uuid="{{{your event UUID}}}"></div>

KPerf Parameters

KPerf can receive parameters as data-* attributes of the container DOM element:

  • eventUuid (string) the event uuid, extracted from a Koliseo URL such as sandokan/board-her. You can specify multiple values separated by commas (no spaces). This attribute is required.
  • locale (string) the two-letter acronym of the locale to use. The default is the browser locale or en if none.
  • dateFormat (string) the date format. The default is locale-specific.
  • maxEntries (number) the maximum number of entries to display. The default is 5.
  • insertCss (boolean) By default kperf.css will be inserted to <head> if it is not already present. Set this to false if you plan to provide your own styles somewhere else.

Notice that any camelcase parameter names should be introduced in your HTML using dashes, as in data-event-uuid (instead of data-eventUuid). Only the event uuid is required. An example using all parameters:

<div class="kcontainer" 
  data-date-format="Ddd Mm* d*"

Using KPerf as a jQuery plugin

KPerf is also a jQuery plugin that can also be initialized using JavaScript:

  eventUuid: 'solid-snake/destroy-mg',
  locale: 'es',
  dateFormat: $('#my-container').width() < 200? 'dd/mm' : 'Ddd Mm* d*'


The widget is automatically set to use the browser locale, unless otherwise specified using the locale option. The widget supports the same set of locales as the Koliseo website, and will default to en if a locale is not supported.

You can add new locales by setting a global Koliseo.resources variable before including kperf.js:

window.Koliseo = window.Koliseo || {};
Koliseo.resources = {
  it: {
    ticketsAvailable: 'biglietti disponibili',
    seeOther: 'vedi altre date',
    buy: 'Compra',
    empty: 'Nessuno spettacolo trovato',
    dateFormat: 'Ddd Mm* d*',
    weekDays: 'Domenica Lunedì Martedì Mercoledì Giovedì Venerdì Sabato',
    months: 'Gennaio Febbraio Marzo Aprile Maggio Giugno Luglio Agosto Settembre Ottobre Novembre Dicembre'


To hack on this, checkout the repostory and execute

npm install

# generate minimized distribution


These widgets are released under the MIT license. You may modify these widgets and include them in your own commercial, closed-source projects as long as the copyright header is left intact.