Link Integration

Sell tickets without customers leaving your website.

Detects any links to a FIXR event page (https://fixr.co/event/*) and shows a ticket selection popup when clicked.

Basic integration

Installation

Paste the provided code snippet in the body of your HTML:
```
<script src="https://web-cdn.fixr.co/scripts/fixr-checkout-widget.v1.min.js"></script>
```
For page load time reasons, best to place it just above the closing </body> tag.
Add a link to a FIXR event page in the HTML of your page:
<a href="https://fixr.co/event/<event_id>">View event</a>

That’s it! Any anchor links on your page will now open a modal poppup instead of redirecting to fixr.co

Advanced integration

Theming

Append a theme parameter to the script tag to set the widget to either light or dark mode.

Dark:

<script src="https://web-cdn.fixr.co/scripts/fixr-checkout-widget.v1.min.js?theme=dark"></script>

Light:

<script src="https://web-cdn.fixr.co/scripts/fixr-checkout-widget.v1.min.js?theme=light"></script>

If no theme is set the widget will default to light. Themes can be overridden on individual link tags by appending the same theme parameter directly on the link:

<a href="https://fixr.co/event/<event_id>?theme=dark">View event</a>

Styling

You can override styles by targeting the .fixr-links-widget CSS class. Override the below default CSS variables to create your own theme.

<style>
  .fixr-links-widget {
    /* COLORS */

    /* Primary color, used for primary buttons and links */
    --fixr-primary: #d0021b;

    /* Text and iconography on primary buttons */
    --fixr-on-primary: #e9eaeb;

    /* Page background color */
    --fixr-background: #f7f7f7;

    /* Text and iconography on page backgrounds */
    --fixr-on-background: #1e1e1e;

    /* Subdued text and iconography on page backgrounds */
    --fixr-on-background-subdued: #6e6e6e;

    /* Subtle text and iconography on page backgrounds */
    --fixr-on-background-subtle: #dddddd;

    /* Faint borders and dividers on page backgrounds */
    --fixr-on-background-faint: #dddddd;

    /* Surface color */
    --fixr-surface: #ffffff;

    /* Text and iconography on surfaces */
    --fixr-on-surface: #1e1e1e;

    /* Subdued text and iconography on surfaces */
    --fixr-on-surface-subdued: #6e6e6e;

    /* Subtle text and iconography on surfaces */
    --fixr-on-surface-subtle: #e9eaeb;

    /* Faint borders and dividers on surfaces */
    --fixr-on-surface-faint: #e9eaeb;

    /* Input element backgrounds */
    --fixr-input: #fff;

    /* Text and iconography on input elements */
    --fixr-on-input: #2e2e2e;

    /* Border color on input elements */
    --fixr-input-border: #dddddd;

    /* Placeholder text color on input elements */
    --fixr-input-placeholder: #7f7f7f;

    /* Focus color for focusable elemens */
    --fixr-focus: #289df4;

    /* Placeholder image color while images are loading */
    --fixr-image-placeholder: #e9eaeb;

    /* Scrollbar color */
    --fixr-scrollbar: #b3b3b3;

    /* Scrollbar background color */
    --fixr-scrollbar-background: var(--fixr-background);

    /* Overlay background on modals */
    --fixr-overlay: rgba(0, 0, 0, 0.2);

    /* SHAPES */

    /* Border radius on surfaces */
    --fixr-surface-border-radius: 4px;

    /* Border radius on buttons */
    --fixr-button-border-radius: 4px;

    /* Border radius on inputs */
    --fixr-input-border-radius: 4px;

    /* Box shadow on surfaces */
    --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>

Callback

The widget will wait for the DOMContentLoaded event before collecting links on a page. If you need to trigger the link collection manually, pass a callback parameter to the script tag to get access to the api object. You can then manually call collectLinks() as required.

<script>
  function myCallback(api) {
    // Manually call collectLinks to hijack all FIXR links on page
    api.collectLinks();
  }
</script>
<script src="https://web-cdn.fixr.co/scripts/fixr-checkout-widget.v1.min.js?callback=myCallback"></script>

Plugins

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 widget to your site’s pixel. Simply add the data-enable-pixel attribute to the script tag as shown below:

<script
  data-enable-pixel
  src="https://web-cdn.fixr.co/scripts/fixr-checkout-widget.v1.min.js"
></script>

Google Tag Manager

To forward analytics events from the widget to your website’s data layer using Google Tag Manager, ensure that GTM is installed on your site. Then, add the data-enable-gtm attribute to the script tag. This will enable the widget to fire eCommerce events to your domain’s data layer.

By default, events will fire to window.dataLayer. If you have a custom data layer, you can specify its name by adding data-enable-gtm="myDataLayerName".

<script
  data-enable-gtm
  src="https://web-cdn.fixr.co/scripts/fixr-checkout-widget.v1.min.js"
></script>

Events

The following events will be pushed into the data layer:

{
  event: "view_item";
  currency: string;
  value: number;
  items: [{
    item_id: string;
    item_name: string;
    item_brand: string;
    affiliation: "FIXR";
  }]
}

{
  event: "add_to_cart";
  currency: string;
  value: number;
  items: [{
    item_id: string;
    item_name: string;
    item_brand: string;
    affiliation: "FIXR";
  }]
}

{
  event: "remove_from_cart";
  currency: string;
  value: number;
  items: [{
    item_id: string;
    item_name: string;
    item_brand: string;
    affiliation: "FIXR";
  }]
}

  event: "begin_checkout";
  currency: string;
  value: number;
  items: [{
    item_id: string;
    item_name: string;
    item_brand: string;
    affiliation: "FIXR";
    quantity: number;
    price: number;
    item_category: string;
    coupon: string;
  }]

{
  event: "purchase";
  transaction_id: string;
  currency: string;
  value: number;
  items: [{
    item_id: string;
    item_name: string;
    item_brand: string;
    affiliation: "FIXR";
    quantity: number;
    price: number;
    item_category: string;
    coupon: string;
  }]
}

Special Cases

Wix integration

Wix handles links in a unique way, requiring an additional step to successfully integrate the links widget. Follow these steps to add the widget to your Wix site:

Requirement: Ensure you have a paid Wix plan, as adding custom scripts is only available with paid plans.
Add the Script Tag:

Navigate to your Wix Dashboard.
Go to Settings > Custom Code.
Add the following script tag to the Body - End section:

<script
  src="https://web-cdn.fixr.co/scripts/fixr-checkout-widget.v1.min.js"
  data-enable-nopropagate
></script>

Set the Code Type:

When adding the script, set the Code Type to Essential.

The key addition here is the data-enable-nopropagate attribute in the script tag. This ensures proper functionality of the widget on Wix sites.

Squarespace

Add the widget code to the Footer section in your Squarespace site’s Code Injection section:
Add a link to your FIXR event page using the Squarespace editor:
There is no 3, you are done!!