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:
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 (replacing
<your_event_id>with the ID of your event):
That's it! Any anchor links on your page will now open a modal pop-up 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:
Light:
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:
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>
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 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>
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 widget to your website's data layer using Google Tag Manager,
<script
data-enable-gtm
src="https://web-cdn.fixr.co/scripts/fixr-checkout-widget.v1.min.js"
></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.
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>
- Configure script options
- Add code to all pages
- Set the option to load code on each new page
- Place code in the body end section
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
Footersection in your Squarespace site's Code Injection section:
- Add a link to your FIXR event page using the Squarespace editor:
