Online Help

Help Table of Contents

Creating a Luminate CMS eCard

[Related Topics]

Luminate CMS eCards provide an attractive and fun way for constituent's to spread your organization's message. The constituent chooses an image, enters a brief message, and provides email addresses for one or more friends. A brief email message is then sent to each recipient with a hyperlink to the actual greeting card. The URL is:

http://< yourdomain >/ecard/display.jsp?cardID=

eCards rely on the highly flexible content type and display template structures of your Web site. Your site authors create eCards based on those content types. Since the page hosting the eCard Component can be any page on the site, it can be configured with any additional text or decoration you want. You cannot remove or edit the text strings (such as Recipient Name) displayed within the eCard Component.

Note: Luminate CMS eCards differ from Luminate Online eCards. For details on Luminate Online eCards, see Managing eCard Campaigns.

Although assigning a source code to the eCard  provides some tracking capability, there is no specialized eCard  usage report. If you are interested in more detailed usage tracking, please contact your Account Manager.

Note: The Send Page to Friend Usage report does not track eCards.

Creating an eCard

Creating an eCard involves the following tasks:

Note: Some steps can only be performed by certain administrators (specified in the individual topic). For instance, to configure a folder's properties (Step 3) you must be an assigned Manager for that folder.

Step 1: Prepare eCard Images

(Folder Author or Manager)

[Related Topics]

In this step you prepare both thumbnail and full-sized versions of your eCard images, and upload the thumbnail images. All images for eCards can be uploaded to two Website Explorer folder locations - one for thumbnail images and another for full-sized images.

To prepare the eCard images:

  1. Create the eCard full-sized images. Edit a series of images in any image-editing software that allows you to save Web-ready images, such as Photoshop. It is recommended that you use the same, Web-friendly size for all of your images. For example, you can set them to be no larger than 650 by 650 pixels and 72 pixels per inch.
  2. Create the eCard thumbnails:
    • Save thumbnail versions of each full-sized image.
    • Make the thumbnails identical or nearly identical to each other in size and aspect-ratio.
    • Name each thumbnail consistently with its associated full-sized eCard image. For example, the full-sized image may be monument-ecard.jpg, while its associated thumbnail is monument-thumb.jpg.
    • Create a unique folder for your site's thumbnail images, such as /ecards/thumbnails/.
    • Upload your thumbnail images to the new folder immediately, as the base content type, Image.

      Note: You do not have to create a unique content type for thumbnails as it is for the full-sized eCard images.
  3. Create a unique folder for your site's full-sized, eCard images, such as /ecards/ecard-images/. You will upload the full-sized images in Step 4.

[Back to Top]

Step 2: Create an eCard Image Content Type

(Website Administrator only)

[Related Topics]

Before site authors can upload and configure full-sized eCard images, a Website Administrator must create a unique eCard Image content type. Then site authors will be ready to create items of that type by uploading eCard images. It is also recommended that you add an item chooser to the author entry form for the content type so that authors can select images from a pre-defined list.

To create a content type for eCard images:

  1. Choose Content Types > All Content Types. The Content Types administration page displays.
  2. Click New Type. The Create Content Type page displays.
  3. Enter the following recommended settings:
    • Enter a label for the content type: eCard Image
    • Choose the body format: Image
    • Enter a description: Image displayed in an eCard.
    • Configure the Authoring Wizard for this type: Select the checkbox for Preview Published Item. Do not select any other checkboxes.
    • As the default folder, choose the new eCard-images folder that was created in Step 1 (For example: /ecards/ecard-images/). Do not select a thumbnail images folder, if there is one.
  4. Click Save. The eCard Images Content Type administration page displays.

To add an image chooser to the Author Entry form:

