Options
All
  • Public
  • Public/Protected
  • All
Menu

Inviton | Clientside API documentation

About

Inviton clientside API provides sets of methods for simple and safe integration of the ticket selling / attendee registration process. Unlike typical solutions, Inviton API doesn't use iframes, but renders the content directly into given HTML Element on your page. This allows for higher level of customization [by just modifying the default CSS values], programing adaptation, plugging into the process flow and much more

Cross-platform compatibility

All ES5 capable browsers. As with IE, the clientside API is guaranteed to work on IE11 as well as confirmed (but not guaranteed) to work on IE10.

Feature overview

  • Full ticketing process
  • Possibility to render specified order form without having to manually select the ticket
  • Server API obtaining ticketing data wrapper
  • Seating plan (implemented, documentation coming soon)
  • Audience interaction render (coming soon)

Installation

Important, do not forget to include this into top your page!
Add following initialization code into the <head> part of your page 
(function (i, n, v, l, t, o, m) {
  if (!i['InvitonApiObject']) {
    var cmdQueue=[],internalApi={showLoading:function(e){var n="";function t(e,t){n+='<div class="'+e+'">'+(t?"</div>":"")}t("holdon-content"),t("sk-rect");for(var a=1;a<6;a++)t("rect"+a,!0);n+="</div></div>";var i=e.length?e:[e];for(a=0;a<i.length;a++){var o=document.createElement("div");o.setAttribute("class","holdon-white holdon-overlay holdon-element"),o.innerHTML=n,i[a].appendChild(o)}},pushCommand:function(e,t,n){null!=n&&(n.targetElement||n.targetElementArr)&&0!=n.blockElem&&internalApi.showLoading(n.targetElementArr||n.targetElement),cmdQueue.push([e,t,n])},getQueue:function(){return cmdQueue}},getCacheDate=function(){var e=new Date,t=e.getMinutes();return 1==Math.abs(t%2)&&(e=new Date(e.getTime()-6e4)),e.setSeconds(0),e.setMilliseconds(0),e.getTime()};i.InvitonApiObject=internalApi,o=n.createElement("style"),o.innerHTML=".holdon-overlay{position:absolute;left:0;top:0;bottom:0;right:0;background:#000;background:rgba(0,0,0,.48);z-index:999;cursor:wait}.holdon-content{width:50px;height:57px;position:absolute;top:50%;left:50%;margin:-21px 0 0 -25px}.sk-rect{width:50px;height:40px;text-align:center;font-size:10px}.sk-rect>div{background-color:#b3b3b3;height:100%;width:6px;display:inline-block;-webkit-animation:sk-rect-anim 1.2s infinite ease-in-out;animation:sk-rect-anim 1.2s infinite ease-in-out;margin-left:2px}.sk-rect .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.sk-rect .rect3{-webkit-animation-delay:-1s;animation-delay:-1s}.sk-rect .rect4{-webkit-animation-delay:-.9s;animation-delay:-.9s}.sk-rect .rect5{-webkit-animation-delay:-.8s;animation-delay:-.8s}@-webkit-keyframes sk-rect-anim{0%,100%,40%{-webkit-transform:scaleY(.4)}20%{-webkit-transform:scaleY(1)}}@keyframes sk-rect-anim{0%,100%,40%{transform:scaleY(.4);-webkit-transform:scaleY(.4)}20%{transform:scaleY(1);-webkit-transform:scaleY(1)}}.holdon-white.holdon-overlay{background:rgba(255,255,255,.9)}.holdon-white.holdon-overlay .sk-rect>div{background-color:#cecece}",n.head.appendChild(o),i[t]=function(e,t,n){internalApi.pushCommand(e,t,n)},o=n.createElement(v),m=n.getElementsByTagName(v)[0],o.async=1,o.src=l+"/v-"+getCacheDate()+".js",m.parentNode.insertBefore(o,m);
  }
})(window, document, 'script', 'https://inviton-cdn.azureedge.net/clientside-api/js/api-loader', 'invitonApi');

Common API usages

