Changing the Call to Action
A Call-to-Action tile is included automatically inside each eCard, this can be a Reward like a gift card, a gift code, or just an advertisement from your company with a link to tap.
You will have a call to action inside each card that will look a little like the image below:
We call these Call-to-Action tiles, MERCHANTS.
You can create new Merchants or use our provided default Merchants to display your Reward or Call-to-Action depending on your need.
Examples
Basics
When you sign up to xo.cards, we create a default set of Merchants that you can edit.
You can also create new Merchants or use the default merchants. You can find them on the Merchants tab.
For example,
Holiday eCards
If you signed up on xo.cards to send Holiday eCards you will see 3 merchant options to choose from. eCard, No Gift Card, Text Code.
When you go to the Merchants tab you will see these three merchant options.
You can tap on each to see how it will display
From this screen you can see what they will display, and choose the one you want to use and edit the display, change the logo, colours, button colours.
You can also use our templating language (Liquid syntax) to display dynamic fields for example, name, amount, sender name, recipient name, codes, and more. Tap the question mark icon (in red in the image below) to see how to reference those values.
You can see how this templating language is used in the Message Title to display the sender name or change the sentence if sender name is not present.
{% if voucher.creator.displayName %}{{voucher.creator.displayName}} sent you an eCard!{% else %}You received an eCard! {% endif %}
You can add similar logic to the Link for example to show a dynamic ending by appending a code, or elsewhere in the text.
Gift Codes
If you signed up to xo.cards to send your own Gift Codes, then a new set of default merchants are created for you to get your started.
If you signed up to xo.cards to use the system with your own Gift Codes, then you will see the following pre-created choices of Merchants.
When you go to the Merchants tab you will see these merchant options.
You can tap on each to see how it will display for example :
Link
Notice the templating language in the Redirect Link field — we are using this as the a way to pass the full url to the system so it can be dynamic for the user.
{{voucher.payment.redeem.code}}Cash
This Merchant is configured to display a cash amount, notice the selected drop down under Display Format in the image above.
Points
Notice the reference in Message Title using
{{voucher.payment.amount}}to display the points total.
Bar Code
QR Code
You can edit any of these that suit your goals as well as use our templating language to display dynamic fields.
Finally if you signed up to xo.cards to send Gift Cards, then these merchants are automatically created based on every Gift Card and if automatically handled.
Gift Cards
When you go to the Merchants tab you will see every gift card that is available to you already pre-configured.
TIPS
Full Width Graphic inside the Merchant Card
Make the graphic full width by going to Configuration and toggling “Full Width Merchant Art”
Changing the Link
You can change the Redirect Link to any URL and change the Button Text to your own message.
Rewriting the URL Dynamically for a unique link
You can display a dynamic url using Liquid syntax.
Just change the Redirect Link to something like this : https://www.mysite.com/?discount={voucher.payment.redeem.code} .
Use this concept to also rewrite a URL to deliver a unique URL
Changing the Messaging and Personalizing it
For the messaging, the default messaging will show “Rob sent you an eCard” with some Liquid syntax that adds in the senders name if it exists or default to a generic message.
but you can change that also for example, you could change it so it displays something like “Rob sent you a gift from Gift & Things” or “Send a cash gift now” instead of the current message.
To do that you would use this syntax : {% if voucher.creator.displayName %}{{voucher.creator.displayName}} sent you a gift from Gifts & Things!{% else %}You received a gift from Gifts & Things!{% endif %}
Displaying a Promotional Code
If you are using a Promotional Code, then select Text Code from the drop down in the Display Format section and it will create a placeholder for the code.
For example, this could be another example Call-to-Action tile using the promotional code and more description text
Cloning a Merchant
Also, once you click-into a merchant you can CLONE it to experiment with it instead of editing the defaults.
Using a Merchant other than the default
If you want to use a merchant to display a Call to Action other than the default “eCard” one, select the one you want to use as the Default Merchant on your Configuration page and save it.
XO.cards Rewards Service — CSV columns
For the XO.cards rewards service, there is an Advanced tab where you can upload a CSV of columns. Below is an example referencing a custom column that the user added to the CSV called “pin”. They are a pin code in the short description of the Merchant card dynamically in the image below.
So for the Rewards service, if you add a new column, for example, called ‘beans’ then you can reference it like this in the Merchant card for re-display:
{{voucher.payment.redeem.beans}}Another support snippet that could help
{{name}} you want {{voucher.recipients[0].displayName}}
{{amount}} should be {{voucher.payment.formattedAmount}}
(or {{voucher.payment.amount}}
For {{expiry}}, because that’s an extra column you’ve added you can find
it in {{voucher.payment.redeem.expiry}}
Note that any new column you add can be found under
{{voucher.payment.redeem.*}}