By adding an image chooser to the Author Entry form, authors will be able to select the eCard thumbnails images from a pre-defined set of images.

  1. To edit the Author Entry form, go to the content item's Properties page. Click Content Types > eCard Image > Properties.
  2. In the Fields area, click Edit. The Edit Entry Form window displays.
  3. In an empty table row (add a new row if necessary), do the following:
    • In the left-hand column, enter the name that will appear next to the Choose button (to identify the button to authors).
    • In the right-hand column, click the Form Element button , and select Menu to insert a drop-down menu.
  4. In the Drop-Down Menu Properties dialog box, do the following:
    • In the Label field, enter eCard Thumbnails and press Tab.
    • Select Required Field.
    • In the Menu Options area under the Dynamically Build Menu Options Based On, select A Set of Content Items.
  5. Click New Filter and enter the following in the New Content Filter dialog:
    • Label: eCard Thumbnails
    • Content Type: Image
    • Date Range: None
    • Folders: Click the Add Folder button. Select the folder you created for thumbnails, such as /ecards/thumbnails/.
    • Click OK.
    The Drop-Down Menu Properties window displays.
  6. Select Show an Item Chooser for This Field.
  7. In the Choose a Content Filter field, select eCard Thumbnails and click Done. On the Edit Entry Form page, the new Thumbnail Images menu appears in the last table row.

[Back to Top]

Step 3: Configure Properties of eCard Images Folder

(Folder Manager only)

[Related Topics]

Configure the folder you created for the full-sized images to only hold the eCard content type, and the folder you created for thumbnails to only hold image content types.

To restrict the eCard image folder to only full-sized, eCard images:

  1. In Website Explorer, navigate to the folder that was created to host the eCard Images content type. This should also be the default folder that the Website Administrator selected when configuring that type.
  2. Click to select the folder, then click the Folder Properties icon. The Folder Properties window displays.

    Note: Make sure you are editing the properties of the eCard Images folder, and not a parent or child folder.
  3. Click the Edit link in the Content Types area.
  4. On the Folder Content Types page, make sure that only the new eCard Image content type is selected.
  5. Click Save. The Folder Properties page re-displays.

To restrict the eCard thumbnail folder to only thumbnail images:

  1. In Website Explorer, navigate to the folder that was created to host the eCard, thumbnail images.
  2. Click to select the folder, then click the Folder Properties icon. The Folder Properties window displays.

    Note: Be sure you are editing the properties of the eCard thumbnails folder, and not a parent or child folder.
  3. Click the Edit link in the Content Types area.
  4. On the Folder Content Types page, make sure that only the new Image content type is selected.
  5. Click Save. The Folder Properties page re-displays.

[Back to Top]

Step 4: Upload Full-sized eCard Images

(Folder Author or Manager)

[Related Topics]

In this step, you upload all of your full-sized eCard Images to the eCard-images default folder.

Note: If you are using thumbnails, upload the thumbnails as the base, image content type. See Step 1: Prepare eCard images.

To upload full-sized eCard images:

  1. In Website Explorer, navigate to your eCard images folder.
  2. Click the folder, then click the New Item button.
  3. To create a new item, select New eCard Image.

    Note: If necessary, restrict this folder to the image content type (See Step 3: Configure properties of eCard Images folder).
  4. In the Authoring Wizard, configure properties for your first eCard image. You may want to select the File and Thumbnail first (to upload), then complete the Title and Description.
    • Title: This is the image title that will display on the live page, such as Alaskan Salmon.
    • Description: Describe the image. Keep in mind that you may later wish this description to display in your eCards to constituents.
    • File: Browse and select the full-sized image (not the thumbnail) you wish to upload. This is the image used for individual eCards.
    • eCard Thumbnail: Browse and select the thumbnail associated with the full-sized, eCard image you selected. (If you do not see the associated thumbnail, you may need to go back and upload that thumbnail image. See Step 1: Prepare eCard images.)
  5. Complete the remaining Authoring Wizard steps to submit or publish this eCard image.
  6. Repeat these steps for each eCard image you wish to add to your site.

[Back to Top]

