Skip to main content

Widget installation

The widget is a utility which offers graphic functionalities to do selection of seats in an easy way, using renders from Onebox's system, and also allows managing promotions linked to selected seats.

Obtain your widget HTML example​

You can simulate a widget html in the Simulator section.

<!DOCTYPE html> 
<html lang="es"> 
    <head> 
        <title>Onebox Widget v2 Test</title> 
        <script type="module" src="https://widget.oneboxtds.com/widget-sdk-v1.js">
        </script>
        <script>
            window.addEventListener('DOMContentLoaded', () => {
                //Widget events
                onebox.widget.getModule('core').onOrderChange(e => console.log('order', e));
                onebox.widget.getModule('core').onOrderExpired(e => console.log('order expired', e));
                onebox.widget.getModule('core').onError(e => console.log('error', e));
                onebox.widget.getModule('viewer').onElementClick(e => console.log('click', e));

                applyConfig();
            });

            function applyConfig() {
                window.onebox.widget.init({
                    channelId: {channelId},
                    sessionId: {sessionId},
                    lang: 'es-ES',
                    orderId: null,
                    releaseBasketItems: false
                });
            }
        </script>
    </head> 
    <body> 
        <ob-widget-seats-selection
            with-summary
            with-summary-promos
            summary-promos-mode="MODAL"
            with-view-navs
            price-display-mode="BASE">
        </ob-widget-seats-selection>
    </body> 
</html>

Steps for integration​

In order to integrate the widget in your site, you should follow these steps:

Add the widget script to your page​

You need to load the widget script in your page.

You can add the script to your page between <head>...</head> as follows:

<script type="module" 
    src="https://widget.oneboxtds.com/widget-sdk-v1.js">
</script>

Init widget​

When the script has loaded successfully, we can init the widget with several configuration properties. To do this, we can access onebox.widget in the Window object as shown below:

window.onebox.widget.init({
    channelId: 1752,
    sessionId: 509945,
    lang: 'es-ES',
    orderId: null,
    releaseBasketItems: false
});
NameDescriptionData typeRequired
channelIdThe id of the channel the widget will usenumbertrue
sessionIdThe id of the session the widget will displaynumbertrue
langThe language the widget will usestring with a valid format (E.g. "es", "en-UK" or "ca-ES-valencia")false
orderIdThe orderId the widget will use, if neededstringfalse
releaseBasketItemsIf the order has items, release them when the widget initsbooleanfalse

Init listeners​

It is possible to add listeners to the various events exposed by the widget. An example:

onebox.widget.getModule('core').onOrderChange(e => console.log('order', e));
onebox.widget.getModule('core').onOrderExpired(e => console.log('order expired', e));
onebox.widget.getModule('core').onError(e => console.log('error', e));
onebox.widget.getModule('viewer').onElementClick(e => console.log('click', e));

You can find more info about the available widget events in the Events section.

Widget components​

In the body of the page, between tags <body>...</body>, you need to add the widget component and the needed attributes. Our widget offers now the components as HTML custom elements/tags that can be implemented separately and with independent configurations. We currently have the following components available:

  • ob-widget-seats-selection: is the standard widget component that includes the venue, the summary, the promos module, etc.
  • ob-widget-selection-summary: this component allows to implement the widget summary independently.

An example of a ob-widget-seats-selection implementation:

<body> 
    <ob-widget-seats-selection
        with-summary
        with-summary-promos
        summary-promos-mode="MODAL"
        with-view-navs
        price-display-mode="BASE">
    </ob-widget-seats-selection>
</body>

The options for these components can be configured using HTML attributes. You can find more info about the available options in the Options section.