Most common usage of the Inviton clientside API is the ticket selling widget integration. It's also the simplest one. In the most basic setups, all one needs is a target element and an event id. The API however offers many events/methods/properties to customize the ticketing flow and look

The widget is rendered by using the renderForIds method of the ticketSelector namespace (click the args member type to see full documentation, or click here)

  • Renders the ticket selector for Event or TicketDate IDs Requires Event/TicketDate ID as well target HTML Element, where the ticket selector should be rendered

    Parameters

    Returns ITicketSelectorRenderer


Simplest sample code for the render goes like this:

<div id="invitonApiWrap" class="invitonApiWrap" style="min-height:100px;width:100%;position:relative"></div>

<script>
  (function (i, n, v, l, t, o, m) {
    if (!i['InvitonApiObject']) {
      var cmdQueue=[],internalApi={showLoading:function(e){var n="";function t(e,t){n+='<div class="'+e+'">'+(t?"</div>":"")}t("holdon-content"),t("sk-rect");for(var a=1;a<6;a++)t("rect"+a,!0);n+="</div></div>";var i=e.length?e:[e];for(a=0;a<i.length;a++){var o=document.createElement("div");o.setAttribute("class","holdon-white holdon-overlay holdon-element"),o.innerHTML=n,i[a].appendChild(o)}},pushCommand:function(e,t,n){null!=n&&(n.targetElement||n.targetElementArr)&&0!=n.blockElem&&internalApi.showLoading(n.targetElementArr||n.targetElement),cmdQueue.push([e,t,n])},getQueue:function(){return cmdQueue}},getCacheDate=function(){var e=new Date,t=e.getMinutes();return 1==Math.abs(t%2)&&(e=new Date(e.getTime()-6e4)),e.setSeconds(0),e.setMilliseconds(0),e.getTime()};i.InvitonApiObject=internalApi,o=n.createElement("style"),o.innerHTML=".holdon-overlay{position:absolute;left:0;top:0;bottom:0;right:0;background:#000;background:rgba(0,0,0,.48);z-index:999;cursor:wait}.holdon-content{width:50px;height:57px;position:absolute;top:50%;left:50%;margin:-21px 0 0 -25px}.sk-rect{width:50px;height:40px;text-align:center;font-size:10px}.sk-rect>div{background-color:#b3b3b3;height:100%;width:6px;display:inline-block;-webkit-animation:sk-rect-anim 1.2s infinite ease-in-out;animation:sk-rect-anim 1.2s infinite ease-in-out;margin-left:2px}.sk-rect .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.sk-rect .rect3{-webkit-animation-delay:-1s;animation-delay:-1s}.sk-rect .rect4{-webkit-animation-delay:-.9s;animation-delay:-.9s}.sk-rect .rect5{-webkit-animation-delay:-.8s;animation-delay:-.8s}@-webkit-keyframes sk-rect-anim{0%,100%,40%{-webkit-transform:scaleY(.4)}20%{-webkit-transform:scaleY(1)}}@keyframes sk-rect-anim{0%,100%,40%{transform:scaleY(.4);-webkit-transform:scaleY(.4)}20%{transform:scaleY(1);-webkit-transform:scaleY(1)}}.holdon-white.holdon-overlay{background:rgba(255,255,255,.9)}.holdon-white.holdon-overlay .sk-rect>div{background-color:#cecece}",n.head.appendChild(o),i[t]=function(e,t,n){internalApi.pushCommand(e,t,n)},o=n.createElement(v),m=n.getElementsByTagName(v)[0],o.async=1,o.src=l+"/v-"+getCacheDate()+".js",m.parentNode.insertBefore(o,m);
    }
  })(window, document, 'script', 'https://inviton-cdn.azureedge.net/clientside-api/js/api-loader', 'invitonApi');
</script>

<script>
  invitonApi('ticketSelector', 'renderForIds', {
    eventIds: [10500],
    targetElement: document.getElementById('invitonApiWrap')
  })
</script>
This results into following widget:

In this more advanced scenario we will add a custom line for each ticket, log into the console once the widget is loaded, change the ticket selector type, set its default value and put-in some custom assets as well