Step 5: Prepare eCard Display Templates

(Website Administrator only)

[Related Topics]

eCards require three display templates: one to display the thumbnail gallery, one to display the full-sized image, and one to display the email notification. These must be created before site authors insert and configure an eCard component in a Web page. All three display templates belong to the eCard Image content type.

  1. Go to the eCard Image content type administration page.
  2. In the Display Templates area, click New Template to create the first of the three required display templates. Set up each template as follows:


    REQUIRED eCARD TEMPLATE

    DESCRIPTION

    Gallery List Display Template

    This template defines how the images display to a constituent when they are selecting an eCard image. For example, you may want the images to display as a single vertical column of thumbnail images, with a selectable radio button next to each. The constituent selects one thumbnail image, while the eCard will display the full-sized version.

    For a setup using thumbnails, you upload both full-sized images and their thumbnail versions: Step 1: Prepare eCard images and Step 4: Upload full-sized, eCard images). You then associate the thumbnail with the full-sized image.

    The following list display template can be used to format how an image set displays to constituents selecting an image for an eCard:

    <div class="templateRepeat" style="margin-bottom: 8px;"><input name="itemID"
    type="radio" value="${itemID}" /> <img src="${url}" style="vertical-align:
    middle;" /></div>

    Single Display Template

    When a constituent sends the eCard  to a friend, the image appears within a web page. This template defines how the web page is styled.

    The following sample display template can be used to display an eCard message:

    <h2><span class="templateVariable">&laquo;title&raquo;</span></h2>
    <p>Hey <span class="templateVariable">&laquo;ecard_name&raquo;</span>,</p>
    <table cellpadding="4" style="margin-top: 1em; width: 100%; background-color:
    #ffff66; border: #fdb727 2px solid;">
    <tbody>
    <tr>
    <td style="width: 100%;">Note: <span
    class="templateVariable">&laquo;ecard_note&raquo;</span></td>
    </tr>
    </tbody>
    </table>
    <p style="text-align: center;"><img src="${url}" /></p>
    <p>From</p>
    <p><span class="templateVariable">&laquo;ecard_from&raquo;</span></p>
    <p>Source Code: ${ecard_source_code}</p>

    Email Notification Template

    This display template defines the content and presentation of the HTML email notifying recipients that someone has sent them an eCard. For example, you can configure this template so that the email notification includes the eCard title, recipient name, sender's email address, and of course a link to the eCard, as well as the personal greeting (ecard_note) from sender to recipient. You can also insert other content. For instance, you can manually insert a Join link that goes to your sign-up page, then pick a unique source code to track use of the Join link.

    For more information on using source codes with eCards, see Step 7: Configure Your eCard.

    This following display template can be used to define the content and presentation of the HTML email notifying recipients that someone has sent them an eCard:

    <h2><span class="templateVariable">&laquo;title&raquo;</span></h2>
    <p>Hey <span class="templateVariable">&laquo;ecard_name&raquo;</span>,</p>
    <p><span class="templateVariable">&laquo;ecard_from&raquo;</span> sent you an
    eCard. You can see it <a href="http://< yourdomain >/ecard/display.jsp?cardID=${ecard_token}">here</a></p>
    <table cellpadding="4" style="margin-top: 1em; width: 100%; background-color:
    #ffff66; border: #fdb727 2px solid;">
    <tbody>
    <tr>
    <td style="width: 100%;">Note: <span
    class="templateVariable">&laquo;ecard_note&raquo;</span></td>
    </tr>
    </tbody>
    </table>

The eCard component can use the following special properties in templates.

SPECIAL DISPLAY TEMPLATE PROPERTY

WHERE IT CAN BE USED

DESCRIPTION

ecard_source_code

The Single Display template

Inserts the source code that was selected in the eCard Component dialog to track usage of this eCard. (See Step 7: Configure Your eCard.)

ecard_email

The E-Mail Notification template. Typically not for use in an eCard single display template.)

