We recently introduced a feature that allows you to customize the template for exporting PDF vouchers. This functionality lets you alter colors, add or remove attributes from the PDF file, change the original price, add a logo, and more.
Documentation is here - Vouchers | Powerlynx
This content is quite technical, so we provide examples on how to edit the template code to achieve your desired results.
Example #1 - add logo:
Consider adding your company logo to the voucher card like this:
Code of the template:
<html>
<head>
<style type="text/css">
@page {
sheet-size: 209mm 279.5mm;
margin: 0;
border: 0;
}
* {
box-sizing: border-box;
}
body {
font-family: Urbanist, Helvetica, sans-serif;
font-size: 8px;
line-height: 10px;
color: #ffffff;
}
.card {
padding: 8px;
width: 246px;
height: 160px;
float: left;
border-bottom: 1px solid gray;
border-right: 1px solid gray;
background: #1C335A;
background-image: url('https://docs.powerlynx.app/powerlynx-logo.png');
background-repeat: no-repeat;
background-position: 55% 10px;
background-size: 150px;
}
.card .card-header table {
width: 100%;
vertical-align: top;
}
.card .card-header table td {
font-size: 12px;
line-height: 20px;
font-weight: 700;
}
.card .card-header table td.name {
width: 80%;
overflow-y: hidden;
}
.card .card-header table td.price-label {
text-align: right;
padding-top: 2px;
font-size: 8px;
font-weight: normal;
overflow: hidden;
white-space: nowrap;
}
.card .card-header table td.price-value {
text-align: right;
font-size: 12px;
}
.card .card-body {
padding-top: 16px;
}
.card .card-body-limit {
padding-top: 24px;
}
.card .card-body-limit table {
border-spacing: 0;
vertical-align: bottom;
padding-top: 4px;
}
.card .card-body-code {
font-size: 16px;
line-height: 20px;
font-weight: 600;
padding-top: 4px;
}
.card .size {
font-size: 10px;
line-height: 12px;
font-weight: 600;
}
.card .card-body-online-limit {
width: 50%;
float: left;
}
.card .card-body-valid {
width: 50%;
float: right;
text-align: right;
}
.pt-12 {
padding-top: 12px;
}
.pe-4 {
padding-right: 4px;
}
.pe-16 {
padding-right: 16px;
}
</style>
</head>
<body>
{{range $index, $voucher := .vouchers}}
<div class="card">
<div class="card-header">
<table>
<tr>
<td>{{$.plan.name}}</td>
<td>Price</td>
<td>{{$voucher.formatted_price}}</td>
</tr>
</table>
</div>
<div class="card-body">
<div>Voucher code</div>
<div class="card-body-code">
{{if $.use_full_code}}
{{$voucher.full_code}}
{{else}}
{{$voucher.code}}
{{end}}
</div>
<div class="card-body-limit">
<div>
Traffic limit:
</div>
<table>
<tr>
{{if $voucher.is_total_traffic_limit_used}}
<td class="pe-4">Total</td>
<td class="pe-16">
<span class="size">{{$voucher.formatted_total_limit}}</span>
</td>
{{else}}
<td class="pe-4">Upload</td>
<td class="pe-16">
<span class="size">{{$voucher.formatted_upload_limit}}</span>
</td>
<td class="pe-4">Download</td>
<td>
<span class="size">{{$voucher.formatted_download_limit}}</span>
</td>
{{end}}
</tr>
</table>
</div>
<div class="pt-12">
<div class="card-body-online-limit">
Online time limit: <span class="size">{{$voucher.formatted_time_limit}}</span>
</div>
<div class="card-body-valid">
{{$voucher.formatted_expiration_text}}
</div>
</div>
</div>
</div>
{{if eq (mod $index 3) 2}}
<!--IT_IS_A_DIVIDER_DO_NOT_REMOVE_IT-->
{{end}}
{{end}}
</body>
</html>