With web integration, it is possible to integrate ticket sales into other websites by using a widget. This way, customers purchase on the website, and the checkout process is integrated into the widget and will not be redirected to the Cooltix site.

When the widget is generated, you have to copy and paste it into the code of the target website to the spot where the widget should appear. The code can be copied anytime in the future, so you can change the colors whenever you want to.

Get a widget code

You can copy the widget code for each event on the admin site:
Event > Invite and promote > Web integration

Widget theme and color

When creating the widget, you can choose if you prefer a light or dark theme, and you can also set your primary color to match your website's style.

Integration type

You can choose between two integrations: showing the ticket list directly on your website or putting a button that opens the ticket list in a new window.

Updating the widget to a new version

The widget automatically updates itself to the latest version, and you don't have to do anything to make it happen. If you are using the old legacy Cooltix widget, then you can create a new widget and replace the old one on your website, and the widget will update itself in the future.

Widget code

Product list directly on the website

Add it to the body section of the page:

<iframe src="https://cooltix.com/widget/event-products/{eventId}?referrerUrl={referrerUrl}&theme=dark&primaryColorHex=5433ff" width="100%" height="100%" frameborder="0"></iframe>

Parameters

eventId is the identifier of the event whose products you want to display. It contains the Cooltix link to the event, which you can copy from the admin interface.

theme (optional): the theme of the widget. Possible values are default (default Cooltix theme) or dark (dark theme). If the theme parameter is not set, the widget will use the default theme.

primaryColorHex (optional): primary color used in the widget. Its value can be a HEX representation of any color without the initial '#'. For example, for color #5433FF, a value of 5433FF should be sent.

referrerUrl (optional): URL of the page from which the widget was opened. After completing the purchase, the customer can navigate to this URL by clicking the back button. If the referrerUrl parameter is not set, the widget will try to automatically determine the URL of the page that opened.
date (optional): The specified occasion is selected for events with multiple occasions when the widget is opened. If the occasion does not exist, is a past occasion, or if it is not specified, then the customer must select an occasion. Date format is 2023-01-20T18:00

Product list pop-up window

Step 1

Add to page head section:

<script src="https://static.cooltix.com/widget.js" defer></script>

Step 2

In the body section of the page, add the following:

<button data-cooltix-event-products="{eventId}" cooltix-data-referrerUrl="{referrerUrl}" cooltix-data-theme="default" cooltix-data-primaryColorHex="5433ff">View Tickets</button>

Parameters

eventId is the identifier of the event whose products you want to display. It contains the Cooltix link to the event, which you can copy from the admin interface.

data-cooltix-theme (optional): the theme of the widget. Possible values are default (default Cooltix theme) or dark (dark theme). If the data-cooltix-theme parameter is not set, the widget will use the default theme.

data-cooltix-primary-color-hex (optional): primary color used in the widget. Its value can be a HEX representation of any color without the initial '#'. For example, for color #5433FF, a value of 5433FF should be sent.

data-cooltix-referrerUrl (optional): URL of the page from which the widget was opened. After completing the purchase, the customer can navigate to this URL by clicking the back button. If the data-cooltix-referrerUrl parameter is not set, the widget will try to automatically determine the URL of the page that opened.
data-cooltix-date (optional): The specified occasion is selected for events with multiple occasions when the widget is opened. If the occasion does not exist, is a past occasion, or if it is not specified, then the customer must select an occasion.

Tracking Pixel events with widget

Within the widget, tracking codes are initialized if they are set in the admin interface. As the widget uses an iframe, additional settings are required for Google Analytics to allow events to be included in the tracking code embedded in the host page. No additional settings are required for Meta Pixel.

Set up Google Analytics widget tracking

To receive events, your site must subscribe to events of type 'message' and forward them to Google Analytics. The example code below will forward all e-commerce events we send, but this can be further filtered by checking the event names.

In case of using gtag.js

<script>
window.addEventListener('message', event => {
if (event.data.ecommerce) {
gtag('event', event.data.event, event.data.ecommerce);
}
});
</script>

In case of using Google Tag Manager

For iFrame events to be sent to Analytics via Tag Manager, three tags are required:

Which extracts the events from iFrame. This runs on every page load.
Which initializes GA4. This runs on every page load.
Which sends e-commerce events from the dataLayer to GA4. This only runs for e-commerce events.

1. Extracting the events from iFrame

Add a custom HTML tag in Google Tag Manager with the code below, and use "All Pages - Page View" as a trigger.

<script>
window.addEventListener('message', event => {
if (event.data.ecommerce) {
window.dataLayer.push({ ecommerce: null });      window.dataLayer.push(event.data);
}
});
</script>

2. initialize GA4

Add a GA4 Configuration tag in Google Tag Manager and use "All Pages - Page View" as a trigger. This step may already have been done if you added GA4 earlier to the site.

3. sends e-commerce events from the dataLayer to GA4

Add a GA4 Event tag in Google Tag Manager. Use {{Event}} as event name, and Custom event as a trigger, with view_item|view_item_list|select_item|add_to_cart|remove_from_cart|view_cart|begin_checkout|add_payment_info|add_shipping_info|purchase as event name.