Ticket widget

The ticket widget lists events, dates and tickets. If a single event is listed with a single date it will only show the tickets. If an event with multiple dates is listed then it will show the calendar first. If multiple events/event brands (item-ids) are listed then the events list will be displayed first.

Setting up the ticket widget

The widget is included using javascript. You can also use self-hosted CSS to change the look and feel of the form. You can also customise the widget further with certain attributes that are listed below.

An example of how your script tag should look:

<script src="https://widgets.designmynight.com/tonic/ticket-widget.min.js?item-ids=<EVENT_ID>"></script>

Customising the Ticket Widget

The URL for the ticket widget can take multiple parameters to allow further customisation and turning on/off features.

The following table shows options available to the ticket widget.

Option Possible values Default value Description
affiliate-id <Affiliate Id> N/A The affiliate id for tracking purposes
tracking-id <Tracking Id> N/A Tracking ids set up in the Sales Tracking menu
theme light/inverse light Use light for light backgrounds and inverse for dark backgrounds (affects fonts colours)
hideTicketDesc true/false false Hide or show the description of the tickets
isModalMode true/false false Show the widget as a “Buy Now” button which opens the widget in a popup
checkoutMode modal/dmn/blank false How the checkout will open on your website
occurrence YYYYMMDD empty Force the ticket widget to open on a specific date

The following table shows more customisable options available for widgets with multiple events on display

Option Possible values Default value Description
hideEventPhotos true/false false Shows or hides the lead photo for each event on the widget
widgetMode default-view/list-view default-view Changes the view of the widget from the default to a more compact, list view
listViewOpen true/false false When list-view is selected, should the ticket widget load opened or closed
sortBy next-date/title next-date What order should events appear on the ticket widget


The following example sample below will display a basic widget:

<!-- START DesignMyNight event widget -->
<script src="https://widgets.designmynight.com/tonic/ticket-widget.min.js?item-ids=546a14bc0df690b92489b1a7"></script>
<!-- END DesignMyNight event widget -->

The following example sample below will display a buy now button:

<!-- START DesignMyNight event widget -->
<script src="https://widgets.designmynight.com/tonic/ticket-widget.min.js?item-ids=546a14bc0df690b92489b1a7&hideTicketDesc=true&theme=inverse&isModalMode=true"></script>
<!-- END DesignMyNight event widget -->