Advanced Topics
Theming
See index.html to edit basic HTML associated with the theme of the app, such as the header/footer, logo etc. All of the CSS files in the application are editable, and we include the source maps for these files in case you want to view them using your browser’s developer tools.
For your convenience, we also include CSS variables to make base parts of the application easily configurable, such as branding colors. Below is a snippet containing some of the possible variables available for customization. See index.css for more details.
/* Start colors */
--empty-background-color: #ffffff;
--primary-accent-color: #088eff;
--secondary-accent-color: #153e43;
--tertiary-accent-color: #1d2023;
/* End colors */
/* Start text */
--D1-font: 50px/46px 'DINCondensed-Bold';
--D1-text-transform: uppercase;
--H1-font: 32px/26px 'DINCondensed-Bold';
--H1-text-transform: uppercase;
--H2-font: 18px/18px 'DINCondensed-Bold';
--H2-text-transform: uppercase;
--B1-font: 16px/20px 'AvenirNext-Medium';
--B1-letter-spacing: -0.5px;
--C1-font: 12px/10px 'DINCondensed-Bold';
--C1-opacity: 0.5;
--button-font: 18px/18px 'DINCondensed-Bold';
--button-letter-spacing: 3.3px;
--button-text-transform: uppercase;
/* End text */
/* Start Buttons */
--button-hover-color: #46aaff;
--button-select-color: #0082f0;
--button-disabled-color: #848484;
/* End Buttons */
When the gift package opens, you can customize the transition animations for the gift items that pop out of it. These are fully customizable CSS @keyframe animation sequences. We provide a few examples for you to choose from in index.css (see below), but you can also create your own @keyframe sequence for these items in animations.css. The animations require an odd and even keyframe sequence, in case you want to control how the odd and even gift item transition animations look on the page.
/* Start Animation Customization Variables */
/* Uncomment the two lines for each type of animation to enable them */
/* Slide in */
/* --gift-item-animation-odd: slide-in-bottom-odd 1s ease-out forwards;
--gift-item-animation-even: slide-in-bottom-even 1s ease-out forwards; */
/* Slide in blurred */
/* --gift-item-animation-odd: slide-in-blurred-bottom 1s ease-out forwards;
--gift-item-animation-even: slide-in-blurred-bottom 1s ease-out forwards; */
/* Roll in blurred */
/* --gift-item-animation-odd: roll-in-blurred-bottom 1s ease-out forwards;
--gift-item-animation-even: roll-in-blurred-bottom 1s ease-out forwards; */
/* Flip in */
/* --gift-item-animation-odd: flip-in-hor-top 1s ease-out forwards;
--gift-item-animation-even: flip-in-hor-top 1s ease-out forwards; */
/* Jello */
/* --gift-item-animation-odd: jello-vertical 1.5s ease-in forwards;
--gift-item-animation-even: jello-vertical 1.5s ease-in forwards; */
/* Jello blurred */
--gift-item-animation-odd: jello-vertical-blurred 1.5s ease-in forwards;
--gift-item-animation-even: jello-vertical-blurred 1.5s ease-in forwards;
/* End Animation Customization Variables */
Gift Package Customization
The view for the gift package where the gift contents pop out of (e.g. an envelope, box, etc.) is customizable using HTML and CSS. The view has an opened and closed state, and for each of these states, they must have an associated front and back view. The gift items will pop out of the gift package, in between the front and back views. As a default example in the app, we include an envelope with each of these views configured.
To configure the gift package, see content/giftPackage.js. The file contains two JS functions, function giftPackageClosed(wrapperUrl) and function giftPackageOpen(wrapperUrl). Each of the functions takes in a url parameter for a gift wrapper, if you would like to use Vouchr’s gift wrapper image as an asset. The functions return a JS object with front and back properties containing strings for the html to be used in each of these views. See below for more details.
NOTE Ensure any custom html content returned is properly sanitized to prevent potential cross-site-scripting (XSS) vulnerabilities.
function giftPackageClosed(wrapperUrl) {
return {
front: `
<div class="Envelope_Container Envelope_Shadow Envelope_Wiggle">
<img class="Envelope_TopClosedShadow" src="/assets/images/envelope/top-closed-shadow.svg" alt="">
<img class="Envelope_BottomShadow" src="/assets/images/envelope/bottom-shadow.svg" alt="">
<img class="Envelope_Base" src=${wrapperUrl} alt="">
</div>
`,
back: `
`
};
}
Displaying a closed envelope using the giftPackageClosed function and a passed in wrapperUrl
function giftPackageOpen(wrapperUrl) {
return {
front: `
<div class="Envelope_Container">
<img class="Envelope_BottomShadow" src="/assets/images/envelope/bottom-shadow.svg" alt="">
<img class="Envelope_TopOpen" src="assets/images/envelope/top-open.svg" alt="">
<div class="Envelope_Back"></div>
<img class="Envelope_Base Envelope_BaseClipPath" src="${wrapperUrl}" alt="">
</div>
`,
back: `
<div class="Envelope_Container Envelope_Back Envelope_Shadow">
<img class="Envelope_Base Envelope_BaseClipPath" src="${wrapperUrl}" alt="">
</div>
`
};
}
Displaying an open envelope using the giftPackageOpen function and a passed in wrapperUrl
Payment Content
When the Voucher is opened, any associated payments such as gift cards, are displayed as the last element in the list of media to be displayed.
To configure the custom payment content, see content/partnerPayment.js. The file contains a JS function function vouchrPartnerPayment(vouchrPaymentInfo, node), which takes in a JS object containing payment information from Vouchr, as well as a DOM node. You can insert any content you wish into the node, as well as execute any custom JS that you would like upon opening of the Voucher. Since you will have access to the DOM itself there are no restrictions on how you create the content, e.g. vanilla javascript, jQuery, or a framework such as ReactJS can be used here.
To include content/partnerPayment.js in the app, uncomment the <script> tag in index.html:
<script src="content/partnerPayment.js"></script>
function vouchrPartnerPayment(vouchrPaymentInfo, node) {
console.info("Executed custom partner function");
console.info("Vouchr payment info object", vouchrPaymentInfo);
var h1 = document.createElement('h1');
h1.innerText = 'Custom Partner Content';
node.appendChild(h1);
}
Displaying custom payment content above the envelope
VouchrPaymentInfo Object
Below is an example of a returned VouchrPaymentInfo JSON object. Some notable properties that you might find useful to be included in a view of some payment content are: amount, currency, merchant.paymentMerchantInfoList.type, and payment.destInfo.merchantInfo.giftCardPreviewImageUrl.. For more information, consult the Vouchr SDK documentation.
{
"amount": 0,
"currency": "USD",
"merchant": {
"id": 5629499534213120,
"name": "Cashless",
"photoUrl": "https://beta.vouchrsdk.com/merchant/images/merchant_default.png",
"filteredLocations": [],
"hasMoreLocations": false,
"backgroundColour": "#000000",
"paymentMerchantInfoList": [
{
"type": "CASHLESS",
"module": "CASHLESS",
"externalId": "cashless",
"currencyList": [
"AUD",
"CHF",
"EUR",
"GBP",
"DKK",
"CAD",
"USD",
"SEK",
"NZD",
"NOK"
],
"properties": {
"id": "cashless",
"type": "CASHLESS",
"configured": false
},
"minValue": 0,
"maxValue": 0,
"fixedProducts": [],
"name": "Cashless",
"photoUrl": "https://beta.vouchrsdk.com/merchant/images/merchant_default.png",
"giftCardPreviewImageUrl": "https://s3.amazonaws.com/image.vouc.hr/merchants/giftCardPreviews/freegift_temp.png",
"merchantPreviewImageUrl": "https://s3.amazonaws.com/image.vouc.hr/merchants/giftCardPreviews/freegift_temp.png",
"searchable": ["CASHLESS_cashless"],
"mustPrintToRedeem": false
}
],
"cashPurchases": false,
"onlinePurchases": false,
"network": "SURPRIISE",
"uri": "surpriise://merchant/vouchr/cashless",
"redemptionType": "UNKNOWN",
"redemptionLocationType": "UNKNOWN",
"sourceInfo": {},
"productSearchEnabled": false,
"categoryTypeList": [],
"configuredPaymentSource": false,
"externalId": "5629499534213120",
"socialNetworks": [],
"vouchrApproved": true,
"vouchrCatalogue": false,
"vouchrFeatured": false
},
"payment": {
"success": false,
"errorSource": "CREATOR",
"error": "APPROVAL_REQUIRED",
"paymentErrorDetailsCode": 0,
"paymentState": "VERIFY_SOURCE",
"requiresIntervention": true,
"paymentSourceOptions": [],
"paymentDestOptions": ["CASHLESS"],
"destInfo": {
"type": "CASHLESS",
"merchantInfo": {
"type": "CASHLESS",
"name": "Cashless",
"giftCardPreviewImageUrl": "https://s3.amazonaws.com/image.vouc.hr/merchants/giftCardPreviews/freegift_temp.png",
"merchantPreviewImageUrl": "https://s3.amazonaws.com/image.vouc.hr/merchants/giftCardPreviews/freegift_temp.png",
"mustPrintToRedeem": false
},
"fees": []
}
}
}
Social sharing images
Social sharing images are configured with meta tags in index.html:
<!-- Twitter Card data -->
<!-- Twitter summary card with large image must be at least 280x150px -->
<meta property="twitter:image" content="">
<meta name="twitter:card" content=""/>
<meta name="twitter:title" content=""/>
<meta name="twitter:description" content=""/>
<!-- Open Graph data -->
<meta property="og:title" content=""/>
<meta property="og:type" content=""/>
<meta property="og:image" content=""/>
<meta property="og:description" content=""/>
<meta property="og:site_name" content=""/>
For a complete description of these tags see Open Graph Protocol and Twitter Developer Docs.
Dry Open
A dry open can be configured by setting the dryOpen option to true in config/config.js. This will prevent the user from being able to open the gift package. Content to be displayed below the gift package is supplied by a function called dryOpenContent provided in the file content/dryOpen.js:
function dryOpenContent(voucher) {
return '<h1>I am displayed below the envelope</h1>';
}