Enhanced Customer Seat Selection Managed Component

The Managed Component for Enhanced Customer Seat Selection provides a modern, mobile-optimised seat booking experience that can be activated within your existing Choose Seats iframe.

This article covers how the Enhanced Customer Seat Selection Managed Component works, what your customers will experience online, how to enable and preview it.

Before starting, you should be familiar with:

• Managed Components

TIP: Managed Components are a new feature that is in progress and updates will be released on an ongoing basis. The Enhanced Customer Seat Selection Managed Component is currently being expanded to support more Seating Plan configurations. As the functionality expands, this article will be updated with the most up to date information.

Before starting

To mount the Enhanced Customer Seat Selection Managed Component on your existing Choose Seats iframe, your website integration must meet the following requirements:

1. Choose Seats iframe: You must use the  Choose Seats iframe (chooseseats.aspx) on your website. If you use a Subsite to sell tickets, you'll already be using this iframe.
2. The domain where you want to activate the Managed Component must be explicitly listed in the Website Admin Interface under Domain Specific Config. A Default domain entry alone is not sufficient.

TIP: If you use a custom API integration, documentation your web developer can use to mount Managed Components directly onto your website will be available soon on the Integrate Portal.

What is Enhanced Customer Seat Selection?

Enhanced Customer Seat Selection intercepts your existing Choose Seats iframe with a modern seat selection experience.

Enhanced Seat Selection improves the customer experience in the following ways:

• Mobile-optimised: The Seating Plan is more responsive to screen size, providing an improved experience for customers on mobile devices. Mobile device and screen reader users can receive all of the important information about your Seats.
• More accessible: Customers can navigate the Seating Plan using a keyboard, and screen readers can announce Seat information as customers move through the plan. You can configure a tab order so that keyboard users move through Seats in a logical sequence. This means your Seating Plan meets WCAG 2.1 AA accessibility guidelines for keyboard navigation.
• Visually improved: Seating Plan background images are displayed in SVG format, resulting in clear images at higher zoom levels and on high-resolution screens.

TIP: All Seating Plan images have automatically been converted to SVG files. If the converted image for your Seating Plan doesn't meet your expectations, for example, if custom fonts or image details haven't converted accurately, you can submit a Seating Plan Request to get this updated.

How does the Enhanced Customer Seat Selection Managed Component work?

The Enhanced Customer Seat Selection Managed Component intercepts your existing Choose Seats iframe with the enhanced seat selection experience.

For a customer to experience Enhanced Customer Seat Selection:

• The Enhanced Customer Seat Selection Managed Component must be enabled on the domain
• The Event Instance must use a pricing structure that is currently supported by the Managed Component

If both conditions are met, the Managed Component intercepts the Choose Seats iframe and the customer sees the enhanced Seating Plan. If either condition is not met, the system falls back to the base Choose Seats iframe.

The table below outlines capabilities of the Enhanced Seat Selection Managed Component, some of which are available now, and some which will be possible in the future.

If a Seating Plan configuration is not currently supported, the system will automatically fall back to the base Choose Seats iframe.

REMINDER: As the Enhanced Customer Seat Selection Managed Component evolves, more Seating Plan configurations will be supported and fewer will fall back to the base Choose Seats iframe.

Example

If a customer is purchasing tickets for an Event Instance that uses a standard pricing structure, and Enhanced Customer Seat Selection is enabled for that domain, the customer will see the enhanced seat selection experience.

If a customer is purchasing tickets for an Event Instance that uses a Ticket Donation pricing structure, the customer will see the base Choose Seats iframe instead.

Styling

The Enhanced Customer Seat Selection Managed Component inherits your existing CSS styling where possible. This means in the majority of cases, the component will match your website branding automatically without requiring the support of a web developer.

If you need to make any further adjustments to the styling, your web developer can update the component's elements using standard CSS.

TIP: The enhanced experience works best when the iframe has as much usable screen space as possible. Consider reducing large headers, oversized logos or heavy padding around the booking flow so the Seating Plan remains the visual priority - especially on mobile and smaller laptop screens.

What do customers experience?

When Enhanced Customer Seat Selection is active, customers see a redesigned Seating Plan interface that is optimised for all screen sizes.
 

Seat selection information