The widget is, again, rendered by using the renderForIds method of the ticketSelector namespace (click the args member type to see full documentation, or click here)

  • Renders the ticket selector for Event or TicketDate IDs Requires Event/TicketDate ID as well target HTML Element, where the ticket selector should be rendered

    Parameters

    Returns ITicketSelectorRenderer


Code is following:

<div id="invitonApiWrap" class="invitonApiWrap" style="min-height:100px;width:100%;position:relative"></div>

<script>
  (function (i, n, v, l, t, o, m) {
    if (!i['InvitonApiObject']) {
      var cmdQueue=[],internalApi={showLoading:function(e){var n="";function t(e,t){n+='<div class="'+e+'">'+(t?"</div>":"")}t("holdon-content"),t("sk-rect");for(var a=1;a<6;a++)t("rect"+a,!0);n+="</div></div>";var i=e.length?e:[e];for(a=0;a<i.length;a++){var o=document.createElement("div");o.setAttribute("class","holdon-white holdon-overlay holdon-element"),o.innerHTML=n,i[a].appendChild(o)}},pushCommand:function(e,t,n){null!=n&&(n.targetElement||n.targetElementArr)&&0!=n.blockElem&&internalApi.showLoading(n.targetElementArr||n.targetElement),cmdQueue.push([e,t,n])},getQueue:function(){return cmdQueue}},getCacheDate=function(){var e=new Date,t=e.getMinutes();return 1==Math.abs(t%2)&&(e=new Date(e.getTime()-6e4)),e.setSeconds(0),e.setMilliseconds(0),e.getTime()};i.InvitonApiObject=internalApi,o=n.createElement("style"),o.innerHTML=".holdon-overlay{position:absolute;left:0;top:0;bottom:0;right:0;background:#000;background:rgba(0,0,0,.48);z-index:999;cursor:wait}.holdon-content{width:50px;height:57px;position:absolute;top:50%;left:50%;margin:-21px 0 0 -25px}.sk-rect{width:50px;height:40px;text-align:center;font-size:10px}.sk-rect>div{background-color:#b3b3b3;height:100%;width:6px;display:inline-block;-webkit-animation:sk-rect-anim 1.2s infinite ease-in-out;animation:sk-rect-anim 1.2s infinite ease-in-out;margin-left:2px}.sk-rect .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.sk-rect .rect3{-webkit-animation-delay:-1s;animation-delay:-1s}.sk-rect .rect4{-webkit-animation-delay:-.9s;animation-delay:-.9s}.sk-rect .rect5{-webkit-animation-delay:-.8s;animation-delay:-.8s}@-webkit-keyframes sk-rect-anim{0%,100%,40%{-webkit-transform:scaleY(.4)}20%{-webkit-transform:scaleY(1)}}@keyframes sk-rect-anim{0%,100%,40%{transform:scaleY(.4);-webkit-transform:scaleY(.4)}20%{transform:scaleY(1);-webkit-transform:scaleY(1)}}.holdon-white.holdon-overlay{background:rgba(255,255,255,.9)}.holdon-white.holdon-overlay .sk-rect>div{background-color:#cecece}",n.head.appendChild(o),i[t]=function(e,t,n){internalApi.pushCommand(e,t,n)},o=n.createElement(v),m=n.getElementsByTagName(v)[0],o.async=1,o.src=l+"/v-"+getCacheDate()+".js",m.parentNode.insertBefore(o,m);
    }
  })(window, document, 'script', 'https://inviton-cdn.azureedge.net/clientside-api/js/api-loader', 'invitonApi');
</script>

