Badge template personalisation
Event badge templates can use the following personalisation field:
- {FirstName} or {First Name} - contact’s first name
- {LastName} or {Last Name} - contact’s surname
- {Goes By} , {GoesBy} or {Goes by} - contact goes by field
- {Company}, {CompanyName} or {Company Name} - contact’s company name
- {Job Title} or {JobTitle} - contact’s job title
- @Model.PageId - events page ID (not used)
- @Model.ContactId - contact’s Interaction contact ID
- @Settings.SiteUrl - URL of this Events App installation
- @Model.ContactType - the contact type additional field value
Badge templates CSS hooks
1. Each badge template must be entirely surrounded in a <div> element with a class of "page":
badge.html
<div class="page random_class">...</div>
2. Each badge template should have one of the following <meta> tags to help with sizing:
<meta name="PrintSize" content="letter_badge" />
<meta name="PrintSize" content="a4p_badge" />
<meta name="PrintSize" content="cr80" />
<meta name="PrintSize" content="br_landscape" />
<meta name="PrintSize" content="br_landscape_slim" />
letter_badge: width=215.9mm, height=279.4mm
a4p_badge: width=201mm, height=297mm
cr80: width=85.7mm, height=54.03mm, bleed = ( 8.503937, 8.503937, 8.503937, 8.503937 ), trim = ( 0, 19.842522, 19.842522, 19.842522 )
br_landscape: width=99.06mm, height=60.96mm, bleed = ( 0 ), trim = ( 0 )
br_landscape_slim: width=88.9mm, height=27.94mm, bleed = ( 0 ), trim = ( 0 )
3. Vuture will automatically add classes to each badge to help with styling.
first two badges.html
<div class="page first_couple">...</div>
left and right.html
<div class="page left_page">...</div>
<div class="page right_page">...</div>
numbered badges.html
<div class="page page_number_4">...</div>
<div class="page page_number_5">...</div>
EPS logos
The Events Application PDF generator now supports print-style EPS vector assets, for example logos or branding. These can be cropped using the Vx image editor, and appropriate styling is included below.
Badge templates across multiple pages
Vx will add classes to help with paging of either 2, 4, 6, 8,10, 12, 14, 16, 18, 22 or 30 badges per page (two, four, six, eight, ten, twelve, fourteen, sixteen, eighteen, twentytwo, thirty).
first two per set of eight.html
last two per set of six.html
Dividing elements will also be added and named as appropriate.
dividing element added to end.html
<div class="page last_of_twelve">...</div>
<div class="divider_twelve"></div>
Recommended styling
div[data-vx-vector] > img { visibility: hidden !important; }
.page { overflow: hidden; background: #fff; position: relative; float: left; page-break-inside: avoid; }
.page.left_page { clear: left; }
.page { /*outline: 1px dashed #ddd;*/ width: 90mm; height: 60mm; }
.page.left_page { margin-left: 10mm; }
.page.right_page { margin-left: 10mm; }
.divider_eight { clear: both; page-break-before: always; }
.page.first_of_eight { margin-top: 28mm; }
Example Badge
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8" />
<title>Test Campaign | badges</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link href="../_css/reset.css" rel="stylesheet" />
<link href="../_css/default_1.css" rel="stylesheet" />
<meta name="PrintSize" content="A4P_multiple" />
</head>
<body>
<div class="page page_large">
<div class="contact_type contact_type_@Model.ContactType"></div>
<div class="info">
<div id="txt_01" class="vx_text"><h2 class="@Model.ContactType">@Model.ContactType</h2>
<p class="company" style="text-align: center;">{FirstName} <br />{LastName}<br /></p><p class="company name">{CompanyName}</p></div></div>
<div class="line"> <hr /></div>
<div id="drag_anywhere_01" class="vx_drag_anywhere logo" style="position:absolute;left:186px;top:220px"><div id="img_01" class="vx_image" style=""><img src="../_images/rob.jpg" width="187" height="50" alt="" title="" style="" /></div></div>
</div>
</body>
</html>
