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.


Creating a widget

You can create a widget 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=ffffff" 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.

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}'>View Tickets</button>
Did this answer your question?