Implementation guide

Getting started

Your guide to setting up the Tiqets Booking Engine

What is the Booking Engine and how does it work?

Simple but powerful, the Tiqets Booking Engine is a customizable booking tool that can be shown on your website. It enables you to sell tickets online to customers in a variety of languages, with a wide range of supported currencies and payment options. Excellent checkout conversion is dependent on mobile support; up to 80% of internet users now book their tickets on mobile. As a result the Tiqets Booking Engine is developed mobile-first to continually offer visitors the best experience.

Easy setup

Our team has perfected a clean checkout interface to reduce abandoned carts and maximize sales

Sign up to use the Booking Engine
Customize
Start selling tickets

Easy install

Installing the Booking engine is as easy as inserting some HTML code on your site where you want the checkout button to appear.

Try the demo below to test your future checkout experience. Give it a go!

Book now

What can you customize?

Which products you'll sell

You decide which tickets to sell and whether you'd like one Booking Engine for all tickets or one for each ticket type

Visitor flow

When site visitors open the checkout, you can either show the checkout directly, show a multi-ticket overview, or show specific ticket information

Brand the widget

Simple things like adding your logo and choosing colours will make the engine look like it’s your own.

Languages

Customise the browser languages to target, if you only want some visitors to see the Booking Engine.

Localisation

Currencies and payment methods

Which currency and payment methods the visitors will be shown is decided based on their IP address or the visitor’s phone country. This means that when the visitor first clicks on the button, they’ll see the right currency for them, but they’re able to change currencies after that if they wish.

Likewise, we show the right payment methods. The importance of this can be seen when looking at the case of the Dutch people, for instance, who don’t commonly have credit cards, so offering iDeal as payment method is crucial. This will ensure visitors are able to complete the ticket purchase and will increase conversion. Similarly, a Chinese tourist in Barcelona will be able to purchase tickets through Alipay because their phones’ country code is China.

Languages

The widget will automatically detect the language in which to show, based on the visitor's web browser. If your site visitor's browser language is in Portuguese then the button and the Booking Engine will be shown in Portuguese, regardless of where the person is geographically located. If you’re choosing to use the Smart Button, then Tiqets can even make sure that the button text is in the right language for that visitor

Before you begin

Your website can run HTTPS

HTTPS is required for the Booking Engine. HTTPS is important for your site's security and to prevent cross-domain conflicts. The Booking Engine (a type of widget) runs in an iframe on HTTPS, therefore HTTPS is also required on your site, the hosting page.

Your website is mobile friendly

In order to support a Booking Engine on mobile, your website should also be designed for mobile. If not, we recommend that you add the following code to the top of your HTML page to make the Booking Engine work its best. This code helps users navigate intuitively without image and text scaling problems.

Note: This is not required, but we find it increases conversion for mobile visitors.

Your website supports popular browsers

The list of browsers we officially support is below. Other browsers might work.

Chrome (latest version)
Safari (latest version)
Firefox (latest version)
Mozilla (latest version)
IE11+

UI Button

The UI Button is one of your buttons or page elements (you can use text, a picture, or a link) that you already have. The advantage is that the design of the website doesn’t change visually, and it makes the user interaction more seamless with your own website branding. You can also have multiple elements on the same page that all trigger the booking widget. However, it will be a static button, which means it won’t automatically adapt to any new changes we might have, such as support for a new language. Showing the text on the button in the right language must be done by you. To connect an element to the booking widget, you’ll need to add a new CSS selector to it, such as a unique ID for a single element, or a new CSS class if you’d like to use multiple buttons to trigger the widget.

Smart button

The Smart Button is a button that floats above your website, as the topmost layer. The major advantage of this is that it will be updated seamlessly if we have new changes, such as support for a new language, and it would improve automatically without you needing to do anything extra. Your website doesn’t change at all, and this ticketing option appears above the pages you want it to show. For a no-fuss, a one minute long installation, choose the Smart Button which will be attached to the bottom of the page. It detects the user's browser language and currency automatically. You can customise it with your own colour (except for white, which needs good contrast with the white text of the button) and decide on whether it’s showing on the left, right, or center of the bottom of the page.

Setting up your Tiqets Booking Engine

Paste this code anywhere inside the <body> tag of your website to run configure the Booking Engine. Ask your point of contact at Tiqets for the Booking Engine ID number to add to the snippet below. If you have a UI Button configuration, you’ll also have to add a CSS class or ID to trigger the widget, which you’ll also need to communicate to your Tiqets contact person during the initial setup.

</div>

Example

Below you’ll find a basic example of a webpage and how you can add the HTML code to get the widget working.

<html>

<head>

<title>Tiqets Widget Example</title>

<-- Mobile support for the checkout --!>

</head>

<body>

(<-- If you have an UI Button, add an ID to trigger the widget --!>)

(<-- Add this configuration of the widget anywhere, for both UI buttons and Smart buttons --!>)

(<-- The script loading the widget --!>)

</body>

</html>

Test and go live

Once the code snippet is published to your website, the Booking Engine should show and orders can come in. If you’d like to see the languages in action, change your browser’s language preferences and see the widget adapt to them. Changes to the configuration of the Booking Engine can be made instantly by Tiqets' team, and requires a mere phone call or email.