# Add Custom CSS and Scripts (/how-to/checkout/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 [#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](/how-to/checkout/set-up-analytics-tracking) instead -- those have dedicated fields.

Steps [#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 [#custom-css]

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

CSS variables [#css-variables]

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

```css
--primary-color
--secondary-color
--accent-color
--background-color
```

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

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

Example: override card styles [#example-override-card-styles]

```css
/* 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 [#example-load-a-custom-font]

```css
@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 [#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 [#available-events]

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

| Event                        | Description                                                                               |
| ---------------------------- | ----------------------------------------------------------------------------------------- |
| `BookingUI:loaded`           | Fired when the checkout page finishes loading. `event.detail` contains page context.      |
| `BookingUI:activitySelected` | Fired when a customer selects an activity. `event.detail.activityName` contains the name. |

Example: log activity selections [#example-log-activity-selections]

```javascript
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 [#example-inject-a-third-party-chat-widget]

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

Purchase Complete JavaScript [#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 [#available-data]

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

| Property        | Type   | Description                     |
| --------------- | ------ | ------------------------------- |
| `bookingId`     | string | Unique booking identifier.      |
| `totalAmount`   | number | Total amount charged.           |
| `customerEmail` | string | Customer email address.         |
| `customerName`  | string | Customer full name.             |
| `activities`    | array  | List of booked activities.      |
| `transactionId` | string | Payment transaction identifier. |

Example: track a purchase conversion [#example-track-a-purchase-conversion]

```javascript
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 [#example-redirect-after-purchase]

```javascript
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 [#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 [#related-guides]

* [Set Up Analytics Tracking](/how-to/checkout/set-up-analytics-tracking) -- use the built-in GA4 and Facebook Pixel fields instead of writing tracking code manually.
* [Customize Checkout Theme](/how-to/checkout/customize-checkout-theme) -- configure colors and layout without writing CSS.