Widget Installation
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>
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
| ID | Description | Values | Required | Editable |
|---|---|---|---|---|
| id | Unique identifier of container | true | true | |
| class | Class of container | ob-widget | true | false |
| data-module | Identifier of Venue's widget | ob-venue-widget | true | false |
| data-channel | Channel url path | true | true | |
| data-eventid | Event identifier | true | true | |
| data-sessionid | Session identifier | true | true | |
| data-language | Language code | true | true | |
| data-hidepriceinfo (see fig.1) | Hide slider and price dropdown | Default: falseHide: true | false | true |
| data-hidepricesbox (see fig.1) | Hide price dropdown | Default: falseHide: true | false | true |
| data-version | Widget's version | 2 | true | false |
| data-activatesales (see fig.1) | Activate promotion block | Default: falseHide: true | false | true |
| data-forceview | Force default view of venue | Default: 0Desktop: 1Mobile: 2 | false | true |
| data-hidemaxtickets (see fig.1) | Hide information about limit of tickets can buy | Default: falseHide: true | false | true |
| data-hidemembers | Hides members sales module if present | Default: falseHide: true | false | true |
| data-token | Token of shopping cart of REST2 | Default: falseHide: true | false | true |
| data-release | Release shopping cart each time widget loads | Default: falseRelease: true | false | true |
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)
}
Callable Events
Once the widget is fully loaded we can make predefined event calls to it.
Cart Update
In order to update the shopping cart of the widget without having to reload the whole component we can call the event update like this:
_onebox.ob_venue_widget.call('update');
This method has no return value, it will just update the cart in the widget asynchronously
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.
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.