Inserts the Recipient Email Address (entered in the eCard form by the sender).

ecard_name

The E-Mail Notification template, the eCard single display template, or both.

Inserts the Recipient Name (entered by the sender in the eCard form).

ecard_subject

The E-Mail Notification template to configure the Subject line of the notification email. Can also be used in the eCard single display template.

Inserts the Email Subject (entered by the sender in the eCard form).

ecard_from

The E-Mail Notification template to configure the From field of the notification email. Can also be used in the eCard single display template.

Inserts the email address provided by the sender in the Your Email Address field of the eCard form.

ecard_note

The E-Mail Notification template, the eCard single display template, or both.)

Inserts text entered by the sender in the Personal Message to Recipient field of the eCard form.

[Back to Top]

Step 6: Prepare a Thank-You Page

(Folder Author or Manager)

[Related Topics]

A best practice is to create a custom thank-you Web page to display to the sender after an eCard is sent successfully. If you do not create a custom page, the sender sees a generic send-confirmation message.

To create a custom Thank You Page:

Create a new item of base type Web Page, and edit the body content as needed.

  1. In the Content Type Administration page, create a new content type based on the Web Page base type.
  2. Edit the body content with the thank you text. Specify the location of this page when you insert the eCard Component.

[Back to Top]

Step 7: Inserting the eCard Component

(Folder Author or Manager)

[Related Topics]

After the eCard images have been uploaded and styled, a Web site author can insert an eCard Component into the body of a Web page.

  1. Create a Web page or edit an existing one to host the eCard.
  2. In the Authoring Wizard Enter body content step, click the Insert Component tool.
  3. Select eCard from the Component Types drop-down menu. The eCard Properties dialog displays.
  4. Configure the eCard component and its properties as in the following table. If you or another administrator has already created an eCard folder, you may wish to save your eCard Web pages there. Publish the Web page when you are ready.

    ECARD PROPERTY

    DESCRIPTION

    Common Properties for all components

    Basic Component Dialog Properties

    Choose a content type

    Choose the content type on which instances of this eCard will be based. For example, your Website Administrator may have created a specific content type called eCard Image. (See Step 2: Create an eCard Image content type.)

    Choose a link set

    Choose a link set of images from the drop-down menu, such as Link Set of Animal Gallery Images. These are the images that constituents will choose from when creating an eCard on your Send eCard page. This component only displays link sets created here within the eCard Component.

    There is no limit to the number of images an eCard link set can include.

    • New Link Set: Click to create a new navigation link set (for example, if there are None available in the drop-down menu).
    • Edit Link Set: Click to edit the link set you selected in the drop-down menu.

    Selected Links

    Displays the images or links in this set, in the order they will appear.

    Choose a list template for the gallery

    Choose a list template to define how the image gallery (the link set you selected) for this eCard will display to constituents who are selecting an image for their eCard. See Step 5: Prepare eCard display templates.

    Choose a display template for the eCard

    Select an eCard, single display template for the eCard itself (displayed to the recipient as a Web page). See Step 5: Prepare eCard display templates.

    Display this page after a constituent successfully sends an eCard

    Select the Web page (such as a thank-you page) that will display to the user after the eCard  is sent. If you do not select a page, the user will see a generic send-confirmation message. See Step 6: Prepare a thank-you page.

[Back to Top]

Deleted or Expired eCard Pages

[Related Topics]

Deleting or expiring an eCard page can have certain ramifications. Suppose a constituent sends an eCard to a friend. Meanwhile, the page hosting the eCard expires or is deleted from the site. A recipient who clicks the link to the eCard sees one of the following:

  • A special, missing, eCard page - The application begins by searching for a "missing-card URL" property. Contact Support to define a missing-card URL that points at a Web page to display when an eCard is missing, or
  • A generic or custom 404 "File not Found" page if there is no missing-ecard URL.

[Back to Top]

Related Topics