Integrating the FIXR Ticket shop into your website is quick and flexible. You can use the basic setup to embed the widget effortlessly, or dive into the advanced setup to customise it with our client-side API for greater control.

Basic Setup¶

Create a ticket shop on the FIXR Organiser.

Paste the provided code snippet in the body of your HTML page where you want the ticket shop to display.

<script
  src="https://web-cdn.fixr.co/scripts/fixr-shop-widget.v1.min.js"
  data-fixr-shop-id="<replace_with_your_ticketshop_id>"
  data-fixr-theme="light"
></script>

New Feature!

You can now make a majority of styling and layout changes to your ticket shop directly in the FIXR Organiser!

Read about it here.

Ticketshop configuration in the FIXR Organiser

Advanced Setup¶

A number of attributes can be set on the script tag to further customise the ticket shop. The below snippet shows the default values.

<script
  src="https://web-cdn.fixr.co/scripts/fixr-shop-widget.v1.min.js"
  data-fixr-shop-id="XXXXXXXX-XXX-XXXX-XXXX-XXXXXXXXXXXX"
  data-fixr-theme="light"
  data-next-event-heading="Next Event"
  data-upcoming-events-heading="Upcoming Events"
  data-name-filter=""
  data-description-filter=""
  data-after-filter=""
  data-before-filter=""
></script>

Attribute	Description
`data-fixr-shop-id`	Ticket shop ID
`data-fixr-theme`	The color scheme to be used ("light" or "dark")
`data-next-event-heading`	The text displayed above the first upcoming event
`data-upcoming-events-heading`	The text displayed above the rest of the upcoming events
`data-name-filter`	Only show events with names containing the provided string
`data-description-filter`	Only show events with descriptions containing the provided string
`data-after-filter`	Only show events with start dates after the provided date (UTC Timestamp), e.g. 1564481355
`data-before-filter`	Only show events with start dates after the provided date (UTC Timestamp), e.g. 1564481355

The above attributes can also be set as query string parameters:

<script src="https://web-cdn.fixr.co/scripts/fixr-shop-widget.v1.min.js?fixrShopId=XXXXXXXX-XXX-XXXX-XXXX-XXXXXXXXXXXX&fixrTheme=dark"></script>

Styling¶

You can override styles by targeting the .fixr-events-widget element and its children. Override the below default CSS variables to create your own theme.

<style>
  .fixr-events-widget[data-theme="light"] {
    /* Colors */
    --fixr-primary: #d0021b;
    --fixr-on-primary: #e9eaeb;
    --fixr-body: transparent;
    --fixr-on-body: inherit;
    --fixr-background: #f7f7f7;
    --fixr-on-background: #1e1e1e;
    --fixr-on-background-subdued: #6e6e6e;
    --fixr-on-background-subtle: #dddddd;
    --fixr-surface: #ffffff;
    --fixr-on-surface: #1e1e1e;
    --fixr-on-surface-subdued: #6e6e6e;
    --fixr-on-surface-subtle: #e9eaeb;
    --fixr-input: #fff;
    --fixr-on-input: #2e2e2e;
    --fixr-input-border: #dddddd;
    --fixr-input-placeholder: #7f7f7f;
    --fixr-focus: #289df4;
    --fixr-image-placeholder: #e9eaeb;
    --fixr-scrollbar: #b3b3b3;
    --fixr-scrollbar-background: var(--fixr-background);
    --fixr-overlay: rgba(0, 0, 0, 0.2);

    /* shapes */
    --fixr-surface-border-radius: 4px;
    --fixr-button-border-radius: 4px;
    --fixr-input-border-radius: 4px;
    --fixr-surface-box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);

    /* typography */
    --fixr-body-font: "Montserrat", inherit;
    --fixr-heading-font: "Montserrat", inherit;
    --fixr-button-font: inherit;
    --fixr-button-font-size: 14px;
    --fixr-button-font-weight: bold;
    --fixr-button-text-transform: none;
  }
</style>

Analytics¶

Meta Pixel¶

If you use a Meta Pixel to track user actions on your website, you can enable the Meta Pixel plugin to forward events from the Ticketshop to your site's pixel. Simply add the data-enable-pixel attribute to the script tag as shown below:

<script
  src="https://web-cdn.fixr.co/scripts/fixr-shop-widget.v1.min.js"
  data-fixr-shop-id="XXXXXXXX-XXX-XXXX-XXXX-XXXXXXXXXXXX"
  data-enable-pixel
