As part of the online booking path there's an iframe called the Multibuy Cross-Selling page, which allows you to prompt customers during the booking process and let them know when they could be eligible for a Multibuy offer. A well designed and integrated iframe can help increase revenue and encourage customers to re-attend, so it’s well worth getting this set up.
Enabling this feature is as simple as ticking the Cross Selling Enabled button within each Offer in the Admin Interface. If you’re going to use this however, it’s important to get the iframe styled properly. If it doesn’t look great, and match the rest of your website, you’re not just giving your customers a less-than-great experience - you might inadvertently encourage them to abandon their purchase altogether.
The purpose of this article is to get you started with the process of styling the Multibuy Cross-Selling page - you can style the page in whatever way you’d like, however we have provided an example of how to do this.
Basics
Without any styling, the Multibuy Cross-Selling page is a very basic iframe which doesn’t look very good:
A little bit of work on the styling however, and it can both look beautiful and be a very effective tool. Here’s an example:
Things to think about from your organisation’s perspective
As with all website styling, we recommend that you work with a design agency to make sure you get the most out of the possible design elements. Bearing that in mind however, it’s worth thinking in advance about whether you want to use Event images on this page - you don’t have to, but they can help make the page look great.
If you decide to include images, you’ll need to look at the image sizes. The images used for this page are pulled out of Spektrix as thumbnail size, which by default is 90px (width). This could potentially be different for your system if you have ever requested the size to be changed - speak to the Spektrix Support Team if you’d like to check whether the image sizes have ever been changed.
Images that small may not be suitable for use on this page, so you may need the default thumbnail size changing - the Spektrix Support Team can do this for you. Once the default size has been changed, you will need to re-upload all of your images, as they won’t resize automatically.
We recommend that you get a design for the page finalised with your web agency first, and then get them to advise you what width the images will need to be. You might also want to think about a standard height for the images, which you’ll need to crop before uploading to Spektrix.
Things for web agencies to think about
This article will be useful for your web agency, so we suggest you send it over to them as well. We have provided some sample code that you can use and adapt to your own website. It’s worth noting that the same classes are shared between both the Eventlist and Mulitbuy iframes, and the structures are also very similar. This means that if you have already styled your Eventlist iframe, some or all of that styling should automatically apply. See below for an illustration of how similar the code is for the two iframes.
NOTE: not all integrations use the Eventlist iframe, so this might not apply to you.
Here’s the code for the Eventlist iframe:
And here’s the code for the Multibuy iframe:
As you can see, the only difference between these two sections of code is the EventRow div class which sits below the Event Event_1 div class and wraps the remaining code.
NOTE: CSS selectors should be qualified using the .Multibuypage class which lives on the surrounding div. This will stop styles leaking over to the Eventlist page - see below for an example:
You can find a full sample of code for the Multibuy page in this file.
***
If you have any further questions about the Multibuy page, please get in touch with the Spektrix Support Team.