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.

link-integration

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>

Special Cases

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!!