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 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.
For the booking form we have prepared the following possibilities of customization:
* 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.
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?
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.