Web Integrations Quick Start
In the following article, links will be referenced as originating from system.spektrix.com. If you have implemented a custom domain for your Integration, please replace system.spektrix.com with your chosen subdomain.
Getting Started
To get started with a Spektrix web integration, you will need to consider the approach you are taking based on the organisation’s priorities. All integrations also require a few initial pieces of setup, independent of the approach you are taking.
Checklist for new integrations
For all new integrations, whether this is for a new client onboarding with Spektrix or just a new website, you should implement and/or verify the following:
- Make sure you know the clientname and have access to the Website Admin interface
- Set up the custom domain
- Configure domain specific settings in Website Admin
- Enable the resizing script for iframes
- Add styling to iframes
Configure the online journey
Based on the unique requirements of the client you work with, you can determine the right combination of tools for the desired customer journey.
It is expected that any journey would allow customers to:
| Iframes | API | Web Components | |
|---|---|---|---|
| Browse Events / Instances | x | x | |
| Add Tickets to Basket | x | x | |
| Add Donations / Merch / Memberships / Gift Vouchers to Basket | x | x | x |
| Add Ticket Subscriptions / Fixed Series to Basket | x | ||
| View the Basket | x | x | |
| Checkout | x | ||
| Check Login Status | x | x | |
| Check Basket Summary | x | ||
| View Customer Account | x | x |
The table above indicates which tools can be used to carry out specific actions in the online journey. The actions do not need to take place in the above order or in a linear way.
Organizations may also want additional functionality such as:
- Integrated mailing list sign up form
- CMS integration
- Upselling secondary spend
- Configured tracking with third party platforms such as GA4
Minimum Viable Integration
The simplest way to configure a functional online journey is embedding the standard Spektrix Iframes. The online ticket buying and checkout process can be fully powered by these Iframes which allow customers to book tickets from the Spektrix customer interface without ever leaving a client’s website.
A comprehensive list of the available Iframes, how they work, and what URL arguments can be passed through to them are available here.
More advanced functionality can be achieved by utilizing our API and Web Components, but to get started we'll take a look at an example of a minimum viable integration to the Spektrix system which uses four HTML web pages and four embedded Iframes.
Building the pages
Our sample integration will include four pages: home page, basket, account, and checkout. A comprehensive website will likely have many more pages that handle other aspects of the client's operation; this example is designed to be as simple as possible.
Home Page
To start, we'll want to provide the customer with a basic list of events that are available for booking at the venue.
To pull this information out of Spektrix, embed an Iframe that points to EventList.aspx on the client's Spektrix system, replacing clientname with the Spektrix client name of the actual system you're working on and system.spektrix.com with your chosen subdomain.
We'll name our home page home.html and insert the following code into the page:
<html>
<body>
<h1>Demo Theatre - Home Page</h1>
<ul>
<li>[Home](home.html)</li>
<li>[Account](account.html)</li>
<li>[Basket](basket.html)</li>
</ul>
<iframe
frameborder="0"
src="https://system.spektrix.com/clientname/website/eventlist.aspx"
style="width: 100%; height: 1000px;"
>
</iframe>
</body>
</html>
Once embedded and linked to a client name, the Iframe pulls through a list of the events that are available for booking at the venue from the client's Spektrix system. Contained within events are instances, which correspond with the dates and times that the event is occurring.
Once an event and instance have been selected, the system will prompt the customer to select which seats they desire to purchase, at which point the system will issue a ticket for the seats selected during this process. These tickets will be then added to the customer's basket pending final checkout. After all the tickets for a given instance have been sold, it will be automatically marked as sold out and customers will no longer be able to purchase tickets for that particular instance.
Basket
Next, we'll create a page for the basket Iframe, Basket2.aspx, to live. Using this page, customers can quickly return to the basket at any point of the shopping journey to see what items they are currently holding. Note that all items will be held in the basket for a period of 10 minutes from the most recent moment that a customer interacts with the website, after which they will be released back into general availability.
We'll call this one basket.html and use the following HTML:
<html>
<body>
<h1>Demo Theatre - My Basket</h1>
<ul>
<li>[Home](home.html)</li>
<li>[Account](account.html)</li>
<li>[Basket](basket.html)</li>
</ul>
<iframe
frameborder="0"
src="https://system.spektrix.com/clientname/website/basket2.aspx"
style="width: 100%; height: 1000px;"
>
</iframe>
</body>
</html>
The basket can contain any combination of items, including tickets, donations, and merchandise. As such, when styling the basket, check to make sure that it displays well when a variety of different items have been added to it.
Account
Just as customers may want to check their basket at any time, they also may want to check their account settings to change things like contact preferences and addresses, or to view previous orders. To accomplish this, we'll create a page embedding an Iframe that points to MyAccount.aspx on the Spektrix system.
We'll call this page account.html, using the following HTML:
<html>
<body>
<h1>Demo Theatre - My Account</h1>
<ul>
<li>[Home](home.html)</li>
<li>[Account](account.html)</li>
<li>[Basket](basket.html)</li>
</ul>
<iframe
frameborder="0"
src="https://system.spektrix.com/clientname/website/secure/myaccount.aspx"
style="width: 100%; height: 1000px;"
>
</iframe>
</body>
</html>
If a customer is not yet logged in to Spektrix, MyAccount.aspx will immediately redirect to a page prompting the user to log in.
Checkout
This provides the checkout facility, where the system takes payment for the items in a customer's basket and confirms the sale. The page contains an Iframe that points to Checkout.aspx on the Spektrix system.
Let's call this page checkout.html, and include the following HTML:
<html>
<body>
<h1>Demo Theatre</h1>
<ul>
<li>[Home](home.html)</li>
<li>[Account](account.html)</li>
<li>[Basket](basket.html)</li>
</ul>
<iframe
frameborder="0"
src="https://system.spektrix.com/clientname/website/secure/checkout.aspx"
style="width: 100%; height: 1000px;"
>
</iframe>
</body>
</html>
You'll notice that unlike the other pages, we haven't placed a direct link to the checkout anywhere, as users will generally be passed through to the checkout page from elsewhere in the purchase process (most often the basket).
In Website Admin, you should also enable the Express Checkout. Most new integrations would benefit from using the Express Checkout over the default Classic Checkout flow.
The website admin interface is a component of the client's Spektrix system, and you'll need a system login in order to access it. If you don't have a login or have questions about how to access this interface, get in touch with the client and they can get you set up.
Next Steps
You now have a minimum viable integration, meaning that customers who visit the website are able to view events and purchase tickets on the client website. This journey may or may not be aligned with the unique priorities and needs of the organisation.
So now you may consider which parts of the journey need further customization and which of the integration tools available is the right tool for each step of the journey.