Website integration

There are three options to choose from to integrate your own website with Mighty Tix.

The simplest and fastest is to add a Buy Tickets button to your existing site; you can use the Next.js starter repo for more control over your ticketing checkout process; or use the Customer API to power a customized ticketing frontend you build from scratch.

Buy Tickets button

If you already have a website for your event or venue, the easiest way to include ticket sales functionality is to add a Buy Tickets button to your site. Once your sessions & tickets are set up (follow the Getting Started guide if you're not there yet) log into the Mighty Tix admin system and click the Website tab.

Copy the HTML fragment on this page to your clipboard. It will look similar to this:

<!-- Mighty Tix widget -->
<script src="https://demo.mightytix.com/embed.js"></script>
<!-- Style this button as needed -->
<button class="mightytix-button">Buy Tickets</button>

Paste this code into your website's HTML where you want the Buy Tickets button to appear. The HTML comments are not required, and to show multiple Buy Tickets buttons on the same page you only need to include the <script> tag once.

The button can be styled to match your website, but must retain the mightytix-button class.

With this code added to your website the Buy Tickets button will appear and will bring up a modal window when clicked. In this modal will be shown your ticketing selection and checkout process.

Next.js starter repo

Whilst the Buy Tickets button described above is simple to implement, it doesn't provide any control over the look and feel of the checkout process. If you're a developer (or working with one) we also provide a Next.js starter repository on Github which you can use to customize the checkout experience in almost unlimited ways.

Next.js is a React framework to simplify building fast, modern websites. We provide a Github Next.js repository preconfigured with an open-source event ticketing frontend to sell tickets through Mighty Tix.

Start by cloning the mightytix/mightytix-nextjs-ts repository:

git clone https://github.com/mightytix/mightytix-nextjs-ts.git

The repo will be cloned into a folder of the same name. Change into that folder and install the dependencies – the examples below use NPM but you can use Yarn instead if you prefer:

cd mightytix-nextjs-ts
npm install

Downloading and installing the package dependencies may take up to a minute. Once completed start the development server:

npm run dev

This will start the development server and launch the ticket sales checkout process in your browser. The sessions and tickets will be served from the Mighty Tix demo server; there's one config change left to connect the checkout to your own Mighty Tix account.

Open the /.env file in a text editor and you'll see the variable NEXT_PUBLIC_MIGHTYTIX_DOMAIN set to the demo server. This needs to be changed to your own URL; to find it log into your Mighty Tix admin system and click on the Account tab. Under Account Details you'll see Box Office URL and next to it will be your URL.

Copy and paste this domain into the /.env file:

# Change to your Mighty Tix URL
NEXT_PUBLIC_MIGHTYTIX_DOMAIN=your-event.mightytix.com

The development server will automatically reload and will show the sessions & tickets from your Mighty Tix account.

Now you're ready to go. Either deploy the app to launch as it is, or continue to customize the components and pages (including adding new pages) as much as you like.

Although the repository largely consists of Typescript files you can choose whether you'd prefer to write new pages & components in Javascript or Typescript. Either (or both!) will work just as well.

For detailed information on deployment options for Next.js applications please see the deployment guide on their website.

Customer API

Finally the Customer API provides the option with the most flexibility and control for integration. The Customer API is a GraphQL endpoint you can develop your own API client application for your customers to use to purchase tickets.

If neither the Buy Tickets button nor Next.js app described above are suitable for your checkout, developing your own application using the Customer API gives you complete control over the experience. The API is also suitable for use with any programming language, unlike the Next.js app which is restricted to either Javascript or Typescript.

The API supports creating a cart, adding line items, checking out, and retrieving the resulting order. A typical workflow with the API is to create a new Cart with at least one Cart Line item, providing the Customer's first and last names, phone number, and email address.

In order to present ticket options for purchase the Customer API also provides details of all Events, Venues, Sessions, Ticket Types, and Session Ticket Types (a Ticket Type offered for a specific Session). It also provides configuration details of your Account (including the default currency and locale settings) and available Payment Gateways.

Once a transaction has been successfully completed the Customer API also supports downloading the detail of the Order and associated Tickets.

For detailed implementation information see the Customer API Reference.

NPM package

For those developing a client application using the Customer API with Typescript and/or Apollo, the mightytix NPM package may help speed development. The package contains an Apollo Client configured for connecting to the Mighty Tix APIs as well as Typescript types for all input and output operations.

To install the package into an existing project:

npm install mightytix

To make use of the Apollo Client instantiate it with your Mighty Tix domain and pass it to your ApolloProvider wrapper:

import { ApolloProvider } from '@apollo/client';
import { mightytixClient } from 'mightytix';

export function TicketingCheckout() {
  const client = mightytixClient('your-event.mightytix.com');

  return <ApolloProvider client={client}>{/* Your ticketing checkout component(s) */}</ApolloProvider>;
}

The Typescript types in the library are available for use by any GraphQL client:

import { Cart, Session, Ticket } from 'mightytix';

After installing browse the declared types at node_modules/mightytix/src/lib/data/types.d.ts. You can also find out more about each type and its usage in the Types section of the Customer API Reference.