></script>

When running in widget mode, and this plugin is enabled, the events will be suppressed on fixr.co and be fired on your own domain.

Google Tag Manager¶

To forward analytics events from the Ticketshop to your website's data layer using Google Tag Manager,

<script
  data-enable-gtm
  src="https://web-cdn.fixr.co/scripts/fixr-shop-widget.v1.min.js"
  data-fixr-shop-id="XXXXXXXX-XXX-XXXX-XXXX-XXXXXXXXXXXX"
></script>

For detailed information on setting up triggers, variables, and tags in Google Tag Manager to handle these events, please refer to our dedicated GTM integration guide.

API¶

Provide a callback to the script tag to get access to the api object.

<script>
  function onShopApiReady(api) {
    /* 
      Updates the ticket shop to show events with names containing "football"
      and descriptions containing "world cup"
    */
    api.setFilter({
      name: "football",
      description: "world cup",
    });

    // log the array of event objects
    console.log(api.events);
  }
</script>
<script
  src="https://web-cdn.fixr.co/scripts/fixr-shop-widget.v1.min.js?callback=onShopApiReady"
  data-fixr-shop-id="XXXXXXXX-XXX-XXXX-XXXX-XXXXXXXXXXXX"
  data-fixr-theme="light"
></script>

API Properties¶

events¶

An array of event objects. Useful for when using the widget in headless mode.

API Methods¶

setFilter¶

A function to filter the events that are displayed in the widget. Takes a plain object as its argument, which can contain one or more of the following properties:

api.setFilter({ name, description, before, after })

Property	Type	Description
`name`	string	Event name to filter by
`description`	string	Event description to filter by
`before`	number	Start date before (UTC Timestamp)
`after`	number	Start date after (UTC Timestamp)

clearFilter¶

Clears all active filters.

api.clearFilter()

showEventDetails¶

Opens the event details for a single event. Takes the id of the event as parameter.

api.showEventDetails(eventId)

Parameter	Type	Description
`eventId`	number	id of the event to view

hideEventDetails¶

Hides the acitve event details modal.

api.hideEventDetails()

showCheckout¶

The showCheckout function lets you open the checkout modal for a specific event. Call this function with the appropriate event ID, and the modal will open up, allowing your users to purchase tickets and complete their transactions.

api.showCheckout(eventId)

Parameter	Type	Description
`eventId`	number	id of the event

Examples¶

Basic integration with some custom styles¶

<style>
  .fixr-events-widget[data-theme="light"] {
    --fixr-primary: #cc013e;
    --fixr-on-primary: #fff;
  }
</style>

<script
  src="https://web-cdn.fixr.co/scripts/fixr-shop-widget.v1.min.js"
  data-fixr-shop-id="<replace_with_your_ticketshop_id>"
  data-fixr-theme="light"
></script>

Deep link to the event details of a specific event¶

Automatically open the event details of a specific event when page loads. The code below reads the eventId parameter from the url of the host site (http://example.com/somepage/?eventId=XXXXX) and displays the event details modal as soon as the widget has loaded.

<script>
  window.fixrCallback = (api) => {
    var eventId = parseInt(
      new URLSearchParams(location.search).get("eventId"),
      10
    );
    if (eventId) {
      api.showEventDetails(eventId);
    } else {
      console.warn("Could not parse eventId from url");
    }
  };
</script>
<script
  src="https://web-cdn.fixr.co/scripts/fixr-shop-widget.v1.min.js?callback=fixrCallback"
  data-fixr-shop-id="56bfd482-6b7f-4a39-a8ff-1959526ee762"
  data-fixr-theme="dark"
></script>

How to display only "featured" events in your ticket shop¶

Displaying only "featured" events can be achieved by adding a filter to your ticket shop. This method can also be used to display events based on any specific word or phrase in their descriptions.

Add the ticket shop code with a a data-description-filter attribute set to "featured". This will pull any of your events that have descriptions containing the word "featured".

<script
  data-description-filter="featured"
  src="https://web-cdn.fixr.co/scripts/fixr-shop-widget.v1.min.js"
  data-fixr-shop-id="XXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
  data-fixr-theme="light"
></script>

Go to FIXR Organiser and edit the event descriptions for the events you want to feature by adding the word "featured" anywhere in the event description.
Reload the page containing the ticket shop and you should now see your featured events.