1. Date selection: Customers can use the arrows to navigate forwards and backwards through Instances. They can also click the date to open up the calendar and choose a date. The Date Selection will only appear if the Show event instances calendar is enabled in Website Admin interface.
2. Ticket type selection: Customers can pre-select the Ticket Type from the dropdown menu before selecting their seats.
3. Promo code: Customers can enter a promo code to access locked seats or discounts.
4. Show me only [x] or more seats together: Customers can enter a number to quickly find groups of [x] number of seats.

5. Price Band Chips: Each Price Band is displayed with a coloured dot. Customers can select a Price Band Chip to filter the Seating Plan to specific Price Bands. 

   TIP: If you use separate Price Bands for identical prices, this can result in duplicate chips which may confuse the customer. Instead, we recommend using Tags and Locks to separate seats rather than creating separate Price Bands.

6. Transaction Commission message: If you charge a Transaction Commission, you can display a message to let customers know about this additional fee. You can edit this message under Custom Website Messages.

1. Seat: When a customer selects a Seat, it appears with a black circle outline and an information panel displays the specific details about that Seat.
2. Seat and Area name: The row and number of a Seat, along with the Area of the Seating Plan. For example, E15.
3. Price Band: The pricing level of the Seat. For example, Price Band A.
4. Information (info overlay): Extra Seat information added to the Seating Plan using an Info Overlay.
5. Price: Customers can see the price of the Seat, including Commission depending on your system configuration.
    

Keyboard navigation

With Enhanced Customer Seat Selection, customers using keyboards or screen readers can navigate through Seats in the order you've configured.

Customers can:

• Use Tab to move forward through Seats
• Use Shift + Tab to move backwards
• Use Enter or Space to select or deselect a Seat
• Screen readers announce Seat information (row, number, Price Band and any Info Overlay text) as the customer navigates

You can configure the navigation order using the Seat Navigation settings on each Seating Plan. To find out more, read Seat Navigation.
 

How to enable Enhanced Customer Seat Selection

To enable Enhanced Customer Seat Selection, navigate to the Website Admin Interface > Domain Specific Config. Then, choose the domain that you’d like to update.

If your website or Subsite domain is not listed, you will need to add it in order to proceed. Follow the instructions in n How to list a new Domain Specific Config in the Website Admin Interface article.

TIP: To access Website Admin, you’ll need the Web Integration Administrator Role. If you don’t have this Role, ask the Settings Administrator in your organisation to add this Role to your User Account.

1. Choose the domain where you’d like to activate Enhanced Customer Seat Selection
2. Scroll down to Online Seat Selection V2
3. Click Edit

4. Check the Use Online Seat Selection V2 box:

   

5. Optionally, you can also check the Show Event Instances Calendar box to display the Instances calendar during seat selection.
6. Click Save

TIP: If you have a staging domain, enable Enhanced Customer Seat Selection on your staging domain to test first. This allows you and your team to review the Enhanced Customer Seat Selectionbefore enabling it on your live domain.

How to preview Enhanced Customer Seat Selection

You can preview the Enhanced Customer Seat Selection without activating the component on your live Seating Plan.

Depending on how your website is integrated, follow the steps to:

• Preview on an iframe
• Preview on a Subsite

Preview on an iframe

1. Use the iframe URL Generator to find the URL for your Event List iframe.
2. From the Event list, choose an Event and an Instance with a Reserved Seating Plan to reach your Choose Seats iframe.
3. Append the URL with the parameter &PreviewOnlineSeatSelectionV2=true.

For example:

https://tickets.example.com/client/website/ChooseSeats.aspx?&EventInstanceId=123456&PreviewOnlineSeatSelectionV2=true

Preview on a Subsite

1. From the Styles and Settings menu, click Preview.
2. Open the Subsite URL and enter a Web Event ID (you can use any number, e.g. 000000).
3. Choose an Instance with a Reserved Seating plan to reach the Choose Seats iframe.
4. Append the URL with the parameter &PreviewOnlineSeatSelectionV2=true

For example:

https://purchase.example.org/ChooseSeats/12801?PreviewOnlineSeatSelectionV2=true

TIP: If you are switching between a staging domain and a live domain, test in a private browsing window to avoid caching issues.