<script>
    invitonApi('ticketSelector', 'renderForIds', {
        eventIds: [10500],
        targetElement: document.getElementById('invitonApiWrap'),
        ticketSelector: {
            ticketCountSelector: 'input',
            onTicketSelectorRendered: function (renderer) {
                console.log("Now we are ready, let's roll, lets use JS to change the value");
                document.querySelector('#invitonApiWrap .its-item .itf-form-input').value = 5;
                document.querySelector('#invitonApiWrap .its-item .itf-form-input').dispatchEvent(new Event('change'));
            },
            methods: {
                getTicketSuffix: function(ticketItem, ticketingResponse) {
                    if (ticketItem.Name.indexOf('Free') > -1) {
                        return '!! GREAT VALUE !!'
                    } else {
                        return '';
                    }
                }
            },
            templates: {
                ticketName: '<div class="its-name">{{ticketName}} - UBER TICKET {{func_getTicketSuffix}}</div>'
            }
        }
    })
</script>
This results into following widget:

In this more advanced scenario we will do custom grouping, use functions in templates, add a custom line for each ticket, log into the console once the widget is loaded, change the ticket selector type, set its default value and put-in some custom assets as well

The widget is, again, rendered by using the renderForIds method of the ticketSelector namespace (click the args member type to see full documentation, or click here)

  • Renders the ticket selector for Event or TicketDate IDs Requires Event/TicketDate ID as well target HTML Element, where the ticket selector should be rendered

    Parameters

    Returns ITicketSelectorRenderer


Code is following:

<div id="invitonApiWrap" class="invitonApiWrap" style="min-height:100px;width:100%;position:relative"></div>

<script>
  (function (i, n, v, l, t, o, m) {
    if (!i['InvitonApiObject']) {
      var cmdQueue=[],internalApi={showLoading:function(e){var n="";function t(e,t){n+='<div class="'+e+'">'+(t?"</div>":"")}t("holdon-content"),t("sk-rect");for(var a=1;a<6;a++)t("rect"+a,!0);n+="</div></div>";var i=e.length?e:[e];for(a=0;a<i.length;a++){var o=document.createElement("div");o.setAttribute("class","holdon-white holdon-overlay holdon-element"),o.innerHTML=n,i[a].appendChild(o)}},pushCommand:function(e,t,n){null!=n&&(n.targetElement||n.targetElementArr)&&0!=n.blockElem&&internalApi.showLoading(n.targetElementArr||n.targetElement),cmdQueue.push([e,t,n])},getQueue:function(){return cmdQueue}},getCacheDate=function(){var e=new Date,t=e.getMinutes();return 1==Math.abs(t%2)&&(e=new Date(e.getTime()-6e4)),e.setSeconds(0),e.setMilliseconds(0),e.getTime()};i.InvitonApiObject=internalApi,o=n.createElement("style"),o.innerHTML=".holdon-overlay{position:absolute;left:0;top:0;bottom:0;right:0;background:#000;background:rgba(0,0,0,.48);z-index:999;cursor:wait}.holdon-content{width:50px;height:57px;position:absolute;top:50%;left:50%;margin:-21px 0 0 -25px}.sk-rect{width:50px;height:40px;text-align:center;font-size:10px}.sk-rect>div{background-color:#b3b3b3;height:100%;width:6px;display:inline-block;-webkit-animation:sk-rect-anim 1.2s infinite ease-in-out;animation:sk-rect-anim 1.2s infinite ease-in-out;margin-left:2px}.sk-rect .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.sk-rect .rect3{-webkit-animation-delay:-1s;animation-delay:-1s}.sk-rect .rect4{-webkit-animation-delay:-.9s;animation-delay:-.9s}.sk-rect .rect5{-webkit-animation-delay:-.8s;animation-delay:-.8s}@-webkit-keyframes sk-rect-anim{0%,100%,40%{-webkit-transform:scaleY(.4)}20%{-webkit-transform:scaleY(1)}}@keyframes sk-rect-anim{0%,100%,40%{transform:scaleY(.4);-webkit-transform:scaleY(.4)}20%{transform:scaleY(1);-webkit-transform:scaleY(1)}}.holdon-white.holdon-overlay{background:rgba(255,255,255,.9)}.holdon-white.holdon-overlay .sk-rect>div{background-color:#cecece}",n.head.appendChild(o),i[t]=function(e,t,n){internalApi.pushCommand(e,t,n)},o=n.createElement(v),m=n.getElementsByTagName(v)[0],o.async=1,o.src=l+"/v-"+getCacheDate()+".js",m.parentNode.insertBefore(o,m);
    }
  })(window, document, 'script', 'https://inviton-cdn.azureedge.net/clientside-api/js/api-loader', 'invitonApi');
