Skip to main content

Widget Installation

Download PDF Manuals

Obtain your widget HTML example#

You can simulate and get your widget html in the Simulator section

<!DOCTYPE html> <html lang="es">     <head>         <meta charset="iso-8859-1">        <meta name="description" content="Onebox Widget Test">         <meta name="keywords" content="Onebox, widget">        <title>Onebox Widget Test</title>         <script type="text/javascript"             src="https://portal-pre.oneboxtickets.net/{channel-url-path}/widgets/ob-widgets?rootPath=https://portal-pre.oneboxtickets.net">         </script>         <script type="text/javascript">             window.onload = function ()             {                 _onebox.moduleLoader.loadWidget("widget-container");             }         </script>     </head>     <body>         <div             id="widget-container"             class="ob-widget"             data-module="ob-venue-widget"             data-channel="{channel-url-path}"             data-eventid="{event-id}"             data-sessionid="{session-id}"             data-language="en_US"             data-version="2"         />     </body> </html>

Steps for integration#

In order to integrate widget with your site, you should follow 2 easy steps as follow.

Add in HEAD#

You need add between <head>...</head> the following code:

<script type="text/javascript"     src="https://proticketing.com/{channel-url-path}/widget/ob-widgets"></script>
channel-url-path is the url path given to the channel in Onebox's platform

Add in the BODY#

In page's body, between tags <body>...</body>, you need add a <div> to contain widget and needed attributes.

<div    id="widget-container"    class="ob-widget"     data-module="ob-venue-widget"     data-channel="[channel-url-path]"     data-eventid=""     data-sessionid=""     data-language=""     data-version="2"    data-hidepriceinfo=""     data-hidepricesbox=""     data-hidemaxtickets=""     data-activatesales=""    data-forceview="" />

Widget Options#

IDDescriptionValuesRequiredEditable
idUnique identifier of containertruetrue
classClass of containerob-widgettruefalse
data-moduleIdentifier of Venue's widgetob-venue-widgettruefalse
data-channelChannel url pathtruetrue
data-eventidEvent identifiertruetrue
data-sessionidSession identifiertruetrue
data-languageLanguage codetruetrue
data-hidepriceinfo
(see fig.1)
Hide slider and price dropdownDefault: false
Hide: true
falsetrue
data-hidepricesbox
(see fig.1)
Hide price dropdownDefault: false
Hide: true
falsetrue
data-versionWidget's version2truefalse
data-activatesales
(see fig.1)
Activate promotion blockDefault: false
Hide: true
falsetrue
data-forceviewForce default view of venueDefault: 0
Desktop: 1
Mobile: 2
falsetrue
data-hidemaxtickets
(see fig.1)
Hide information about limit of tickets can buyDefault: false
Hide: true
falsetrue
data-tokenToken of shopping cart of REST2falsetrue
data-releaseRelease shopping cart each time widget loadsDefault: false
Release: true
falsetrue

Steps for Execution#

Widget Load#

To load widget we need use following javascript call. This call should execute when we have HTML element container of widget loaded and visible, otherwise it won't respond correctly and widget won't show.

_onebox.moduleLoader.loadWidget(containerId);

The containerId is the ID of div container. For example: "widget-container"

Note: If we try to access Widget with a unavailable session, because it's not selling or channel is not autorized to sell it, it will show an error message ”Unavailable session”.

Listen to Events#

Venue's widget have 3 event which you can subscribe to receive information:

1. Shopping cart's Update#

If customer subcribes this event, you will get information everytime shopping cart changes (adding seats, remove seats, applying promotions, etc).

pubsub.subscribe('/cart/updated', function(e) { console.log(e.data) })
{     "client": null,     "currency": "EUR",     "delivery Costs": null,     "delivery Method": null,     "insurance": null,     "shopping CartItem": [],     "time Left": 598,     "token": "00000000000000000000000000000000",     "totalPriceBreakdown": {}}

See complete JSON at ANNEX 1

2. Shopping cart is expired#

The customer subscribe, when shopping cart expires, customer will get a notification of event “cart/expired”.

pubsub.subscribe('/cart/expired', function(e) { e.data })

3. Seat selection with blocking promotion#

If customer subscribes to this event, customer will receive information if selected seat are associated to blocking promotion/s (promotion which must apply to continue).

pubsub.subscribe('/sales/mandatory', function(e) { console.log(e.data) })
{    "mandatorySales": (true || false)}

ANNEX 1#

The object which represents shopping cart in the property e.data of subscriber presents following structure:

{    "client": null,     "currency":"EUR",     "deliveryCosts": null,     "deliveryMethod": null,     "insurance": null,    "shoppingCartItem": [{        "automaticPromotion": null,         "discount": null,         "discountActivator": null,         "id": 1234,         "itemWarning":[],        "modifyingBookingOrderCode": null,        "operationsAllowed": {            "booking": false,             "issue": true,             "purchase": true,        },        "priceBreakdown": {            "automaticPromotion": null,             "basePrice": 15,             "charges": {                "charge":[                    {                        "type": "CHANNEL_CHARGE",                         "value": 0                    },                    {                        "type": "PROMOTER_CHARGE",                         "value": 0                    }                ]            },            "deliveryCosts": 0,             "finalPrice": 15,             "insurance": null,             "manualDiscount": null,            "manualPromotion": null,             "taxes": null,        },        "productData": null,         "productld": null,         "promotion": null,         "promotionActivator": null,         "ticketData": {            "accessibility": "NORMAL",             "customer": null,             "entityld": 111,             "idTicketActivityType": null,             "idVisitorGroup": null,             "notNumberedAreald": null,             "notNumberedAreaName": null,             "numSeat":"16",             "priceZoneld": 138,             "rowBlock":"1",             "rowld": 307,             "rowName": "6",            "rowOrder": 15,            "seatId": 12345678,            "seatType": "NUMBERED",            "sectorId": 138,            "sectorName": "Sector Name",            "sessionId": 123,            "ticketType": "GENERAL",            "viewId": 151,            "visibility": "NORMAL",        },        "type": "TICKET",    }],    "timeLeft": 599,    "token": "000000000000",    "totalPriceBreakdown": {},    "visitorGroup": []}

ANNEX 2#

The safari browser (mac/iphone) have, by default, a privacy policy more restrictive than the rest of browsers. This blocks cookies from third party domain at Safari. Safari consider a domain is from third party when the user doesn't have any cookie of this domain saved in memory, and this domain is trying to load in an iframe (in stead of a direct load from url).

To avoid this problem a walkaround is implemented, if widget detect that it can't write its cookies (which is needed to work correctly) in the browser, it will show following warning message.

Warning Message

If safari user click on the link it will open a pop-up which will stablish settings to allow cookies write from domain of widget and it will close automaticlly. And continues to selection of seats as usual.

PDF Manuals#

Download Spanish ManualDownload English Manual