Integrating TixGate with Your Website

This tutorial covers all the ways you can add TixGate booking functionality to your existing website.

Option 1: Embedded Widget

The simplest integration method. Add our booking widget anywhere on your site.

Basic Implementation

<!-- Add to your HTML -->
<script src="https://book.tixgate.com/widget.js"></script>
<div
  id="tixgate-widget"
  data-attraction="your-attraction-id"
></div>

Customization Options

<div
  id="tixgate-widget"
  data-attraction="your-attraction-id"
  data-theme="light"
  data-language="auto"
  data-primary-color="#14B8A6"
  data-show-header="true"
></div>

Option 2: Button with Modal

Add a "Book Now" button that opens booking in a modal:

<script src="https://book.tixgate.com/modal.js"></script>
<button onclick="TixGate.openModal('your-attraction-id')">
  Book Now
</button>

Option 3: Direct Link

Link directly to your hosted booking page:

https://book.tixgate.com/your-attraction-slug

You can customize this page in your dashboard.

Option 4: API Integration

For complete control, use our API:

const response = await fetch('https://api.tixgate.com/v1/availability', {
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY'
  }
});

const availability = await response.json();

See our API documentation for full details.

Styling Your Widget

CSS Variables

Override our default styles:

:root {
  --tixgate-primary: #14B8A6;
  --tixgate-font: 'Your Font', sans-serif;
  --tixgate-radius: 8px;
}

Custom CSS Classes

Target specific elements:

.tixgate-widget { /* container */ }
.tixgate-calendar { /* date picker */ }
.tixgate-button { /* buttons */ }
.tixgate-summary { /* order summary */ }

Mobile Optimization

Our widgets are responsive by default. For mobile-specific adjustments:

@media (max-width: 768px) {
  #tixgate-widget {
    padding: 1rem;
  }
}

Testing Your Integration

1. Use test mode (Settings > Developer > Test Mode)
2. Make test bookings
3. Verify responsive behavior
4. Check page load performance

Troubleshooting

Widget Not Loading?

• Check your attraction ID is correct
• Ensure the script is loaded before the widget div
• Check browser console for errors

Styling Issues?

• Check for CSS conflicts
• Use browser dev tools to inspect
• Try adding !important to overrides

Need Help?

Contact our integration team at integrations@tixgate.com