Skip to main content

Widget configuration

init() decides what the widget sells, and the attributes of its element decide how it is shown. Try the attributes in the playground.

init() options​

onebox.widget.init({ channelId: 1752, sessionId: 509945, lang: 'en-GB' });
channelIdnumber
Required. Sales channel the widget sells through.
sessionIdnumber
Required. Session to show.
langstring
Language, as es, en-GB or ca-ES-valencia. It must be one of the channel's languages. By default, the channel's default language.
packIdnumber
Pack to sell, for sessions sold as part of a pack.
orderIdstring
Order to resume, as the id received in onOrderChange.
releaseBasketItemsbooleanDefault false
With orderId, empties that order when the widget starts.

init() throws an error when a required option is missing or has the wrong format. Call it again to change the session: channelId and sessionId are always required.

Element attributes​

<ob-widget-seats-selection> shows the venue map, the selection and, optionally, the cart summary. Configure it with HTML attributes:

<ob-widget-seats-selection with-summary with-view-navs price-display-mode="FINAL"></ob-widget-seats-selection>

To enable a boolean attribute, add it; to disable one that is enabled by default, set it to "false".

Summary​

with-summarybooleanDefault false
Show the cart summary next to the map.
with-summary-promosbooleanDefault false
Show the available promotions in the summary.
summary-promos-modeMODAL | LISTDefault MODAL
Show promotions behind a button that opens a dialog, or as a list.

Venue map​

with-tooltipbooleanDefault true
Show a tooltip when hovering over the map.
with-modalbooleanDefault true
Show dialogs when clicking the map, for example to choose a rate.
show-fixed-prices-in-mapbooleanDefault false
Show the price of each zone as a label on the map.
initial-view-codestring
View to open first, instead of the venue's main view.

Views​

For venues divided into views, such as the zones of a stadium, when the channel is configured to navigate by views.

with-view-navsbooleanDefault false
Show the list of views, to move between them.
is-list-toggleablebooleanDefault false
On narrow screens, add a button to show or hide that list.

Prices and selection​

price-display-modeBASE | FINAL | NETDefault BASE
BASE: with taxes. FINAL: with taxes and fees. NET: without taxes.
force-automatic-selectionbooleanDefault false
Select by price zone, without the map, even for venues with a seating map.

Summary in another place​

To show the cart summary somewhere else in your page, use <ob-widget-selection-summary> together with the seat selection, without with-summary:

<ob-widget-seats-selection></ob-widget-seats-selection>
<aside>
  <ob-widget-selection-summary with-summary-promos summary-promos-mode="LIST"></ob-widget-selection-summary>
</aside>

It accepts with-summary-promos and summary-promos-mode, as described above.

Layout​

The widget adapts to the width of its element: from 700 px it shows the map and the summary side by side, and below that one above the other. To change its look, see Styling.