Delivery Settings - Ticket Template Designs

VBO comes with a default e-ticket and mobile ticket design. If you would like, you can create your own e-ticket design using HTML and the available placeholders. The ticket design can be edited on a global level for all events and also can be edited on a per-event level.

Global Level - To add your own template on a global level, go to SET UP > EVENTS > DELIVERY SETTINGS and click the template you would like to modify.

Event Level Override - To override a template design on a per-event level, go to OPEN EVENTS and select MANAGE TICKET DESIGN from the "select action" drop-down menu on the event you want to modify.

Below are our default ticket templates which you can copy and paste into your Delivery Settings template fields or modify as needed.

Mobile Ticket Template

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mobile Ticket</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700' rel='stylesheet' type='text/css'>
<style>
* { box-sizing:border-box; font-family: 'Roboto', Arial, Helvetica, sans-serif; }
.ClearFix:after { content: ""; visibility: hidden; height: 0; display: block; clear: both; }
.TicketLogo { width: 100px; height: 59px; }
a.VideoButton, .VideoButton { display: inline-block; padding: 5px 10px; border: 1px solid #000; background-color: #000; color: #fff !important; font-size: 13px; font-weight: 400; border-radius: 5px; text-decoration: none;}
a.VideoButton:hover, .VideoButton:hover { color: #fff !important; }
</style>

<div style="padding: 10px; margin: 0 auto; width: 100%; max-width: 800px;">
<div style="padding: 0 0 2px 0; text-align: center;">TIX {TICKETNO}  OF  {TICKETCOUNT}</div> 
<div style="padding: 15px; width: 100%; background-color: #e4e4e4; border: 1px solid #bababa; border-radius: 5px;">
    <div style="overflow: hidden; padding: 0 0 10px 0;">
    	<div style="float: left;">{LOGO}</div>
        <div style="float: right; color: #000;">
        	<div style="font-size: 10px; font-weight: 100; text-align: right;">ORDERID</div>
            <div style="font-size: 18px; font-weight: 300; text-align: right;">#{ORDERID}</div>
        </div>
    </div>
   
    <div style="padding: 5px 0; color: #000; font-size: 25px; font-weight: 400;">
    	{EVENTNAME}
    </div>
   
    <div style="height: 10px; position: relative;" class="ClearFix">
    	<div style="position: absolute; left: -21px; width: 10px; height: 10px; background-color: #fff; border-radius: 100%; border: 1px solid #bababa;"></div>
        <div style="position: absolute; right: -21px; width: 10px; height: 10px; background-color: #fff; border-radius: 100%; border: 1px solid #bababa;"></div>
        <div style="position: absolute; left: -23px; width: 7px; height: 12px; background-color: #fff;"></div>
        <div style="position: absolute; right: -23px; width: 7px; height: 12px; background-color: #fff;"></div>
    </div>
   
    <div style="margin: 0 0 15px 0; color: #000;" class="ClearFix">
    	<div style="float: left; width: 65%">
            <div style="font-size: 10px; font-weight: 100;">DATE</div>
            <div style="font-size: 18px; font-weight: 300;">{EVENTDATENOTIME}</div>
        </div>
        <div style="float: right; width: 30%">
            <div style="font-size: 10px; font-weight: 100; text-align: right;">TIME</div>
            <div style="font-size: 18px; font-weight: 300; text-align: right;">{EVENTTIME}</div>
        </div>
    </div>
    <div style="margin: 0 0 15px 0; color: #000;" class="ClearFix">
    	<div>
            <div style="font-size: 10px; font-weight: 100;">TICKET</div>
            <div style="font-size: 18px; font-weight: 300;">{TICKETINFO}</div>
        </div>
    </div>
    <div style="margin: 0 0 15px 0; color: #000;" class="ClearFix">
        <div style="float: left; width: 65%;">
            <div style="font-size: 10px; font-weight: 100;">TICKET HOLDER</div>
            <div style="font-size: 18px; font-weight: 300;">{TICKETHOLDER}</div>
        </div>
        <div style="float: right; width: 30%;">
            <div style="font-size: 10px; font-weight: 100; text-align: right;">PRICE</div>
            <div style="font-size: 20px; font-weight: 300; text-align: right;">{PRICE}</div>
        </div>
    </div>
    <div style="text-align: center;">
    	<div style="margin: 0 auto; padding: 15px; width: 130px; background-color: #fff;">{BARCODE}</div>
<div style="overflow: hidden; margin: 0 auto; padding: 15px 0 0 0; width: auto;">
        	<div style="margin: 0 0 10px 0;">{WALLETBUTTON}</div>
        	<div style="margin: 0 0 10px 0;">{GOOGLEWALLETBUTTON}</div>

            <div style="{SHOWVIDEOCODE}">
            	<div><a href="{VIDEOBUTTONURL}" class="VideoButton" target="_blank">WATCH VIDEO</a></div>
            	<div style="padding: 5px; font-family:Arial, Helvetica, sans-serif; color: #000; font-size: 12px; font-weight: 400; text-align: center;">{VIDEOCODE}</div>
            </div>

        </div>
    </div>
  </div> 
</div>

E-Ticket Template

<style>
.TicketWrapper, .Ad { border: 1px solid #ccc; margin-bottom: 10px; }
.eTicket { padding: 10px; }
.Event, .DateTime, .Venue, .Seat, .Order, .Name, .Price, .OrderBy { border-top: 1px solid #ccc; background:none !important; }
.LeftSide { border-right: 1px solid #ccc; }
.Notes { border: 1px solid #ccc; }
.Vats { padding: 10px 3px 0 0; text-align: right; font-family:Arial, Helvetica, sans-serif; }
.Advertising { width: 692px !important; }
#VideoCode { font-weight: 600; }
.VideoButton { display: inline-block; margin: -5px 0 5px 0; padding: 5px 10px; border: 1px solid #000; background-color: #000; color: #fff; font-weight: bold; border-radius: 3px; text-decoration: none;}
</style>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="eTicket">
<img src="https://vboblobprod.blob.core.windows.net/awsvboticketscom/_images/tickets/eticket.png" style="max-width: 54px; width:54px; height:307px;" />
</td>
<td class="LeftSide"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left">{LOGO}</td>
</tr>
</table>
<div class="Event">{EVENTNAME}</div>
<div class="DateTime">{EVENTDATE}</div>
<div class="Venue">
<div class="VenueName">{VENUENAME}</div>
<div class="VenueAddress">{VENUEADDRESS}</div>
</div>
<div class="Seat">{TICKETINFO} {SUBLABEL}</div>

<div style="{SHOWVIDEOCODE}; padding: 5px; font-family:Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 400; text-align: right;">
<a href="{VIDEOBUTTONURL}" class="VideoButton" target="_blank">{VIDEOWATCHBUTTONLABEL}</a>
<span style="display: block; margin-top: 5px;">{VIDEOCODE}</span>
</div>

<div class="OrderBy">Ordered by {BILLNAME} on {ORDERDATE}</div>
</td>
<td class="RightSide">
<div class="RightQRBarcode">{QRBARCODE}</div>
<div class="Order">#{ORDERID}</div>
<div class="Name">{TICKETHOLDER}</div>
<div class="Price">{PRICE}</div>
</td>
</tr>  
</table>

Thermal Ticket Template

<style>
    body { margin: 0 !important;}
    .TicketLogo { width: 110px; height: 100px; }
    #barcode img { height: 75px; width: 75px; max-width:75px; max-height: 75px; }
</style>
<div class="TTicket" style="margin: 0px; height: 192px; width: 530px;">
    <table width="100%" style="font-family: Arial, Helvetica, sans-serif; font-size: 12px;">
        <tr>
        <td width="110" valign="top" style="margin-left: 5px">
            <div style="padding: 10px 0 0 0;">{TICKETLOGO}</div>
            <div style="padding: 5px 0 0 5px;">OrderID #{ORDERID}</div>
            <div style="padding: 2px 0 0 5px;">AcctID #{ACCTID}</div>
            <div style="padding: 2px 0 0 5px;"><b>{TICKETHOLDER}</b></div>
        </td>
        <td valign="top" style="padding-top:10px; padding-left: 15px">
            <div style="padding: 15px 0 0 0; font-size: 16px;"><b>{EVENTNAME}</b></div>
            <div style="padding: 5px 0 0 0; font-size: 14px;"><b>{EVENTDATE}</b></div>
            <div style="padding: 15px 0 0 0; font-size: 14px;"><b>{VENUENAME}</b></div>
            <div style="padding: 0 0 0 0; font-size: 12px;">{VENUEADDRESS}</div>
            <div style="padding: 15px 0 0 0; font-size: 14px; padding-top: 8px;">{TICKETINFO}</div>
            <div style="padding: 3px 0 0 5px; font-size: 10px;">No Refunds or Exchanges</div>
        </td>
        <td width="100" valign="top">
            <div id="barcode" style="padding: 5px 0 5px 0; max-width:100%;text-align: right;">{BARCODE}</div>
            <div style="text-align: right; width: 100%; padding: 0 7px 0 0; font-size: 16px;"><b>{TICKETPRICEFULL}</b></div>
            <div style="text-align: right; width: 100%; padding: 0 7px 0 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{TICKETSECTION}</div>
            <div style="text-align: right; width: 100%; padding: 2px 7px 0 0; font-size: 12px;">{ORDERID}</div>
        </td>
        </tr>
    </table>
</div>

Thermal design option 2:

<style>
body { margin: 0 !important;}
.TicketLogo { width: 120px; height: auto; }
#barcode img { height: 130px; width: 130px; max-width:130px; max-height: 130px; }
</style>
<div class="TTicket" style="margin: 0px; height: 192px; width: 665px;">
<table width="100%" style="font-family: Arial, Helvetica, sans-serif; font-size: 12px;">
  <tr>
  <td width="140" valign="top" style="margin-left: 5px;">
    <div id="barcode" style="text-align: center; padding: 27px 0 10px 25px;">{BARCODE}</div>
    <div style="padding: 0 0 0 25px;">OrderID #{ORDERID}</div>
    <div style="padding: 5px 0 0 25px; font-size: 14px; font-weight: bold;">{TICKETHOLDER}</div>
  </td>
  <td valign="top" style="padding: 25px 15px 0 25px;">
    <div style="padding: 0px 0 0 0; font-size: 16px; font-weight: bold;">{EVENTNAME}</div>
    <div style="padding: 5px 0 0 0; font-size: 16px;">{EVENTDATE}</div>
    <div style="padding: 15px 0 0 0; font-size: 14px;">{VENUENAME}</div>
    <div style="padding: 5px 0 0 0; font-size: 12px;">{VENUEADDRESS}</div>
    <div style="padding: 15px 0 0 0; font-size: 14px; font-weight: bold;">{TICKETINFO}</div>
    <div style="padding: 10px 0 0 0; font-size: 10px;">No Refunds or Exchanges</div>
  </td>
  <td width="120" valign="top">
    <div style="padding: 10px 0 0 10px;">{TICKETLOGO}</div>
    <div style="padding: 5px 0 0 10px; text-align: right;">#{ORDERID}</div>
    <div style="padding: 5px 0 15px 10px; font-size: 14px; font-weight: bold; text-align: right;">{TICKETHOLDER}</div>
    <div style="padding: 5px 0 0 10px; font-size: 24px; font-weight: bold; text-align: right;">{TICKETPRICEFULL}</div>   
  </td>
  </tr>
</table>
</div>

Thermal Cover Template

<style>
.ThermalCoverSheet { padding: 30px 0 0 0; width: 530px; height: 190px; box-sizing: border-box }
</style>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; margin: 0 0 0 100px;">
<div style="padding: 0 0 0 0;">{FIRSTNAME} {LASTNAME}</div>
<div style="padding: 10px 0 0 0;">{ADDRESS1} {ADDRESS2}</div>
<div style="padding: 0 0 0 0;">{CITY}, {STATE} {ZIP}</div>
<div style="padding: 10px 0 0 0;">ORDER ID: {ORDERID}, QUANTITY: {TIXCOUNT}</div>
</div>

Thermal Receipt Template

<table width="484" style="font-family:Arial; font-size: 12px;" border="0" cellpadding="0" cellspacing="0">
<tr><td valign="top"><div style="padding: 15px 0 0 5px;"><b>ORDER #{ORDERID}</b></div>
<div style="padding: 2px 0 0 5px;">{TICKETHOLDER}</div>
<div style="padding: 15px 0 0 5px;">{PAYMENTTYPE}</div></td>
<td width="160px" valign="top" style="padding-left:15px;">
<div style="padding: 15px 0 0 0; font-size: 16px; text-align: right;">ORDER #{ORDERID}</div>
<div style="padding: 2px 0 0 0; font-size: 10px; text-align: right;">{ORDERDATETIME}</div>
<div style="padding: 10px 0 0 0; font-size: 10px; text-align: right;">Subtotal: {SUBTOTAL}</div>
<div style="padding: 2px 0 0 0; font-size: 10px; text-align: right;">Service Fee: {SERVICEFEES}</div>
<div style="padding: 2px 0 0 0; font-size: 10px; text-align: right;">Facility Fee: {FACILITYFEES}</div>
<div style="padding: 2px 0 0 0; font-size: 10px; text-align: right;">Shipping: {SHIPPING}</div>
<div style="padding: 2px 0 0 0; font-size: 16px; text-align: right;"><b>TOTAL: {TOTAL}</b></div>
</td></tr>
<tr><td colspan="2" valign="top">
<div style="padding: 15px 0 0 5px;"><u>Signature</u></div>
</td></tr></table>

Laser Ticket Template

{Page}{P3}<link href='https://fonts.googleapis.com/css?family=Old+Standard+TT:400,400italic,700' rel='stylesheet' type='text/css'>
<style>.EventPoster { width: 190px; height: 285px; border-left: 0px solid #fff;}</style>
<div class="TicketWrapper" style="margin: 0 auto; border: 0px solid #eee;">
<table width="100%" cellspacing="0" cellpadding="0" border="0"><tr>
    <td width="210" valign="top">{EVENTPOSTER}</td>
    <td valign="top" style="font-family: 'Roboto', Arial, Helvetica, sans-serif;">
    	<div style="padding: 8px 0 0 0; font-size: 40px; font-weight: 400; {EVENTCOLORCSS} font-family: 'Old Standard TT', serif;"><i>{EVENTNAME}</i></div>       
        <table width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td>
        <div style="padding: 1px 0 0 0; font-size: 16px; font-weight: 300;">{EVENTDATENOTIME}</div>
        <div style="padding: 1px 0 10px 0; font-size: 16px; font-weight: 300;">{EVENTTIME}</div>
        <div style="padding: 1px 0 0 0; font-size: 16px; font-weight: 300;">{VENUENAME}</div>
        <div style="padding: 1px 0 0 0; font-size: 16px; font-weight: 300;">{VENUEADDRESS}</div>
        <div style="padding: 10px 0 0 0;"><table>
        <tr style="font-size: 14px; color: #999; font-weight: 300;"><td style="padding: 0px 20px 0 0;">SECTION</td><td style="padding: 0 30px 0 0;">ROW</td><td>SEAT</td></tr>
        <tr style="font-size: 40px; font-weight: bold;"><td style="padding: 0 15px 0 0; height: 20px; line-height: 0.8;">{SECTIONABR}</td><td style="padding: 0 15px 0 0; height: 20px; line-height: 0.8;">{ROW}</td><td style="padding: 0px; height: 20px; line-height: 0.8;">{SEAT}</td></tr>
        </table></div>
<div style="padding: 15px 0 10px 0; font-size: 14px; color: #999; font-weight: 300;text-transform:uppercase;">{SECTION}</div>
        <div style="padding: 0 0 0 0; font-size: 16px; font-weight: 300;">{TICKETHOLDER}</div></td>
<td width="200" valign="top"><table width="100%" cellspacing="0" cellpadding="0" border="0" style="font-family: 'Roboto', Arial, Helvetica, sans-serif;">
          <tr><td width="130" style="padding: 5px 0 0 0;font-weight: 300; font-size: 14px; color: #999;">CUSTOMER</td><td style="font-size: 16px; font-weight: 300;">{ACCTID}</td></tr>
          <tr><td width="130" style="padding: 5px 0 0 0;font-weight: 300; font-size: 14px; color: #999;">ORDER</td><td style="font-size: 16px; font-weight: 300;">{ORDERID}</td></tr>
          <tr><td width="130" style="padding: 5px 0 0 0;font-weight: 300; font-size: 14px; color: #999;">TICKET</td><td style="font-size: 16px; font-weight: 300;">{TICKETID}</td></tr>
          <tr><td width="130" style="padding: 5px 0 0 0;font-weight: 300; font-size: 14px; color: #999;">PRICE</td><td style="font-size: 16px; font-weight: 300;">{TICKETPRICE}</td></tr> 
          <tr><td width="130" valign="top" style="padding: 20px 0 0 0; vertical-align:top;">{BARCODE}</td><td height="100" style="font-size: 8px; font-weight: 300; vertical-align:bottom; line-height: 1.5; color: #999;">
          {PROMOTERNAME}<br>
          NO LATE SEATING.<br>
          NO REFUNDS.<br>
          NO EXCHANGES.
          </td></tr> 
        </table> 
        </td></tr></table>
    </td>
</tr></table>
</div>

Kiosk Ticket Template

<style>.TicketBarcode {width: 170px !important; display: inline-block;}</style>
<div style="padding: 100px 25px 100px 25px;font-family:'Roboto', Arial; font-size: 26px; max-width:650px; text-align:center">
<div style="padding: 0 0 15px 0; font-size: 60px">{TIMEDENTRY}</div>
<div style="margin: 0 auto 15px auto; border-top: 1px solid #000;"></div>
<div style="padding: 0 0 15px 0; font-size: 40px;"><b>{EVENTNAME}</b></div>
<div style="padding: 0 0 15px 0; font-size: 40px;"><b>{EVENTDATENOTIME}</b></div>
<div style="padding: 0 0 15px 0; font-size: 24px;"><b>{TICKETINFO}</b></div>
<div style="padding: 0 0 5px 0; ">{BARCODE}</div>
<div style="font-size: 24px;"><b>OID #{ORDERID}</b></div>
</div>

Batch Print Cover Template

<table width="{WIDTH}" border="0" class="CoversheetWrapper">
  <tr>
    <td style="padding: 5px 5px 5px 5px; vertical-align:top;">
    <div class="Txt18 Arial Bold Black LineBot" style="padding: 0 0 5px 0;">{LASTNAME}, {FIRSTNAME} - Order #{ORDERIDONLY}</div>
    <div class="Txt14 Arial Bold Black" style="padding: 5px 0 10px 0;">{EVENTNAME} on {EVENTDATE}</div>
    <div class="Txt14 Arial Black" style="padding: 0 0 10px 0;">Your Tickets - Order #{ORDERIDONLY} ({TIXCOUNT} Tickets)</div>
    </td>
  </tr>
</table>

Batch Print Receipt Template

<table width="{WIDTH}" border="0" cellspacing="0" cellpadding="0" class="SummarysheetWrapper">
<tr>
<td width="100" height="150" class="Logo"><img src="https://www.vbotickets.com/_images/eventmanager/thanks.jpg" width="100" /></td>
<td style="padding: 5px 5px 5px 5px; vertical-align:top;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="150" class="Arial Txt12 SpacerTopSm">Ticket Value:</td>
    <td class="Arial Txt14 SpacerTopSm Bold Right">{TICKETVALUE}</td>
  </tr>
  <tr>
    <td width="150" class="Arial Txt12 SpacerTopSm">Delivery Fee ({SHIPPINGTYPE}):</td>
    <td class="Arial Txt14 SpacerTopSm Bold Right">{SHIPPING}</td>
  </tr>
  <tr>
    <td width="150" class="Arial Txt12 SpacerTopSm">Service Fee:</td>
    <td class="Arial Txt14 SpacerTopSm Bold Right">{SERVICEFEE}</td>
  </tr>
  <tr>
    <td width="150" class="Arial Txt12 SpacerTopSm">Facility Fee:</td>
    <td class="Arial Txt14 SpacerTopSm Bold Right">{FACILITYFEE}</td>
  </tr>
  <tr>
    <td width="150" class="Arial Txt12 SpacerTopSm Bold LineTop">Order Total:</td>
    <td class="Arial Txt14 SpacerTopSm Bold Right LineTop">{ORDERTOTAL}</td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr>
    <td class="Arial Txt11">{NOW}</td>
    <td width="10"> </td>
    <td class="Arial Txt11">Account <b>#{ACCTID}</b></td>
    <td width="10"> </td>
    <td class="Arial Txt11">Order <b>#{ORDERID}</b> ({TIXCOUNT} Tickets)</td>
    </tr></table></td>
  </tr>
</table></td>
</tr>
</table>

Badge Print Tempalte

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="Arial">
<tr>
<td colspan="2" class="Txt11 Gray SpacerTop SpacerLeft"> {EVENTNAME} - {EVENTDATE}, {EVENTTIME}
</td>
</tr>
<tr>
<td colspan="2" class="Txt32 Capitalize SpacerTop SpacerLeft" style="letter-spacing: 0px;">{NAMEONCARD}</td>
</tr>
<tr>
<td class="Txt16 SpacerLeft Capitalize"></td>
</tr>
<tr>
<td colspan="2" class="Txt12 Spacer">#{ORDERID} - {ITEMINFO}</td>
</tr>
<tr>
<td>{TICKETLOGO}</td>
<td><div class="Barcode">{BARCODE}</div></td>
</tr>
</table>

Knowledge Base