Shop-Plugin

Our plugin is an easy way to integrate a ticket booking form into your website and add your custom styling to it. For the integration of the plugin, you don’t need to be able to code you simply need to insert 2 code snippets, for which we have examples, and the rest will be handled by our plugin. We also make it possible for you to edit your shop and determine certain settings and attributes.
To be able to use our plugin you need to atleast have the following information:

The eventID of the event you want to sell tickets.
The organizerID of the event owner.
The currency you want the orders to be in.
The language of the user dialogue.

Step by Step Guide

if you don’t have an account yet at TICKETINO, create an account: https://cockpit.ticketino.com/
Add an event and ticket types: https://cockpit.ticketino.com/de/EventManagement/Events
Write down the ID of your account. For your account ID go to https://cockpit.ticketino.com/de/MyProfile, click ‘Organizer Settings’ and write down the ID.
Write down the ID of your event. For your event ID go to https://cockpit.ticketino.com/de/EventManagement/Events. The ID of the event is shown in the grid below the event name.
Take the basic code snippet and replace the following values:
- organizerId: put your account IT
- eventId: put your event ID
- languageISO: define the dialogue language (possible values: de, en, fr, it)
- currency: define the currency of the basket (possible values: chf, eur, usd, gbp)

Insert the code snippet (with your values) into the body part of your website at the place where the booking dialogue should appear.
If needed, further customize the functions if the plugin using the parameters. The description of the parameters is below on this page.
If needed, customize the appearance of the Shop-Plugin with CSS.

Example Code

Open demo page

Possible Settings

For the booking form we have prepared the following possibilities of customization:

Setting	Expected attribute name and example value	Possible Values
ID of organizer *	organizerId="9999999999"	Account ID that can be found in the TICKETINO cockpit
ID of event *	eventId="9999999999"	Event ID that can be found in the TICKETINO cockpit
Language of the form * Select the starting language of the booking form. In case you don't give a correct ISO-code, the form will start in German as default.	languageISO="de"	"de", "fr", "en" or "it"
Currency of the Order * Select the Currency in which the order should be paid.	currency="chf"	"chf"(default Value) , "eur", "gbp", "usd"
Enable specific tickettype(s) when a certain tickettype gets selected This attribute allows you to create groups of tickettypeIds which will get enabled once the trigger Id (the first Id in a group) gets selected. The \| symbol is used to separate the groups. This makes it possible to have multiple of logics of the same type. The tickets will be disabled from start until they get enabled. In case there are problems, please remove any whitespaces/spacebar characters as they might have created an unforseen splitting problem.	enableTickets="123123;321321\| 77777;888;999"	Any Tickettype of the selected event
Disable specific tickettype(s) when a certain tickettype gets selected This attribute allows you to create groups of tickettypeIds which will get disabled once the trigger Id (the first Id in a group) gets selected. The \| symbol is used to separate the groups. This makes it possible to have multiple of logics of the same type. The tickets will be enabled from start until they get disabled. In case there are problems, please remove any whitespaces/spacebar characters as they might have created an unforseen splitting problem.	enableTickets="123123;321321\| 77777;888;999"	Any Tickettype of the selected event
Turn the dropdown for tickets into a checkbox This attribute allows you to decide if tickettypes with a limit of 1 ticket per order should be displayed as a checkbox instead of a dropdown.	singleTicketAsCB="true"	true or false
Display the ticket description(s) This attribute allows you to display the tickettype description which was created in the cockpit. The description text will always try and display the description in the selected language, but in case there is nothing for the selected text it will go to the default which is German.	showTicketDescription="true"	true or false
Choose the fields that need to be filed by the customer This will allow you to select the fields that need to be filled during the booking process the user. Be aware that in case certain choices are made, certain possibilities regarding the payment- or deliverymethod can't be selected. In case you don't make any selection, the default values will be selected which match the fields that are needed as in the shop.	wantedFields="firstname;lastname; country;plz;place;gender;street"	"firstname", "lastname", "country", "plz", "place", "gender", "street", "mobil", "telephone" and "deliveryAddress" (if deliveryAddress is added to the list it will allow the user to give a different delivery Address for the order)
Allow promotion codes to be used With this setting you can determine if the user is able to insert a promotion code during the booking process.	allowPromotionCode="true"	true or false
Allow the ticket-insurance to be selected With this setting you enable the buyer the possibility to purchase an insurance on the ticket.	allowInsurance="true"	true or false
Allow electronic payment methods With this setting you enable the buyer the possibility to make purchases with the electronic paymentmethods.	allowElectronicPayment="true"	true or false
Allow unlock ticket types With this setting you enable the buyer the possibility to enter promotion code and unlock certain ticket types.	allowUnlockTicketTypes="true"	true or false
Show event banner With this setting you can show the event banner (which can be selected in the cockpit) on the ticket selection page.	showEventBanner="true"	true or false
Load bootstrap library With this setting you can choose whether to load the bootstrap external library or not. It is set to true as default.	loadBootstrap="false"	true or false

* these settings are mandatory

Explanation of Workflow

The plugin has the followinf workflow steps to book and pay a ticket:

Ticket Selection
The plugin starts with a ticket-selection page. There all tickets are shown as well as the logic behind it will be active.
Name and address of buyer
Afterwards the customer is asked for his personal details (address). The needed fields depend on the settings, if nothing is set, the default fields will be displayed. If the customer wants to set a different delivery address for the order they can mark the "delivery address Checkbox" and new fields will appear that can be filled. If the organizer has defined questions on the tickets, they will also appear on this page.
Summary
The selcted tickets and the buyer are shown for review.
Checkout / Payment
The customer can select the payment and delivery method. The buyer can also use a promotioncode on this page, as well as choose to have an insurance on the ticket.

How does the code work?

The plugin works by referencing a JavaScript-file that gets created by TICKETINO. The JavaScript is the Build-Version of a React.js-project. The JavaScript contains code that injects HTML-Elements into the DOM of the website.

Within React we show all the pages directly and don’t force any re-routes of the user himself. The user will only be re-routed in case he pays with an electronic payment method. This is due to the limitation of the payment-tool that is being used.

To enable you to make changes in the settings and display the correct information, we search for a specific element, said element is the same as the code is being injected into. Within the element we look at the attributes and search for specific values which indicate that settings have been made. The attribute-keys are case sensitive. If an attribute is spelled incorrectly, we assume that no settings have been made for this setting. The same problem could appear if no HTML-Element is found with the id “ticketinoShopPlugin”.

We don’t store any data in the localStorage or sessionStorage. Therefore, we will never overwrite any of your stored data by accident and break any of your pre-existing code.

During the different steps of the booking process, we will make HTTPS-calls on our REST-Api. If these calls fail the booking process can’t continue. As the user is only able to progress if the HTTPS-callback was successful.

You can easily edit the styles of the booking form. We have added css-classes to our newly added HTML-Elements. The naming convention of the classes are: "ticketinoButton", "ticketinoText" etc. If you are unsure, you can always check the names in the developer-tool (F12) of the browser.