Content Builder : Creating your first eCard

Signup at https://xo.cards

Watch an eCard being created in this video then follow the instructions below to do it yourself.

Watch how to create an eCard using our Card Builder!

For Pro & Enterprise Tier users: You can create/edit/manage the existing catalog of content. All the sections below are accessible to clients with these Tiers.

For Free & Business Tier users: You can only edit your Default Template (see this article) and the Email Template (addressed near the end of this article) which is relevant for the Rewards service.

How To : The Basics

Your eCard Catalog (All Tiers)

Check out the eCard store that we auto-generate for you. Go to Standalone Site on the Home Page and click the link the system gives you, see the video below

Check out your ready-made auto-generated eCard store

Managing Content (Pro Tier)

Your auto-generated eCard site comes pre-populated with Vouchr’s default content but you can hide any eCard or category of default content. Start on your Content Management Page and watch the video how to hide content and categories

Hide default eCards, Categories

To kick off creating your first eCard, go to your Content Management Page, and choose either +Template button to start from scratch or choose an eCard that you like the look of and Clone it. See the video below

Start a new eCard from scratch or by cloning an existing one

The key elements for creating quality eCards (All Tiers)

Catalog View (Pro Tier)

On the Discovery Editor tab you need a Title and a Foreground image — this is what displays in the eCard catalog to advertise the eCard. Add a nice background like in the example and an image and you will see the preview to the right. Note — you can add a gif here too so its more engaging when browsing.

Add Title, Foreground, Background on the Discovery Editor tab so your eCard displays properly in the catalog.

eCard “Opened State” view (All Tiers)

Switch tabs from Discovery Editor to the Gift Editor. This is where you build the actual eCard contents — The left side is where you add elements and the right side is a live preview of the eCard you’re building. Use the “Add Content” section on the left to add most media elements.

Use the “Add Content” section to add most media elements to your eCard

To create a quality eCard you should focus on 4 elements

1. A nice Background

2. Video (recommended to include sound in the movie). Alternatively a YouTube Clip, a GIF or Image (found in “Add Content”)

3. A Note (found in “Add Content”)

4. A Reveal Sound (this is played upon opening of the envelope) (found in “Add Content”)

See below the left side and how it relates to the eCard on the right for the Background, Video, and Note for this eCard.

Use the Add Content section to add a background, video, note, and reveal sound

Check the note settings to the left for an example how to to create a nice note with border and background

View it in the live store to check your work (Pro Tier)

Experiment with this until you get the hang of it then view it in your live store.

Preview your eCard by checking it out in your live store

If you can’t see it in your live store make sure you ‘enable’ your new eCard by clicking on the 3 vertical dots and choose Enable.

Make sure you enable your eCard to see it in the live store — tap the 3 vertical dots to enable it

eCard “Closed State” View (All Tiers)

Go to Gift Editor and check “Closed” to see the closed state.

Focus on the following elements for a nice “closed state”

• Background
• Button text
• Display text
• Confetti
• Packaging (the envelope)

See image below for Reveal Background, Button Text, and Display Text for the “closed state” of the eCard.

In the Gift Editor tab check “Closed” to see what the recipient sees when they first receive their eCard. Then in the Reveal section you can change the text and button text and background colour of that page.

Next turn on Confetti and upload a custom SVG to use instead of the default shapes. See Video

Configuring Confetti in the Gift Editor tab

And add a GIF or Image as Packaging — Vouchr system does the work for you, simply upload an image or GIF in the Packaging section and we’ll convert it to an envelope (use 400x300 or 4:3 aspect ratio). See the video below.

Adding a GIF or IMAGE as packaging — we do the work for you. To add custom shapes for packaging see TIPS below.

For custom shapes for packaging see some TIPS below.

Position your eCard in the catalog (Pro Tier)

Drag and drop your eCard to the category you want it live in and make sure its enabled (click the vertical 3 dots and choose ‘enable’ and don’t forget to save).

Drag and drop to different categories. Note you can add eCards to categories also in the Discovery Editor while you are editing it (See TIPS below).

See below how to add your eCard to categories while in the eCard editing view

See another example of an eCard being built here

Refer to our content creator guide for all design guidelines

Tips —

Enable your content so its visible! (Pro Tier)

