iframe is short for inline frame. You can think of them as a window on your website in which another website gets placed. iframes are an essential part of your website integration and can be used in conjunction with our other integration tools.
Before starting you can get an overview of web integrations by taking a look at the article Introduction to Website Integrations.
Introduction to iframes
By default, your system comes with a series of web pages, built and maintained by Spektrix, which can be embedded on your websites as iframes. When you add an iframe to a page, essentially, it adds another website within the page.
Within the iframe, Customers can directly interact with Spektrix to do things such as browse Events, make Donations and purchase items including Merchandise, Memberships and Gift Vouchers. Using an iframe means you can display content, without having users leave the page or your website to make a purchase.
There are different iframes which correspond to different actions which can be taken on your website. Using an iframe is the only way to process payments through Spektrix on your website for current integrations. This means that iframes are an essential part of your website integration.
Although iframes are produced by Spektrix, it is your web developer that embeds iframes into your website. They can do so by following the guides on our Integrate Portal.
You can amend some of the text that is displayed within the iframes via the Admin and Settings Interfaces. Your web developer can apply styling (such as colours and fonts) to match the iframe match with your website. However, there is a limit to how much you can customise the display of an iframe on your website. This means that you might want to use iframes in combination with the API or Web Components on your website.
TIP: You can learn more about editing text and styling for iframes in the next article Configuring iframes.
iframes Considerations
iframes are the easiest of our tools to implement for your web developer to integrate with your website, but on the flipside they are the least flexible out of the tools.
There are some considerations to make when approaching working with iframes.
What's possible with iframes...
- iframes offer ready to use functionality
- Easiest and quickest tool for your website developer to apply to your website. This can also mean they will cost the least to implement.
- Some specific actions are only available in iframes, for example, taking Payments, and selling Fixed Series or Ticket Subscriptions.
What's not possible with iframes...
- iframes are the least flexible in design and functionality.
What can you do with iframes?
Spektrix supplies a set of ready made iframes that can be placed on your website. In this section we’ll show you how to find your iframe URL and go through each of the available iframes. We'll give a brief summary of what they can be used for and link out to further information on how you can configure them in the article Configuring iframes.
TIP: Depending on how you choose to integrate your website with Spektrix you may not use all of the available iframes on your website.
How to find your iframe URL
If you are using a Custom Domain, the first part of your iframe URL will be:
https://tickets.yourwebaddress.com/yourclientname/website/
- Replace the yourwebaddress with your website address.
- Replace yourclientname with your client name.
If you are not using a Custom Domain, the first part of your iframe URL will be:
http://system.spektrix.com/yourclientname/website
- Replace yourclientname with your client name.
Then select the iframe you are filtering and add that to the end of the address:
- EventList.aspx
- EventCalendar.aspx
- EventDetails.aspx
- ChooseSeats.aspx
- EditTickets.aspx
- MultibuyCrossSelling.aspx
- SupplementaryEventsPage.aspx
- Basket2.aspx
- FixedSeries.aspx
- TicketSubscriptions
- Donations.aspx
- Memberships.aspx
- Merchandise.aspx
- GiftVouchers.aspx
So, if we were to add the Event List iframe to the URL we already have it would be:
http://system.spektrix.com/yourclientname/website/eventlist.aspx
You can test this by replacing yourclientname with your client name and following the link above. This should take you to a preview of your Event List iframe.
Full documentation for web developers on this process can be found on our Integrate Portal.
iframe journey
Watch this video to see the flow of how the different iframes are connected.
- Event List iframe
- Event Calendar iframe
- Event Details iframe
- Choose Seats iframe
- Edit Tickets iframe
- Multibuy and Cross Selling iframe
- Supplementary Events iframe
- Cart/Basket iframe
- Fixed Series iframe
- Ticket Subscriptions iframe
- Donations iframe
- Memberships iframe
- Merchandise iframe
- Gift Vouchers iframe
- Choose Attendee iframe
- My Account iframe
- Checkout iframe
Event List
The Event List page lists all the Events that are active and on sale on your system. You can also filter these Events by month.
To provide your web developer with the technical documentation for this iframe, visit our Integrations Portal: EventList.aspx
Event Calendar
The Event Calendar page displays active Events that are active and on sale in your system in the form of a calendar.
To provide your web developer with the technical documentation, visit our Integrations Portal: EventCalendar.aspx
Event Details
The Event Details page displays the details for a selected Event. The page will also list the dates and times of every Instance and display a ‘Book Now’ button.
At the bottom of the Event Details page is a promotional section which can list any eligible Offers that are related to your Event.
To provide your web developer with the technical documentation, visit our Integrations Portal: EventDetails.aspx
Choose Seats
The Choose Seats page displays your Seating Plan for reserved Events and enables Customers to add tickets to their Cart/Basket.
For Unreserved Events, this iframe displays the list of available Web Ticket Types, letting Customers select the quantity of tickets for each Ticket Type.
-
You can enable Pinch and Zoom is switched on by default to make it easier for your customers to navigate your Seating Plan online. You can turn it off if you need to in the Settings Interface under the Settings Interface > Configuration > System Setup > Seating Plans.
REMINDER: You'll need the Settings Administrator User Role to access the Settings Interface
To provide your web developer with the technical documentation, visit our Integrations Portal: ChooseSeats.aspx
Edit Tickets
The Edit Tickets page appears after Choose Seats for Reserved Events only. It lets the Customer select their Ticket Types when adding tickets to their Cart/Basket from a Reserved Seating Plan, and appears even if only one Ticket Type is set up.
To provide your web developer with the technical documentation, visit our Integrations Portal: EditTickets.aspx
Multi Buy and Cross Selling
The Multibuy page will appear when the Customer navigates to the Cart/Basket page for the first time and they have tickets in their Cart/Basket that are part of a qualifying Multibuy Offer with Cross Selling Enabled.
To provide your web developer with the technical documentation, visit our Integrations Portal: MultiBuyCrossSelling.aspx
Supplementary Events
The Supplementary Events page will appear after the Edit Tickets screen if the Event that the Customer has added tickets to is linked to a Supplementary Event.
To provide your web developer with the technical documentation, visit our Integrations Portal: SupplementaryEventsPage.aspx
Cart/Basket
Every Customer is assigned a Cart/Basket when they start a session. The Cart/Basket page displays all the Tickets, Memberships and Merchandise items they have selected and Donations they have made.
Customers don’t need to be logged in to have a Cart/Basket. The Cart/Basket is linked to their unique session. Items will be held in the Cart/Basket until the session times out.
There is a section at the top of the iframe which promotes eligible Offers or details which Offers have been applied. The savings section also lets customers enter a Promotion Code. Merchandise items linked to Events are promoted on this page under the tickets for that Event.
This page also has a link to the Checkout page. This link redirects the browser to a page which you set in the Website Admin Interface.
To provide your web developer with the technical documentation, visit our Integrations Portal: Basket2.aspx
Fixed Series
A Fixed Series Subscription lets you create bundles of tickets or season ticket passes where customers can book the same seats for a selected number of different Instances, usually at a discounted price.
The Fixed Series page lists these Subscriptions along with an image, a description and ‘Book Now’ link. After choosing their preferred Subscription, the customer is shown the available pricing combinations and then asked to choose their desired seats.
To provide your web developer with the technical documentation, visit our Integrations Portal: FixedSeries.aspx
Ticket Subscriptions
The Ticket Subscriptions page lets customers add Ticket Subscriptions to their Cart/Basket. Ticket Subscriptions enable you to create flexible passes or ticket bundles through which your customers can 'pre-purchase' a set number of tickets across a range of Events for a fixed price, and redeem them against specific Instances either at the time they purchase or at a later date.
REMINDER: Ticket Subscriptions can be sold and redeemed using Express Checkout, but not with Classic Checkout.
To provide your web developer with the technical documentation, visit our Integrations Portal: TicketSubscriptions
Donations
The Donations page lets Customers add Donations to their Order. You can set up as many Funds as you would like to display here, and each with a default donation amount.
To provide your web developer with the technical documentation, visit our Integrations Portal: Donations.aspx
Memberships
The Memberships page lists all the Memberships that are available for Customers to buy.
To provide your web developer with the technical documentation, visit our Integrations Portal: Memberships.aspx
Merchandise
The Merchandise page lists all the Merchandise items that you have for sale and have made available online.
To provide your web developer with the technical documentation, visit our Integrations Portal: Merchandise.aspx
Gift Vouchers
The Gift Vouchers page lets customers add Gift Vouchers to their Cart/Basket. When a Customer adds a Gift Voucher they are taken to the Cart/Basket page.
This page can also display available Gift Memberships.
To provide your web developer with the technical documentation, visit our Integrations Portal: GiftVouchers.aspx
Choose Attendee
It is possible for a Customer to book on behalf of other Customers using the Facilitated Booking functionality. When Facilitated Booking is used during the transaction, all items in the Cart/Basket will be attributed to the ‘attendee’ (also referred to as the ‘Owner’ in some parts of the system).
To provide your web developer with the technical documentation, visit our Integrations Portal: Choose Attendee
My Account
The My Account page provides a way for Customers to manage their account with your Spektrix system.
-
You can configure what customers can see on the My Account iframe in the Settings Interface.
REMINDER: You'll need the Settings Administrator User Role to access the Settings Interface.
-
Go to the Settings Interface > Configuration > System Set Up
-
From the menu on the left choose Website.
-
Toggle the switches for the features which you'd like to display on the My Account page.
-
Click Save Configuration once you are happy with the settings.
-
You may need to contact your Web Developer to add CSS styling to this page if you do not have it already.
-
To provide your web developer with the technical documentation, visit our Integrations Portal: My Account.
Checkout
This is the entry point into the Checkout flow, and is required for all website integrations. It provides functionality for Customers to choose their Ticket Delivery preferences and confirm and pay for the Order. The iframe should be embedded on a standalone page.
TIP: This example uses The Express Checkout.
To provide your web developer with the technical documentation, visit our Integrations Portal: Checkout.
Further Reading
Find out more about iframes, what you can do with them, how to configure them and how to troubleshoot common problems in the following articles:
Wireframes created with Balsamiq.