Ticketshop Integration

Automatically list your FIXR events on your own website.

link-integration

Simple integration

Create a ticket shop on the FIXR Organiser platform.

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="XXXXXXXX-XXX-XXXX-XXXX-XXXXXXXXXXXX"
  data-fixr-theme="light"
></script>

Customisation

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>

Advanced integration

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>

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

Listening to events

If you need to respond to interactions within the widget or track custom analytics, you can take advantage of the events that are emitted via the postMessage API. By listening for these events, you can trigger specific actions or gather valuable data about how users are interacting with your widget.

window.addEventListener("message", (event) => {
  console.log(`Received message ${event.data.message}`);
  console.log("Data: ", event.data);
});

Events

`fixr.widget:loaded`

Triggered when the widget has fully loaded and rendered.

Property	Type	Description
`message`	string	Message type (`fixr.widget:loaded`)
`name`	string	Name of sender window

`fixr.widget:viewEventDetailsClicked`

Triggered whenever a user clicks on the button to view event details.

Property	Type	Description
`message`	string	Message type (`fixr.widget:viewEventDetailsClicked`)
`name`	string	Name of sender window
`event`	object	Event details

`fixr.widget:ticketsViewed`

Triggered when user views the available tickets for an event.

Property	Type	Description
`message`	string	Message type (`fixr.widget:ticketsViewed`)
`name`	string	Name of sender window
`eventName`	string	Name of the event
`venueName`	string	Name of the venue

`fixr.widget:ticketSelected`

Triggered when user selects a ticket in the checkout modal.

Property	Type	Description
`message`	string	Message type (`fixr.widget:ticketSelected`)
`name`	string	Name of sender window
`ticketTypeName`	string	Name of the ticket type
`eventName`	string	Name of the event
`venueName`	string	Name of the venue

`fixr.widget:checkout`

Triggered when a user reserves tickets within the widget, prior to the payment step.

Property	Type	Description
`message`	string	Message type (`fixr.widget:checkout`)
`name`	string	Name of sender window
`ticketName`	string	Name of the ticket
`eventName`	string	Name of the event
`venueName`	string	Name of the venue
`ticketPrice`	number	Price of the ticket
`bookingFee`	number	Booking fee
`ticketsNum`	number	Number of tickets
`currency`	string	Currency (e.g “GBP”)
`referral`	string	Referrer (if any)

`fixr.widget:purchaseCompleted`

Triggered when a user successfully completes a purchase within the widget. At this point, the payment has been processed and a confirmation email has been sent to the user.

Property	Type	Description
`message`	string	Message type (`fixr.widget:purchaseCompleted`)
`name`	string	Name of sender window
`eventName`	string	Name of the event
`venueName`	string	Name of the venue
`ticketTypeName`	string	Name of the ticket
`ticketPrice`	number	Price of the ticket
`bookingFee`	number	Booking fee
`numberOfTicket`	number	Number of tickets
`currency`	string	Currency (e.g “GBP”)
`referral`	string	Referrer (if any)

Headless mode

If you’d like complete control over the appearance of your events, you can put the widget in headless mode by adding the “headless=true” parameter to the script tag. In this mode, the widget won’t render anything, and you’ll need to manually invoke the client-side API methods to display event details or available tickets.

<script src="https://web-cdn.fixr.co/scripts/fixr-shop-widget.v1.min.js?headless=true&callback=fixrApi" data-fixr-shop-id="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"></script>

Special Cases

Wix

Wix restricts the execution of external scripts within their pages. Therefore, the only way to incorporate the widget is by embedding it inside an iframe (a page within a page). You’ll need to carefully adjust the iframe size to ensure it functions properly across various device sizes.

Add an Embed HTML element from the element menu.
Select Code in the HTML settings.
You must then wrap your embed code in a <div> element for the ticketshop to load.
Add any custom styles inside a <style> element inside the iframe:

<style>
  * {
    font-family: sans-serif;
  }

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

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

Example integrations

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.