EventSaaS Widget Embed Demo

Learn how to embed the event ticket purchase widget on your own website

Powerful Event Ticketing

Seamlessly embed ticket purchasing into any website with just a few lines of code

Inline Widget Embed

The inline widget is embedded directly within your page content:

<div data-eventsaas-widget data-event-id="1"></div>
Live Example:

Modal Popup Widget

The modal widget opens in a fullscreen overlay when users click a button:

<div data-eventsaas-widget data-event-id="1" data-widget-mode="button" data-button-text="Buy Tickets"></div>
Live Example:

How to Embed the Widget

1 Add the script to your HTML

First, add our embed script to your HTML page. Place this right before the closing </body> tag:

<script src="https://fairticket.app/widget/embed.js"></script>
2 Choose your embed style

You can embed the widget either inline or as a button that opens a modal:

<!-- Inline Widget -->
<div data-eventsaas-widget data-event-id="123"></div>

<!-- Button/Modal Widget -->
<div data-eventsaas-widget data-event-id="123" data-widget-mode="button" data-button-text="Buy Tickets"></div>

Replace 123 with your actual event ID.

3 Optional: Configure widget URL

If you're using a different domain than the default, you can configure the widget URL:

<script>
  window.EVENTSAAS_WIDGET_URL = "https://yourdomain.com";
</script>
<script src="https://yourdomain.com/widget/embed.js"></script>

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Event Page</title>
</head>
<body>
  <h1>Join Our Amazing Event!</h1>

  <!-- Button/Modal Widget -->
  <div data-eventsaas-widget data-event-id="1" data-widget-mode="button" data-button-text="Get Tickets"></div>

  <script src="https://fairticket.app/widget/embed.js"></script>
</body>
</html>