Ticket layouts

Ticketmatic gives you full control over all ticket layouts (print at home tickets, tickets for thermal printer or any other format).

As the screenshot below shows, Ticketmatic offers a powerful editor allowing you to define a ticket layout using familiar web technologies: html, css and the twig templating language (left hand pane). The powerful preview capabilities (right hand pane) allow you to immediately preview ticket layouts using real data.

The live preview allows you to design tickets that are guaranteed to look good, also in special cases such as long event names. You can also easily test conditional layouts with content that is only visible for specific (types of) events.

Placesholders give you full control over the content of the ticket. You can make certain parts of the ticketlayout dynamic, dependent on certain conditions.

You can create multiple ticketlayouts, and define which ticketlayout should be used for which events and which delivery scenarios.

Ticketlayout content is completely multilingual and the generated tickets will be rendered in the language of the buyer.

Ticket layouts are managed in the Settings app. Click the button below to go to the Ticket layouts module:

Now create a new ticket layout:

A new ticket layout template is now created with default html and css.

This default ticket layout is an empty A4 ticket and and is a good base to start customizing the css and html.

While you are editing a ticket layout, you will see the Preview pane on the right displaying your changes in realtime. You can select the example order and ticket to test how the ticket layout looks for that specific test ticket.

Tickets are rendered to pdf in a consistent way on the server. The preview uses the exact same rendering engine used for rendering actual tickets so if the preview looks good, you can be sure that the actual tickets will look the same.

By editing the html and css in the template, you can customize the ticket layout exactly as you want.

Add static content to the ticket layout by including this in the html. Style the content with css. For example, to add a header line to the ticket layout, you could use this html/css:

From the css and html template you can refer to all assets that are available in the Assets module. This way, you can include images or logos or use custom fonts in your ticket layouts.

Use placeholders to add dynamic content like the event name, date or barcode to the ticket layout. When you build the ticket layout, you have an object ticket at your disposal that contains as properties all field definitions that are defined for the ticket. The html template is actually a twig-template and you can use the features of this template language to create a truly dynamic ticket. More info on the Twig template language.

Some example placeholders:

Twig filters, like the date filter in the example above, allow you to modify object properties and can be used among others to format properties. More info on the available Twig filters

Click on the (?) Placeholders button to retrieve a list of all objects and properties that you can use as placeholder in the html template. You will get a json-representation of the available object with the current preview-values filled in, for example:

Ticketmatic supports displaying both 1D and 2D barcodes. As there is a wide variety in printers and paper quality, always test the generated barcodes in real world circumstances. For box office tickets: use the actual (thermal) printer with the actual paper stock to print a ticket with barcode and test that the barcode scans correctly.

1D barcodes

Ticketmatic supports the Code 128 barcode symbology through a barcode font that is available for all accounts by default.

To activate it, link to the barcode font from the css using a css rule:

The @font-face rule links to the actual barcode font in the tmglobal folder. There are 7 sizes (= heights) of the font that you can choose between:

In the barcode class, the actual font-size is set (in this example to 12pt).



In the html template you can then generate the actual barcode using the ticket.barcode_code128 placeholder:

You can easily position and rotate the barcode on the ticket by wrapping it in a div:

Then use css to position and/or rotate the div. For example to rotate the barcode 90 degrees and position it on the right:

2D barcodes

Ticketmatic supports QR codes through a custom Twig filter.

Simply use this code in the html template to convert the barcode_text placeholder to a QR Code:

For multilanguage accounts, all static text on the ticket can be translated. The ticket will be delivered to the buyer in his preferred language.

In order to translate a text, you should annotate it with a translate attribute. For example:

All annotated texts are translatable in the Translate module. Click on translate in the top menu to access this module:

Not all events are equals and you might need a different ticket layout for some events. Ticketmatic allows you to define multiple ticket layouts and decide for each event which ticket layout to use.

Also, a ticket might need to be rendered differently depending on the delivery scenario of an order. For example, when a user prints his ticket at home, the ticket should be generated as a Letter or A4 document. When the same ticket is printed on a thermal printer in the box office, it should be generated in a much smaller ticket size.

To accomplish this you can link multiple ticket layout templates under a single ticket layout. You then define which template needs to be used for which delivery scenario. Ticketmatic will then automatically render the ticket in the right layout, depending on the context.

You can create a ticketlayout for placing multiple tickets on a single page: under Settings, select the number of tickets that you want to include on a single page. When printing multiple tickets with such a ticketlayout, the content of the body for the specified number of tickets will be concatenated in a single page.