</script>

<script>
    invitonApi('ticketSelector', 'renderForIds', {
        eventIds: [10500],
        targetElement: document.getElementById('invitonApiWrap'),
        ticketSelector: {
            ticketCountSelector: 'input',
            onTicketSelectorRendered: function (renderer) {
                console.log("Now we are ready, let's roll, lets use JS to change the value");
                document.querySelector('#invitonApiWrap .its-item .itf-form-input').value = 5;
                document.querySelector('#invitonApiWrap .its-item .itf-form-input').dispatchEvent(new Event('change'));
            },
            renderGrouping: function (ticketingResponse) {
                var freeGroup = {  name: 'Free', ticketIds: [], ticketDateIds: [] };
                var paidGroup = { name: 'Paid', ticketIds: [], ticketDateIds: [] };

                ticketingResponse.TicketDates.forEach(function (td) {
                    if (td.Price == 0) {
                        freeGroup.ticketIds.push(td.TicketId);
                        freeGroup.ticketDateIds.push(td.Id);
                    } else {
                        paidGroup.ticketIds.push(td.TicketId);
                        paidGroup.ticketDateIds.push(td.Id);
                    }
                });

                return [freeGroup, paidGroup];
            },
            methods: {
                getBodyInfo: function (ticketItem, ticketingResponse) {
                    var groupingContext = ticketingResponse.GroupingContext || {};
                    if (groupingContext.name == 'Free') {
                        return '<h3>This are free tickets you can use at will, hurry up, not many are remaining</h3>';
                    } else {
                        return '<h3>Ordinary paid tickets, nice choice for anybody</h3>'
                    }
                },
                getTicketSuffix: function(ticketItem, ticketingResponse) {
                    if (ticketItem.Name.indexOf('Free') > -1) {
                        return '!! GREAT VALUE !!'
                    } else {
                        return '';
                    }
                }
            },
            templates: {
                body: '<div data-inv-role="its-selector-root" class="its-wrap{{wrapCss}}"><div data-inv-role="its-selector-target"><div class="its-items-wrap">{{func_getBodyInfo}} {{ITEMS}}</div><div class="its-submit"><div data-inv-role="its-summary-wrap"></div>{{SUBMIT_BUTTON}}</div><a href="https://www.inviton.eu" target="_blank" class="its-powered-by"><img style="height: 20px" src="https://inviton-cdn.azureedge.net/assets/img/ticketing_by_inviton.png"></a></div><div data-inv-role="its-form-target"></div></div>',
                ticketName: '<div class="its-name">{{ticketName}} - UBER TICKET {{func_getTicketSuffix}}</div>'
            }
        }
    })
</script>
This results into following widget:

