Widget SDK
The Widget SDK embeds Onebox's seat selection in your own website: the interactive venue map, the price zones, the promotions and the cart summary. Buyers choose their seats on your page, and you complete the purchase with your own checkout through the Distribution API.
How it works
- Your page loads the SDK script, places a widget element and calls
init()with the sales channel and the session to sell. - The buyer selects seats. The widget creates the order (the cart) and keeps it up to date, and tells your page every time it changes.
- When the buyer is ready to pay, your checkout takes the order
idand completes the purchase with the Distribution API, from Step 4 of the purchase flow.
The widget does not take payments: buyer data, payment and confirmation are always part of your checkout.
Requirements
- A web sales channel. The widget sells through a channel of type Web, which must be active and have the session on sale.
- Your website's domain allowed in the channel. Browsers only let the widget call Onebox from domains the channel allows. Ask your Onebox contact to add the domains where you embed the widget, such as
tickets.example.comor*.example.com, for both the test and the production channel. - Credentials for the Distribution API, to complete the purchase. See Authentication.
- A modern browser. The SDK is an ES module and uses custom elements, so it runs in current versions of Chrome, Edge, Firefox and Safari.
Environments
| Environment | SDK script |
|---|---|
| Test | https://widget.oneboxtds.net/widget-sdk-v1.js |
| Production | https://widget.oneboxtds.com/widget-sdk-v1.js |
Use the channel and session identifiers of the same environment as the script.
Next steps
- Get started: embed the widget in a page step by step.
- Configuration:
init()options and element attributes. - Styling: adapt the widget's colours, font and size.
- API reference: events, methods and data models.
- Playground: try the options and watch the events live.