The Choose Seats iframe - where customers see your seating plans - can potentially be difficult for customers to use on mobile devices, as small screens can’t always display seating plans at full sizes. In addition to the standard zoom and scroll buttons that you’ll be familiar with from your online seating plans, Spektrix offers the ability to enable pinch and zoom gestures so that customers can more easily navigate around your seating plans. These use standard mobile gestures so will be familiar to anyone used to using touchscreen smartphones or other mobile devices.
Standard Move and Zoom
The standard move and zoom functionality is normally enabled by default (if it's not enabled on your system, please speak to the Support Team who will be able to turn it on), and adds in arrow and zoom buttons to seating plans so that users can scroll around plans and zoom in and out where necessary.
This functionality applies whether customers are using mobile devices or standard computers, and should be useful for the vast majority of venues. It’s enabled by default because we think it’s relevant to pretty much everyone, but if you think you don’t need this functionality then please do get in touch with the Support team.
Pinch and Zoom Gestures
Mobile devices allow users to utilise multi-touch gestures as standard - for example when visiting the Choose Seats page on your website, customers can zoom in on the overall page so that they can see the seating plan better.
The pinch and zoom functionality in Spektrix takes that one step further and allows customers to zoom in on just the seating plan element of the page, and use two or more fingers to scroll around this part, while the main body of the page retains its usual size.
Pinch and zoom in Spektrix is switched on by default, so you don’t have to do anything to make this work. Take a look at one of your seating plans online, and you’ll see how it works:
- When you try to scroll the seating plan element of the Choose Seats iframe, you’ll see a message asking you to use two fingers when navigating the seating plan.
- You can still pinch and zoom outside of seating plan as well, but if you use that gesture over the seating plan part of the page, you’ll see the main page remain unchanged while the seating plan scrolls, moves and zooms.
We’ve designed this functionality with large seating plans in mind, as these are the types of seating plan which tend to be the hardest to navigate on mobile devices. As every seating plan and website is different it’s worth checking how your seating plans display online to make sure pinch and zoom is the right option for you.
If it works well, you don’t need to do anything more. If you don’t think you need pinch & zoom enabled, perhaps because you only have very small, simple seating plans, you can turn it off in the Settings Interface under Configuration > System Setup > Seating Plans.
Styling Pinch & Zoom on the Choose Seats Page
The message which appears asking mobile users to use two fingers to pinch and zoom can be styled differently if you would like to amend how it displays. If you would like to change the styling, your web developer just needs to use the below selector and any styling they want to add should be inserted between the brackets in this section of the code:
For example, if you wanted to change the text that appeared:
***
That should give you everything you need to know about using pinch and zoom gestures on mobile devices, but if you have any further questions then please don’t hesitate to contact the Support team.