Simplest usage of the TicketForm order form widget is rendering form for hardcoded TicketDateId (Inviton's DB id of the ticket.).

The form is rendered by using the renderForm method of the ticketForm namespace (click the args member type to see full documentation, or click here)

  • Code-way to render form (no attributes needed). Renders form based on the parameters provided

    Parameters

    Returns void


Code is following:

<div id="invitonApiWrap" class="invitonApiWrap" style="min-height:100px;width:100%;position:relative"></div>

<script>
  (function (i, n, v, l, t, o, m) {
    if (!i['InvitonApiObject']) {
      var cmdQueue=[],internalApi={showLoading:function(e){var n="";function t(e,t){n+='<div class="'+e+'">'+(t?"</div>":"")}t("holdon-content"),t("sk-rect");for(var a=1;a<6;a++)t("rect"+a,!0);n+="</div></div>";var i=e.length?e:[e];for(a=0;a<i.length;a++){var o=document.createElement("div");o.setAttribute("class","holdon-white holdon-overlay holdon-element"),o.innerHTML=n,i[a].appendChild(o)}},pushCommand:function(e,t,n){null!=n&&(n.targetElement||n.targetElementArr)&&0!=n.blockElem&&internalApi.showLoading(n.targetElementArr||n.targetElement),cmdQueue.push([e,t,n])},getQueue:function(){return cmdQueue}},getCacheDate=function(){var e=new Date,t=e.getMinutes();return 1==Math.abs(t%2)&&(e=new Date(e.getTime()-6e4)),e.setSeconds(0),e.setMilliseconds(0),e.getTime()};i.InvitonApiObject=internalApi,o=n.createElement("style"),o.innerHTML=".holdon-overlay{position:absolute;left:0;top:0;bottom:0;right:0;background:#000;background:rgba(0,0,0,.48);z-index:999;cursor:wait}.holdon-content{width:50px;height:57px;position:absolute;top:50%;left:50%;margin:-21px 0 0 -25px}.sk-rect{width:50px;height:40px;text-align:center;font-size:10px}.sk-rect>div{background-color:#b3b3b3;height:100%;width:6px;display:inline-block;-webkit-animation:sk-rect-anim 1.2s infinite ease-in-out;animation:sk-rect-anim 1.2s infinite ease-in-out;margin-left:2px}.sk-rect .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.sk-rect .rect3{-webkit-animation-delay:-1s;animation-delay:-1s}.sk-rect .rect4{-webkit-animation-delay:-.9s;animation-delay:-.9s}.sk-rect .rect5{-webkit-animation-delay:-.8s;animation-delay:-.8s}@-webkit-keyframes sk-rect-anim{0%,100%,40%{-webkit-transform:scaleY(.4)}20%{-webkit-transform:scaleY(1)}}@keyframes sk-rect-anim{0%,100%,40%{transform:scaleY(.4);-webkit-transform:scaleY(.4)}20%{transform:scaleY(1);-webkit-transform:scaleY(1)}}.holdon-white.holdon-overlay{background:rgba(255,255,255,.9)}.holdon-white.holdon-overlay .sk-rect>div{background-color:#cecece}",n.head.appendChild(o),i[t]=function(e,t,n){internalApi.pushCommand(e,t,n)},o=n.createElement(v),m=n.getElementsByTagName(v)[0],o.async=1,o.src=l+"/v-"+getCacheDate()+".js",m.parentNode.insertBefore(o,m);
    }
  })(window, document, 'script', 'https://inviton-cdn.azureedge.net/clientside-api/js/api-loader', 'invitonApi');
</script>

<script>
    invitonApi('ticketForm', 'renderForm', {
        context: document.getElementById('invitonApiWrap'),
        ticketDates: [{
            ticketDateId: 19667,
            ticketCount: 2
        }]
    })
</script>
This results into following widget:

In this more advanced example we will first obtain the ticketing data, create a very simple ticket selector, prevent form from submitting and set the bootstrap render mode

The form is, again, rendered by using the renderForm method of the ticketForm namespace (click the args member type to see full documentation, or click here)

  • Code-way to render form (no attributes needed). Renders form based on the parameters provided

    Parameters

    Returns void


Code is following:

<div id="invitonApiWrap" class="invitonApiWrap" style="min-height:100px;width:100%;position:relative"></div>
<div id="buttonContainer"></div>

<script>
  (function (i, n, v, l, t, o, m) {
    if (!i['InvitonApiObject']) {
      var cmdQueue=[],internalApi={showLoading:function(e){var n="";function t(e,t){n+='<div class="'+e+'">'+(t?"</div>":"")}t("holdon-content"),t("sk-rect");for(var a=1;a<6;a++)t("rect"+a,!0);n+="</div></div>";var i=e.length?e:[e];for(a=0;a<i.length;a++){var o=document.createElement("div");o.setAttribute("class","holdon-white holdon-overlay holdon-element"),o.innerHTML=n,i[a].appendChild(o)}},pushCommand:function(e,t,n){null!=n&&(n.targetElement||n.targetElementArr)&&0!=n.blockElem&&internalApi.showLoading(n.targetElementArr||n.targetElement),cmdQueue.push([e,t,n])},getQueue:function(){return cmdQueue}},getCacheDate=function(){var e=new Date,t=e.getMinutes();return 1==Math.abs(t%2)&&(e=new Date(e.getTime()-6e4)),e.setSeconds(0),e.setMilliseconds(0),e.getTime()};i.InvitonApiObject=internalApi,o=n.createElement("style"),o.innerHTML=".holdon-overlay{position:absolute;left:0;top:0;bottom:0;right:0;background:#000;background:rgba(0,0,0,.48);z-index:999;cursor:wait}.holdon-content{width:50px;height:57px;position:absolute;top:50%;left:50%;margin:-21px 0 0 -25px}.sk-rect{width:50px;height:40px;text-align:center;font-size:10px}.sk-rect>div{background-color:#b3b3b3;height:100%;width:6px;display:inline-block;-webkit-animation:sk-rect-anim 1.2s infinite ease-in-out;animation:sk-rect-anim 1.2s infinite ease-in-out;margin-left:2px}.sk-rect .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.sk-rect .rect3{-webkit-animation-delay:-1s;animation-delay:-1s}.sk-rect .rect4{-webkit-animation-delay:-.9s;animation-delay:-.9s}.sk-rect .rect5{-webkit-animation-delay:-.8s;animation-delay:-.8s}@-webkit-keyframes sk-rect-anim{0%,100%,40%{-webkit-transform:scaleY(.4)}20%{-webkit-transform:scaleY(1)}}@keyframes sk-rect-anim{0%,100%,40%{transform:scaleY(.4);-webkit-transform:scaleY(.4)}20%{transform:scaleY(1);-webkit-transform:scaleY(1)}}.holdon-white.holdon-overlay{background:rgba(255,255,255,.9)}.holdon-white.holdon-overlay .sk-rect>div{background-color:#cecece}",n.head.appendChild(o),i[t]=function(e,t,n){internalApi.pushCommand(e,t,n)},o=n.createElement(v),m=n.getElementsByTagName(v)[0],o.async=1,o.src=l+"/v-"+getCacheDate()+".js",m.parentNode.insertBefore(o,m);
    }
  })(window, document, 'script', 'https://inviton-cdn.azureedge.net/clientside-api/js/api-loader', 'invitonApi');
</script>

<script>
    invitonApi('ticketForm', 'getTicketingData', {
        eventIds: [10500],
        onSuccess: function (data) {
            var htmlBuilder = '';
            data.TicketDates.forEach(function (item) {
                if (item.OnSale && item.Remaining > 0) {
                    htmlBuilder += '<button onclick="showFormForId(' + item.Id + ')">' + item.Name + '</button><br>'
                }
            });

            document.getElementById('buttonContainer').innerHTML = htmlBuilder;
            inviton.elementBlocker.hideLoading(document.getElementById('invitonApiWrap'));
        }
    }) 

    window['showFormForId'] = function (ticketDateId) {
        var count = Number(prompt('Please enter how many tickets do you want'));
        if (isNaN(count)) {
            return;
        }

        invitonApi('ticketForm', 'renderForm', {
            language: 'en', //sk, en, cs, de, lv, pl, auto [determines based on browser]
            renderSettings: {
                renderMode: 'bootstrap'
            },
            ticketDates: [{
                ticketDateId: ticketDateId,
                ticketCount: count
            }],
            onBeforeFormSubmit: function (data) {
                if (!confirm('Are you sure everything is correct?')) {
                    return false;
                }
            },
            onFormRendered: function (result, message) {
                if (result != 0) {
                    //Handler if the form is not loaded
                }
            },
            onPaymentProcessComplete: function (paymentData) {
                if (paymentData.type == 1) {
                    //Handler for wire transfer
                }
            },
            context: document.getElementById('invitonApiWrap') //Target HTML element where this should be rendered
        });
    }
</script>
This results into following widget:

1. The ID can be obtained on the Inviton portal. Click on the Code icon on desired ticket


2. Copy the TicketDateId for usage on the form