Using the Offer Gallery
Table of Contents
- Overview of the Gallery
- How ESI Membership Tiers Work
- The Gallery Page
- Using JavaScript Tags
- Cascading Style Sheets (CSS) for the Gallery
Overview of the Gallery
The Gallery allows loyalty program members to view offers and account information on a website or in an app without rendering the offers on the client side—Exchange Solutions renders the offers. The Gallery is designed to be responsive, meaning it can be delivered to mobile devices such as tablets or phones.
The Gallery does not include tooltips or popups on any of the tabs. The client can include tooltips or popups outside the Gallery area.
How ESI Membership Tiers Work
The Member Tier Program gives members access to reward tiers based on their spending and behavior. Each tier can be associated with a different reward profile and a different threshold spending amount.
The Member Tiers Program section, accessible from the Member landing page in the Console, provides view-only information about the member's current tier program status, their eligible contribution, the tier period, and how far away they are from qualifying for the next tier.
The page displays the member's overall spending that is eligible for the Tiers program (the Eligible Contribution (Total)), as well as the current Tier Period. The member's Current Tier Status is shown along with how far away, in dollars, they are from the next tier. Finally, the Eligible Contribution (Current Tier) is shown to identify how much of the total contribution is attributed to the member's current tier status. The same information (except for Eligible Contribution (Current Tier)) is displayed in the Rewards Dashboard in the Tier Information section.
The Gallery Page
The Gallery is embedded in a page on the client website. The client should design the page to provide elements that complement the Gallery and reinforce the value exchange offered to members. Common elements that clients include on the page—outside the Gallery—include:
- Information related to the loyalty member program, such as an overview of the program and definitions for terms that new members may not be familiar with.
- Relevant loyalty program information, such as a static image showing tier levels, tiering thresholds, eligibility criteria, and the member's progress to the next tier. This content can be placed directly on the page using
divtags or in banners. The member's loyalty program ID number and/or company name can also be displayed in this way. - Banners, which can be implemented using the Exchange Solutions Banners feature in the Console. Banners cannot be included in the Gallery but can be implemented outside the Gallery area on the same page.
Offers Tab
This tab allows members to view and load all targeted offers, including load-to-card (LTC) and MASS offers. Offers are updated in real time as feeds are processed and as offer edits are made. The Gallery displays a configurable number of offers based on their sort ranking.
Each offer is displayed in a summary view (which includes an offer headline and short description) and can be expanded to a detailed view (including a detailed description and the Terms and Conditions statement). Separate offer copy and image fields can be provided in French and English.
Information in the offers is driven by the offer setup in the ES Console. The Copy and Creative elements used when creating an offer map to different areas within the offer as displayed in the Offer Gallery.
Header names for the Gallery (for example, "Upcoming Offers," "Available Offers," "Loaded Offers," and "Past Offers") are configured by ESI with client input during setup. The offer load/accept visual (Load/Loaded button) and the overview/detailed view (Show Details) are provided in the stock Offer Gallery. The Gallery is also built with mobile-responsive design features, and the client controls styling and layout using their settings.
Rewards Dashboard Tab
The Rewards Dashboard (which may be named the Member tab or another name) contains the member's loyalty rewards, tier status, and cart contributions to the current program. The member can view their balance(s) and tier information under this tab.
The Achieved On date for the current tier is displayed. Next Period Status can also be shown as a projection of what the next tier will be at the current spending level.
The dollar amount the member needs to reach the Next Tier can be shown in the Gallery. This setting is configurable: clients who use tiers can have the Gallery configured to display this amount on screen.
The Next Tier and the dollar amount are hidden when the member has reached the highest tier (since no additional spending will move the member to a higher tier).
Clients who do not use tiers will not have any Current Rewards information shown.
Transactions Tab
The Transactions tab contains a list of the member's most recent transactions, including purchases, adjustments, and discretionary points. The member can use the Filter to view specific transactions and view more details by clicking the arrow.
This tab includes a filter function that allows the member to search for transactions within a specific date range.
Vouchers Tab
The Vouchers tab contains up to 20 of the member's vouchers.
A voucher may also contain additional Notes information (for example, about the quarter the voucher is assigned to). Whether the Notes section appears depends on whether data is provided—if there is no data, the section does not appear.
Responsive Views
Due to the responsive design of the Gallery, the Gallery content can be delivered to smaller form factors including tablets and mobile phones.
The responsive design is based on the following screen widths:
| Device | Screen Width |
|---|---|
| Desktop | Above 768 px |
| Tablet | 568 px – 767 px |
| Mobile | 320 px – 567 px |
Using JavaScript Tags
Gallery functionality is delivered using a JavaScript tag on the client site. The client modifies their website to carry out browser-side processing using JavaScript tags; the user must then be validated and a user identifier must be passed to ESI via the Customer Experience (CUX) API. The architecture for client-side processing using JavaScript is shown below.
The Gallery consists of an Exchange Solutions-authored JavaScript tag that enables visualization and interaction with a member's ES Loyalty™ offers and account information. When a member navigates to a page, a method is used to communicate with a deployed web proxy server that makes Customer Experience API calls to retrieve offer data. The tag is provided to the client, who adds it to their Tag Manager. The client embeds the tag on desired pages or creates a dedicated page and provides links. Embedded pages invoke a function to initiate the Gallery widget rendering.
The tag requires the client to provide an encrypted Loyalty ID (that is, the card number) as a URL parameter. The value is scraped by the tag and passed as a custom header (named X-LOYALTY-ID) to the web proxy. This encrypted value is used as a form of authentication. The tag also passes another header (X-WEB-PROXY-AGENT) to identify itself to the proxy.
The Gallery presents an offer table containing Load-to-Card (LTC) Upcoming Offers, Available Offers, Loaded Offers, and Past Offers. Upcoming Offers is the default tab selected. Upcoming Offers and Available Offers can be accepted by the member. The Gallery also passes along Member Dashboard, Transactions, and Voucher information so that the member can view all of this information on one page.
Cascading Style Sheets (CSS) for the Gallery
A Cascading Style Sheet (CSS) framework provides the client with styling options for the Gallery to ensure that the look and feel of the Gallery matches their corporate website. A CSS framework is provided and the client can use it to match their styles.
The following sections walk through the CSS framework to identify which CSS elements correspond to visual elements in the Gallery.
Parent Classes
The first two classes in the CSS framework—.esl-gal-cont and .esl-gal-cont-spaces—are the parent and container classes for the entire Gallery. Any element in the CSS that is not explicitly defined inherits attributes from these two classes.
Main Nav and Sub Nav Classes
The .esl-gal-main-nav classes control the styling of the main navigation tabs, including their selected and active (hover) states.
The .esl-gal-subnav classes control the styling of the secondary (sub) navigation tabs, including their selected and active (hover) states.
Header and Sub Header Classes
The .esl-gal-header class controls the styling of the main titles on the page, including the horizontal rule displayed beneath them. The .esl-gal-sub-header class controls the next header level below the horizontal rule. The .esl-gal-sub-header-value class controls the value shown below each sub-header.
Container Classes for Balance Information
Containers are provided for balance information displayed across the Member Dashboard tab.
| Class | Controls |
|---|---|
.esl-gal-accBal-cont | Account Balance section |
.esl-gal-avlBal-cont | Available Balance section |
.esl-gal-rdmBal-cont | Redeemable Balance section |
.esl-gal-rdmValue-cont | Redeemable Value section |
In addition, the .esl-gal-sub-header-hr class displays a horizontal rule under the sub-header, when required. It is not shown in the diagram above.
These classes give the client control over showing or hiding individual boxes to tailor this tab for their members.
Classes in the Offers Tab
There are a number of classes for styling elements under the Offers tab. The top-level container for the offer gallery and all its contents uses the .esl-offer-gallery class.
At the top of the gallery, the navigation menus use the .esl-gal-subnav, .esl-gal-subnav .selected, and .esl-gal-subnav .active classes described earlier in this document. These options are contained within the .esl-offer-navigation class.
The container for all offer details uses the .esl-offerlist class, shown below in both the collapsed and expanded (more details shown) versions.
The title that corresponds to the selected sub-nav item uses the .esl-totaloffers class.
All of the information below the title is contained in the .esl-offer class. The class containing the content of the offer—.esl-offercontent—is nested inside the overall offer framework. The class .esl-offer .esl-offer-content describes the relationship between these two classes.
If no offers are available in the selected offer category, the .esl-noOffer class styles the "no offer" message.
Within the offer content section, the .esl-offerdesc section (above the horizontal rule) displays summary information about the offer.
The following classes are available within the offer, either as containers or as styleable elements:
| Class | Description |
|---|---|
.esl-offer-name | The main title within the offer, providing the name of the offer. |
.esl-offer-headline | Provides additional details about the requirements needed to earn offer rewards. |
.esl-offer-hr | The horizontal rule between the top and bottom sections of the offer. |
.esl-offer-expiryDate | The date on which the offer expires, or the range of dates during which the offer is active. |
.esl-loadOfferIcon | The container and image for the Load button, allowing the member to load the offer. .esl-loadedOfferIcon and .esl-loaded control the Loaded icon displayed once the offer has been loaded. |
.esl-offer-accToggle and .esl-offer-chevronImg | Used to display the toggle for expanding the offer to show more details (such as Terms & Conditions) and the corresponding downward-facing chevron icon. |
.esl-offer-togglesection | The container for the .esl-offer-accToggle and .esl-offer-chevronImg classes. |
The following additional classes are available within the offer:
| Class | Description |
|---|---|
.esl-offer-image | The container for the image used within the offer. The .esl-offer-image img class brings the image into the offer. |
.esl-offerTopSection | Used as the container for both the top section (above the horizontal rule) and the bottom section of the offer. For the top section, it is designated .esl-offercontent .esl-offerTopSection; for the section below the horizontal rule, it is designated .esl-offer-moreDetails .esl-offerTopSection. |
When the offer is expanded, three additional classes are used:
| Class | Description |
|---|---|
.esl-offeropenContent | Container for the expanded section when open. |
.esl-offerShortDesc | Container for the top section within the expanded view; provides additional details about the offer. |
.esl-offerTCs | Displays the Terms & Conditions associated with the offer. |
Classes Used with Frequency Offers
With frequency offers (where one or more purchases, or a specific number of items purchased, are required to fulfill an offer), progress bars are shown within the offer to indicate the member's progress toward earning the reward. The following classes are used to display the progress bars:
| Class Pair | Description |
|---|---|
.esl-offer-spendBar and .esl-offer-spendProgress | Container and progress indicator for offers that require a currency spend threshold to be reached. |
.esl-offer-transactionBar and .esl-offer-transactionProgress | Container and progress indicator for offers that require multiple purchases to receive the reward. |
.esl-offer-quantityBar and .esl-offer-quantityProgress | Container and progress indicator for offers that require the purchase of multiple items to receive the reward. |
Classes in the Transaction Tab
The table under the Transactions tab is populated with member information from Exchange Solutions. The content container (the table) is styled using the top-level class .esl-transaction-table. Two additional classes—.esl-transaction-table.nested and .esl-transaction-table:not(.nested)—allow further styling within the table: the first applies when content is present and the table is displayed; the second applies when no content is available and a message is displayed instead.
Classes in the Voucher Tab
Containers are provided for voucher cards under the Vouchers tab.
| Class | Description |
|---|---|
.esl-vhrcrd | Controls the styling for the entire voucher card. |
.esl-vhrcrd-left | Controls the styling of the left side of the card. |
.esl-vhrcrdright | Controls the styling of the right side of the card. |
The following classes control the styling of the contents of the voucher cards:
| Class | Description |
|---|---|
.esl-vhrcrd-label | Defines the properties that affect the Voucher Code label (for example, "Voucher code"). |
.esl-vhrcrd-code | Defines the properties of the section displaying the code the member enters to get their reward (for example, WELCOME20PERCENTOFFOFFER, CASHBACK30). |
.esl-vhrcrd-dollar | Defines the properties that affect the dollar value for the voucher code. |
.esl-vhrcrd-vert-sep | Defines whether a vertical separator is visible between the two sections of the voucher card. |
.esl-vhrcrd-metadata-lbl | Defines the CSS for the metadata labels ("Status," "Date Issued," "Expiry Date"), including placement on the right side of the card. |
.esl-vhrcrd-metadata-value | Defines the CSS for the metadata values, including placement on the right side of the card. |