Getting started with the Showpass SDK

Use the JavaScript SDK to open Showpass ticket, product, membership, calendar, and checkout widgets on your website. Your page must use HTTPS.

Choose a display mode

For multiple offerings that customers should add to one basket, start with buttons that open modals. The shared-basket guidance covers supported layouts and limitations.

Load the SDK once

Use the canonical URL:

<script src="https://www.showpass.com/static/dist/sdk.js" defer></script>

After loading, the SDK is available as window.showpass.tickets. Wait for it before calling a widget method. With the deferred script above, initialize your page at DOMContentLoaded; if you insert the script dynamically, wait for its load event instead.

Connect a button

This plain HTML example loads the SDK, connects a button, and displays a message if the widget cannot open. Replace your-event-slug with your event's slug.

<script src="https://www.showpass.com/static/dist/sdk.js" defer></script>

<button id="buy-tickets" type="button">Buy tickets</button>
<p id="showpass-status" role="status" hidden></p>

<script>
  window.addEventListener("DOMContentLoaded", function () {
    const button = document.getElementById("buy-tickets");
    const status = document.getElementById("showpass-status");

    button.addEventListener("click", async function () {
      if (!window.showpass?.tickets) {
        status.textContent = "Ticket sales are temporarily unavailable.";
        status.hidden = false;
        return;
      }

      button.disabled = true;
      status.hidden = true;

      try {
        await window.showpass.tickets.eventPurchaseWidget("your-event-slug", {
          "theme-primary": "#24727b",
        });
      } catch (error) {
        console.error("Unable to open the Showpass widget", error);
        status.textContent = "Ticket sales are temporarily unavailable.";
        status.hidden = false;
      } finally {
        button.disabled = false;
      }
    });
  });
</script>

The button is disabled while the widget opens. The returned promise resolves when the initial widget is shown, not when the customer finishes shopping or closes it.

Embed a widget

Create the container before calling the SDK, then pass its ID as the final argument. Run this example after both the SDK and the page content are ready:

<div id="event-widget"></div>

window.showpass.tickets.eventPurchaseWidget(
  "your-event-slug",
  { "theme-primary": "#24727b" },
  "event-widget"
);

The widget guides below use this same pattern. Their examples show the widget call; use the loading and error handling above in your page integration. Pass {} when you do not need options.

Choose a widget

Integration checks and limitations

• Load the SDK once per page. In a client-rendered application, share the loader rather than adding a new script for each widget.
• Mount an embedded widget only after its container exists. Avoid repeated mounts into the same container.
• Keep a visible error or fallback action when loading fails; do not retry indefinitely.
• Choose one loading approach. DOMContentLoaded alone does not wait for a script loaded with async or inserted later.
• Do not use multiple inline SDK widgets on one page unless using Showpass Website Builder. Read the shared-basket limitations before combining widgets.