Add Custom CSS and Scripts

The Advanced tab lets you add custom CSS for pixel-perfect styling, JavaScript for enhanced functionality, and purchase-complete scripts for conversion tracking. Use these fields when the built-in theme options are not enough.

Before you begin

• You need access to the Resytech Dashboard with permission to edit checkout settings.
• You should be comfortable writing CSS and/or JavaScript. Errors in custom code can break the checkout experience.
• For analytics tracking IDs (GA4 or Facebook Pixel), see Set Up Analytics Tracking instead -- those have dedicated fields.

Steps

1. Navigate to Dashboard > Checkout Settings.
2. Select the Advanced tab from the sidebar.
3. Enter your code in the appropriate section (see below).
4. Click Save Changes.

Custom CSS

The Custom CSS field accepts any valid CSS. Styles are injected into the checkout page and apply to all elements.

CSS variables

The checkout exposes the following CSS custom properties that reflect your theme settings:

--primary-color
--secondary-color
--accent-color
--background-color

You can reference these in your custom CSS to stay consistent with the theme:

.my-custom-element {
  color: var(--primary-color);
  border: 2px solid var(--accent-color);
}

Example: override card styles

/* Increase card rounding and add a colored border */
.activity-card {
  border-radius: 20px;
  border: 2px solid var(--primary-color);
  transition: transform 0.3s ease;
}

.activity-card:hover {
  transform: translateY(-4px);
}

/* Custom gradient button */
.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

Example: load a custom font

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');

body {
  font-family: 'Playfair Display', serif;
}

The editor includes a Format button that auto-indents your CSS for readability.

Custom JavaScript

The Custom JavaScript field runs after the checkout page loads. Use it for advanced DOM manipulation, third-party widget integration, or custom event handling.

Available events

The checkout emits custom events on the window object that you can listen for:

Example: log activity selections

window.addEventListener('BookingUI:loaded', function(event) {
  console.log('Checkout loaded', event.detail);
});

window.addEventListener('BookingUI:activitySelected', function(event) {
  console.log('Activity selected:', event.detail.activityName);
});

Example: inject a third-party chat widget

// Load Drift chat widget
!function() {
  var t = window.driftt = window.drift = window.driftt || [];
  // ... Drift initialization code
}();

Purchase Complete JavaScript

This script runs only after a successful booking purchase. It is ideal for conversion tracking, thank-you popups, or triggering external workflows.

Available data

The BookingUI:purchaseComplete event provides detailed purchase information in event.detail:

Example: track a purchase conversion

window.addEventListener('BookingUI:purchaseComplete', function(event) {
  var data = event.detail;

  // Google Analytics 4 purchase event
  if (window.gtag) {
    gtag('event', 'purchase', {
      transaction_id: data.bookingId,
      value: data.totalAmount,
      currency: 'USD',
      items: data.activities
    });
  }

  // Facebook Pixel purchase event
  if (window.fbq) {
    fbq('track', 'Purchase', {
      value: data.totalAmount,
      currency: 'USD'
    });
  }
});

Example: redirect after purchase

window.addEventListener('BookingUI:purchaseComplete', function(event) {
  // Wait 3 seconds, then redirect
  setTimeout(function() {
    window.location.href = 'https://yoursite.com/thank-you?booking=' + event.detail.bookingId;
  }, 3000);
});

Tips

• Test custom JavaScript carefully. Syntax errors or unhandled exceptions can break the checkout flow. Test in a browser console first.
• Custom CSS takes precedence over theme colors. If you set a color in Custom CSS that conflicts with a theme color, the CSS value wins due to specificity.
• Purchase Complete scripts only run on success. They will not fire for failed or abandoned checkouts.
• Use the Format button. The CSS editor includes a formatting tool that adds proper indentation. Click the wand icon in the section header.
• Keep scripts lightweight. Heavy scripts increase page load time, which can reduce conversion rates. Load external libraries asynchronously when possible.

Related guides

• Set Up Analytics Tracking -- use the built-in GA4 and Facebook Pixel fields instead of writing tracking code manually.
• Customize Checkout Theme -- configure colors and layout without writing CSS.