Whenever you import a new piece of content or create a new piece of content, check the home page of the catalog and make sure its enabled. By default it will be disabled so you don’t accidentally publish an incomplete eCard.

If you can’t see the eCard you created in your store, go to your Content Management page to make sure its toggled ON

Change the Call to Action in your eCards / Display Gift Cards or Promotional Codes (All Tiers)

Every eCard comes with a default call to action. You can change the style, link, and much more in the Merchants section.

See more details on how to customize the call to action card here, including how to display gift cards, promotional codes or more see post about “Changing your Call to Action”

Editing the Packaging (All Tiers)

How to add and preview packaging to your eCard. We do the work for you — just add a GIF or an Image and we create the entire envelope effect. For more custom envelopes, play around with creating a custom envelope.

Custom Packaging — Custom Shapes

An example of a live custom packaging on our llamagram demo site and another custom packaging.

To see how it was created, go to the Packaging option in your dashboard where you can find a bunch of premade ones including these examples. Also refer to our content creator guide for more specific details.

Y Offset (in this case -150 to -200) — use this to move the Closed State closer to the open button when needed. Reveal Delay will delay the opening of the envelope by that amount of time — this is handy when you have a GIF for the Opened State that you want to play before the envelope opens. Content Bounding Box lets you set where the confetti should pop out of the envelope. You will need these for every custom packaging. Note that for the animation on the left, the artist used an animated GIF for both the closed and open states plus the Reveal Delay, Bounding Box, and Y Offset. Note that for animation to the right, for the closed-state envelope there are two layers on the closed state which makes the animation nicer., the designer also used the Y-offset, Bounding Box but not the Reveal Delay.

Also pay attention to the bounding box, this is where you want the confetti to exit from the envelope. Tap “Edit Content Bounding Box” and then adjust the blue square where you want the confetti to come from.

The bounding box option lets you move where the confetti comes out from the custom packaging

Video of two different types of custom packaging — Static and GIF

Add a Reveal Sound (All Tiers)

Ada a “Reveal Sound” by choosing Sound from the Add Content drop down. This will play upon opening the eCard. To find a great resource for sounds check out https://artist.io

The sound setting in your dashboard, this sound plays when the eCard is first opened and will get muted if there is sound in an accompanying video.

Sound in Videos

If you embed sound in your Video, then it will automatically pause the reveal sound (above) when the movie plays. If you want the video to act like a GIF ie. it will play even when offscreen and loop, there is a checkbox called Display as GIF. That is used mainly if there is no sound in the movie so the reveal sound will continue to play when viewed.

Adding custom confetti (All Tiers)

Add a nice svg for custom confetti and play with options in the confetti section

Search for the “Snack Rain” eCard on your Content Management Page to see settings and svgs used to get that effect. You can see the live Snack Rain template here.

Adding eCards to categories (Pro Tier)

Another way to add eCards to categories in in the Discovery Editor instead of drag and drop

Change scroll timing for your Images and Text (All Tiers)

The system calculates scroll time automatically, but if you find it too long or too short you can edit this. For the best experience make sure the scroll time is perfect so the user doesn’t have to wait too long.

Adjust scroll time if you find its scrolling too fast or too slow

Adding Offers (Pro Tier)

Create a new offer here https://xo.cards/dashboard/offers (note — be sure you turn it ON before saving it)

You can attach this offer to an individual piece of content just edit a piece of content and select “Offer” from the Gift Editor tab.

You can also attach this offer globally so it appears with every eCard sent out, to do this select Default Offer on the Configuration page.

Event Dates! (Pro Tier)

You can program content year-round from the Dashboard for any event, observance or holiday.

Go to the Events section of the Dashboard. This is where you add certain events and time frames for those events for example, Women’s History Month from March 1 to 30th.

For Categories — you can attach an event which will order the category to the top of the page during the time frame for that event.

Click on ‘Edit’ next to any category (or create a new category) and attach an event to the category so it will move to the top of the page during that time period.

Drop down of events inside the category to select

For eCard content — you can attach an event to an individual eCard and that will add it automatically to the Featured carousel that displays during that time frame.

Choose the Featured Event inside each eCard and that will position it inside the Featured category during that time period.

Email support@xo.cards