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.