Plug-ins and integrations
Tixify Shop - Widget API

23min
Quickstart
To get started with using the Shop Widget, make sure to add the following code to the head or body of your document:
<script src="//widget.shop.openticket.tech/latest/widget.js"></script>
Then, initialize the shop widget with the following code:
if (document.readyState !== 'loading') {
    window.OtShopWidget.init(
        'https://tixify.shop/FILL-IN-SHOP-GUID',
        'FILL-IN-SHOP-GUID'
    );
} else if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', function () {
        window.OtShopWidget.init(
        'https://tixify.shop/FILL-IN-SHOP-GUID',
        'FILL-IN-SHOP-GUID'
    );
    });
} else {
    document.attachEvent('onreadystatechange', function() {
        if (document.readyState !== 'loading') {
            window.OtShopWidget.init(
        'https://tixify.shop/FILL-IN-SHOP-GUID',
        'FILL-IN-SHOP-GUID'
    );
        }
    });
}
Now, reload the page and the shop bubble should be visible in the bottom right corner. The shop is now succesfully initialized.
Customizations
It's possible to change how some things work.
margin
The widget has a default margin of 16px to the top and bottom of the page.
However, the possibility exists that this places the widget on top of other components, such as a fixed header or footer.
By setting a css custom property, these margins can easily be changed. (Note that the variable needs to be visible by the widget and therefore be either on the root or body level.)
:root {
    --ot-shop-widget-margin-top: 96px;
    --ot-shop-widget-margin-bottom: 96px;
}
z-index
The widget has a default position on the z-axis (z-index) of 1050.
This value has intentionally been chosen to NOT be too high as to not limit the developer's options.
However, by setting a css custom property on the main website, this value can be easily changed. (Note that the variable needs to be visible by the widget and therefore be either on the root or body level.)
:root {
    --ot-shop-widget-z-index: 1234;
    --ot-shop-widget-popup-z-index: 1234;
    --ot-shop-widget-button-z-index: 1234;
}

Notification z-index
The widget propagates notifications to the host page so they are always visible.
By default, the z-index of these notifications is determined by the z-index of the widget itself plus 49, to ensure the notifications appear above the widget.
However, by setting a css custom property on the main website, this value can be easily changed. (Note that the variable needs to be visible by the widget and therefore be either on the root or body level.)
:root {
    --ot-shop-widget-notification-container-z-index: 1234;
}
Functions
There are multiple functions that can be called to interact with the shop from outside the shop.
addTicket()
Increases the selection for the specified ticket by 1.
Syntax
window.OtShopWidget.addTicket("b15754c0-0f05-42c4-9ef0-014ca87a90a3");
Parameters
﻿guid﻿
﻿Required. The guid of the ticket that needs to be added.
removeTicket()
Decreases the selection for the specified ticket by 1.
Syntax
window.OtShopWidget.removeTicket("b15754c0-0f05-42c4-9ef0-014ca87a90a3");
Parameters
﻿guid﻿
﻿Required. The guid of the ticket that needs to be removed.
addCoupon()
Adds the specified coupon to the shop checkout.
Syntax
window.OtShopWidget.addCoupon("COUPON-CODE");
Parameters
﻿code﻿
﻿Required. The code of the coupon that needs to be added.
removeCoupon()
Removes the specified coupon from the shop checkout.
Syntax
window.OtShopWidget.removeCoupon("COUPON-CODE");
Parameters
﻿code﻿
﻿Required. The code of the coupon that needs to be removed.
open()
Opens the shop widget.
Syntax
window.OtShopWidget.open();
close()
Closes the shop widget.
Syntax
window.OtShopWidget.close();
toggle()
Toggles the visibility of the shop widget popup.
Syntax
window.OtShopWidget.toggle();
Events
There are multiple events. They can be listened to by registering a callback.
widgetToggled()
Is called when the widget is opened or closed. Receives a boolean which indicates if the widget is opened or closed.
Syntax
window.OtShopWidget.widgetToggled((opened) => {
    // Put your code here
});
Callback Parameters
Name
Type
Example value
opened
Boolean
true
cartTicketsUpdated()
Is called when the ticket selection changes in the shop. Receives an object containing the count of selected tickets.
Syntax
window.OtShopWidget.cartTicketsUpdated((tickets) => {
    // Put your code here
});
Callback Parameters
Name
Type
Example value
tickets
Object
{
    "b15754c0-0f05...": {
        "selected": 3
    }
}
orderTotalUpdated()
Is called when the total order price changes in the shop. Receives the total price formatted according to the shops locale.
Syntax
window.OtShopWidget.orderTotalUpdated((totalPrice) => {
    // Put your code here
});
Callback Parameters
Name
Type
Example value
totalPrice
String
€ 15,20
rawOrderTotalUpdated()
Is called when the total order price changes in the shop. Receives the total price in minor units and the shops currency.
Syntax
window.OtShopWidget.rawOrderTotalUpdated((totalPrice, currency) => {
    // Put your code here
});
Callback Parameters
Name
Type
Example value
totalPrice
Integer
1520
currency
String
EUR
﻿
Thanks for reading, if you have feedback or questions about these guides, please contact us at [email protected] .
Name	Type	Example value
opened	Boolean	true
Name	Type	Example value
tickets	Object	{ "b15754c0-0f05...": { "selected": 3 } }
Name	Type	Example value
totalPrice	String	€ 15,20
Name	Type	Example value
totalPrice	Integer	1520
currency	String	EUR
Updated 25 Mar 2024
Did this page help you?
How do I sell tickets on my website?
How do I make use of Sealed Tickets?