Introduction and Purpose
The purpose of this document is to provide an overview of the existing capabilities of the Annex Cloud iFrame features for the loyalty member dashboard and Refer-a-Friend iFrame experiences for end-users. This document is not a technical requirement document, implementation guideline, or a sales guideline. Its primary goal is to provide information about the capabilities of Annex Cloud iFrames and the constraints associated with the solution.
Loyalty Member Dashboard iFrame
General Overview
- The Loyalty iFrame offers a comprehensive tool that grants members a 360-degree view of their loyalty program.
- The Loyalty iFrame can be configured to match the appearance of the iFrame to align with customers’ branding.
- iFrames allow clients to determine the data shown to the end user. However, the ability to manage data is not self-serve for the client and must be handled by Annex Cloud's customization team.
- Note that iFrames also have inherent limitations which should be taken into consideration before discussing designs with customers and prospects. For example, the look and feel of iFrames on mobile devices is very different from desktop devices.
Member Dashboard iFrame Structure
- The dashboard is divided into three sections, each serving a specific interaction point between the loyalty program and the member.
- The first section provides an at-a-glance view of essential metrics, such as points balance, tier status, and progress towards the next reward. These metrics give members instant insight into their current standing within the program.
- The second section contains tabs to navigation areas. Annex Cloud can support up to eight tabs, each with distinct capabilities.
- The final section dynamically adjusts to reflect specific features related to the active tab.
Configuring the Dashboard
- Within the Annex Cloud loyalty application, the Member Dashboard Configuration is found along the following path: Loyalty > Products > Member Dashboard Configuration.
- Annex Cloud provides a number of predefined templates that can be used as a starting point for configuring Member Dashboards. The Member Dashboard Configuration page shows the list of available default template themes and any current template themes in use. Additionally, new template themes can be activated or previewed, and current template themes can be edited with the new configurations. Lastly, once all the edits are made to a chosen template theme, the Member Dashboard Configuration page allows the necessary code to be exported and then implemented on desired eCommerce platforms.
- Each of the themes provided within the Member Dashboard Configuration can be previewed before activating or once certain edits are completed. Click Preview and a theme can be explored in detail, including viewing all the available tabs and the dynamic fields chosen as part of the configuration.
- Any default theme can be activated by clicking Activate in either preview mode or from the list of the cards. Additionally, a completely blank theme can also be chosen by activating the Custom Build Your Own Theme-(Custom) theme. Once a theme has been activated, it will show up under the Current Themes Section, where the theme can be further edited and the implementation code can be downloaded.
- Once a theme has been activated, the tabs present can be edited from the current theme section by clicking Edit.
- Configurable Header Tabs: Displays the various tabs for the fields that will be displayed on the website. These fields are Activity, Earn, Redeem, Join Now Message, and Custom Section 1. The dashboard can be customized with the help of Custom Sections 1. A note to be made is that these are not present in all the themes.
- Header Body: Displays the space where the header body HTML codes are added. The template can be edited completely or only the names of the entities can be changed as per the requirements.
- CSS Code: Displays the Dashboard CSS settings. Click the chevron icon to access the DSS settings. This section is used to add the CSS for the headers as shown in the template.
- Data Fields: This shows the hashtags (data fields) which can be used in the CSS. They are added to the above fields to display the data dynamically. The sections are created as per the data the tags fetch. The titles of the tags explain their function. A click on the copy icon copies the hashtags for the mentioned entity.
Program Sign Up from iFrame
- This screen allows members who have not opted in to the loyalty program to join or opt in.
- The screen highlights key benefits of the loyalty program to encourage members to opt in.
- The screen includes links to the loyalty program’s Terms and Conditions and Program Policies. Members must agree with the content on these pages before they can continue to the loyalty site.
- We do not need members to provide more information on this page. As the member is already logged into the customer portal, we can use the primary ID received in the Annex Cloud variable for the Opt-In process.
|
|
|
Member Information Header Section
- The member information section has flexibility to show the following metrics:
- Member Name
- Member Email Address
- Member Current Tier
- Member Points Balance
- Member Points on Hold
- Member Lifetime Points
- Total Spend
- Spend Amount to Next Tier
- Birthday (can be used to obtain a member's birthday)
- Required points to Next Tier (if the Tiers are points base)
- Each of the metrics listed above has two sections; label and value. The labels are flexible and can be changed per customer needs. For example, Current Tier can be renamed as Membership Level. However, the values listed under the labels are returned from the system and cannot be changed on the iFrame.
- See Configurable Header Tabs in the Edit section above.
- This section can be also be branded to reflect the loyalty program name or a logo.
Supported Tabs and Limitations
Annex Cloud supports up to eight tabs within a single loyalty dashboard.
For editing details, see Configurable Header Tabs in the Edit section above.
- Program Information Tab: Detailed breakdown of program tiers, point-earning rules, and benefits, offering a thorough understanding of the loyalty system.
- Earn Tab: Interactive guide and suggestions for members on how to earn points through various activities, purchases, or promotions.
- Reward Tab: Streamlines the process for members to exchange their points for rewards, view available codes, and understand redemption procedures.
- Activity Tab: Displays a comprehensive log of the member's loyalty interactions, transactions, and point changes, encouraging transparency and trust.
- Receipt Scanning Tab: A user-friendly interface for submitting proof of purchase, which is essential for points accrual, promotional entries, or warranty purposes. The tab includes guidelines on how to upload receipts and the types of receipts accepted.
- Hierarchy Management Tab: Members can come together to progress in the program based on their engagement, spending, or other predefined criteria. Members can send invites to others, exchange points within the group members, the member can level up based on the cumulative spend by the group member.
- Action Series (Badges): Action series (Badge) allows the member to achieve specific tasks or complete the milestone to earn the benefit and it increase engagement and satisfaction. It displays the completed milestone details, pending milestone details to complete the Action Series.
- Additional Tab: This tab can be utilized to display and make the member educate on the program Terms & Conditions, Program FAQs, Return Policies, Cancelation Policies, etc.
Tab: Benefits
- This tab represents the detailed breakdown of the program.
- It displays the number of tiers and how the members can achieve these tiers.
- Tiered Benefits, Reward and Discounts, Exclusive Offers and Promotions, Events, Express Shipping, Points Multipliers on the purchases.
Tab: Earn
- Interactive guide and suggestions for members on how to earn points through various activities, purchases, or promotions.
- This section provides information on the number of points that customers earn for every dollar spent.
- Engagement activities and its benefits: display actions such as signing up for the program, referring friends, completing a profile, subscribing to newsletters, following social media accounts, participating in surveys or writing reviews.
- All the actions generated in the configuration can be showcased on the iFrame. However, since not all actions require display, we employ HTML/CSS properties to conceal them. See CSS Codes in the Edit section above.
- Non-display actions such as purchase returns, points expiration, and redeem action are internal standard actions that do not need to be displayed here.
- For actions that require redirection to different pages, such as referral actions, newsletter sign-up, profile completion, and writing a review, we have set up specific redirections. When a member clicks on any of these actions, they will be redirected to the corresponding page to complete the process seamlessly.
- For social connections, it's important to adhere to the branding guidelines set forth by the respective social media providers.
- If the actions are one-time or if there is a limit set on the maximum points that a member can earn for an action, we mark that action as completed when the limit is exceeded.
We use the following hashcodes to retrieve values from the system and display in the iFrame.
| Hashcode |
| Action Button Title |
| Action ID |
| Action Limit |
| Action Status |
| Action Redirect URL |
| Points for Action |
 |
|
Tab: Reward
The loyalty program offers rewards to members in the form of Loyalty Points, which can be redeemed or claimed from the iFrame.
It provides a detailed overview of the available rewards in the program, including the required points to claim and the value of each reward.
It presents a list of both eligible and non-eligible rewards for the member. Through the iFrame, we can conveniently separate the rewards into these two categories.
When a member tries to claim the reward, they are prompted for confirmation. Upon successful claiming of the reward, the necessary points are debited, and the reward code becomes available to the member.
If the member selects a non-eligible reward, an alert message will be displayed.
This section also displays the member's claimed rewards, providing details such as the claim date, reward name, reward code, and its status (whether it has been used or is still active).
If there are any limits set on the reward claim and it has already been exhausted, we will display an alert message indicating that the reward has already been claimed.
We use the following hashcodes to retrieve values from the system and display in the iFrame.
| Hashcode | Hashcode |
| ACTIVE_REWARD_COUNT | USEDREWARDS |
| REWARDS | REWARD CLAIM DATE |
| IS ACTIVE | REWARD CODE |
| CREDIT REQUIRED | REWARD CODE STATUS |
| REWARD NAME | REWARD ID |
 |
|
 |
|
 |
Tab: Activity
- This tab offers members access to their transaction history, detailing all their past purchases or interactions that earned them points or rewards. It makes it easy for members to track their earning activities over time.
- It shows how members earned points, indicating the specific actions or behaviors that contributed to their point balance. This breakdown could include points earned from purchases, bonuses, promotions, referrals, or other engagement activities.
- The Activity tab provides details about the date of the transaction completion by the member, the action name, points earned from the transaction, and expiration information for these points.
- It shows the number of points that expire on a particular date.
- It indicates the status of the order when the order is placed on hold.
- It displays the redemption activities, along with the date of redemption, the points used for redemption, and the name of the reward.
- We utilize the action name and reward names configured in the setup to identify each specific transaction.
We use the following hashcodes to retrieve values from the system and display in the iFrame.
| Hashcode | Hashcode |
| ACTIVITYHOLDER | Action Id |
| Activity Date | Points Earned |
| Action Name | Points Expiration Date |
 |
|
Tab: Receipt Scanning Tab
Present iFrame supports receipt upload functionality in a loyalty program. iFrame also enhances user engagement, enables tracking of offline purchases, and provides members with additional opportunities to earn rewards.
To implement Receipt Scanning on the iFrame, certain prerequisites need to be configured at the admin level. More details can be found here about the configuration.
The member can upload the receipt from the iFrame with a valid image size and format.
The member can upload a single receipt or up to five receipts at once.
The iFrame shows a confirmation message upon successful submission of a receipt.
The member can view the receipts that have been uploaded previously, along with their current status of approval, rejection, or pending.
The iFrame provides specific guidelines for members on how to upload receipts and earn points. Additionally, we display some terms and conditions here..
We send acknowledgment emails to the member on the receipt summations.
We send emails to the member when a receipt is approved or rejected, along with all the necessary details.
Mostly we use the JavaScript functions to upload and submit the receipts. Along with that, we have Hashcodes to display the details on the iFrame.
| Hashcode |
| Receipt Image URL |
| Date of Receipt Upload |
| Points Awarded |
| Receipt Status |
 |
|
 |
|
Tab: Hierarchy Management
- Members can come together to progress in the loyalty program based on their engagement, spending, or other predefined criteria.
- Members can send invites to others, exchange points within the group members, the member can level up based on the cumulative spend by the group member.
- The admin has rights to remove other members from the group.
- Members can leave the group if they want to.
- When setting up Hierarchy Management on the iFrame, certain configurations need to be adjusted within the site admin.
- Any member can create a group and send invites to others to join the group.
- We can choose to limit a member's participation to just one group, or we can enable them to be part of multiple groups.
- The member can invite others while creating the group as well.
- A member has the ability to view the invite list of various members and then select which invitations to accept.
- It asks for confirmation before accepting or declining the invitation.
- The members have the ability to contribute points to the group and also transfer points to members of the group.
- For all the mentioned functionalities, we utilize JavaScript functions to execute specific operations. Additionally, we leverage the following hashcodes to retrieve values from the system and exhibit them in the iFrame.
| HashCode | HashCode |
| GROUP NAME | POINTS |
| ADMIN NAME | GROUP_ADMIN_UID |
| GROUP ID | GROUP_MEMBERS_UID |
| PENDING_INVITATIONS | FIRST NAME |
| GROUP POINTS BALANCE | UID |
| GROUP MEMBERS | Full NAME |
| GROUP ACTIVITIES | GROUP_PENDING_INVITATIONS |
| CREATE DATE | INVITATIONS ACCEPT STATUS |
| ACTIVITY |
 |
|
 |
|
 |
Tab: Action Series
- Action series (Badge) offer the member to achieve the specific task or complete the milestone to earn the benefit. It helps to increase engagement and customer satisfaction.
- We display both the completed action series and the remaining action series, allowing members to track their progress and complete specific activities.
- Display the required criteria or milestones to complete the action series.
Below are the hashcodes we utilize to retrieve data from the system for display on the iFrame.
| HashCode | HashCode |
| COMPLETED_ACTION_SERIES_RESPONSE | PENDING_ACTION_SERIES_RESPONSE |
| actionSeriesId | completedCredits |
| actionSeriesName | basedOn |
| activeBadgeUrl | minimumAmount |
| inActiveBadgeUrl | pendingCredits |
| description | spendAmount |
| tagline | actionData |
| termsAndConditions | actionId |
| bonusPoints | actionName |
| seriesCompletionDate | requiredCredits |
 |
|
 |
Tab: Static Content
- Static elements can be displayed in the tab and can educate the members on the program Terms & Conditions, Program FAQs, Return Policies, Cancelation Policies, etc.
- Introduction of the program, Enrollment Process, Membership Eligibility, Member rights and responsibilities, Earning and Burning Rules, Expiration Policies, Program Changes or Terminations, Contact Information and Support.
Survey Front End iFrame
The front end iFrame UI of Annex Cloud’s Survey functionality can be configured through the Loyalty application. Styling of the survey interface can be easily customized without the need for HTML/CSS coding. Any modifications made are reflected on the front end immediately once the theme is saved and applied to the survey.
Navigation: Products > Surveys.
Survey Information
The Survey Information screen allows you to enter basic information about the survey.
Survey Eligibility
The Survey Eligibility screen allows you to enter criteria to determine whether a member can view your survey.
Sections & Questions
The Sections & Questions screen provides tools to build your survey.
Survey Benefits
The Survey Benefits section allows you to provide rewards for members that complete the survey.
Survey Theme
The Survey Theme page provides tools for configuring the look and feel of your survey.
Refer-a-Friend iFrame
General Overview
The Refer-a-Friend program enables members to refer others to the client through various mediums, including direct email and posts on Facebook and Twitter. Members can also share their personal URL and Invite Code via SMS or any other social media platform they use.
The Refer-a-Friend program supports both standalone referrals and integration with loyalty programs. Each program has its own unique user flow for setting up and configuring the necessary components.
Dashboard Structure
The Refer-a-Friend has four major screens. Each screen has its own functionality.
Sign Up Page
The member enters the required details as shown on the screen to refer the loyalty program to others.
This page presents the benefits for both the referrer and the referee upon a successful referral.
This page can include the Terms and Conditions of the program or the member.
Once a member signs up for the program, they won't need to re-enter their details during subsequent visits if they remain logged in on the customer's website or portal. The customer/client is required to send the necessary details to the Annex Cloud variable, bypassing this step for future visits.
For details on configuring the Sign-Up page, click here.
Sharing Page
- After entering the details on the first page, the member will be redirected to the sharing page, where members can easily share the referral through various mediums.
- The member can share the referral via direct email, Facebook, or Twitter (now X).
- When a member initiates sharing via Facebook and Twitter (Now X), they are required to follow the login process and give consent to the app, as displayed on the screen, in order to successfully post or share content.
- The member can share the content with their friends and family members by entering their email addresses.
- The member has the option to copy the personal link and share or post it across different social platforms.
- The member also has a personal invite code, which can be shared via any social media platform. This includes a redirection link that allows the referee to enter the invite code and avail the associated benefit.
- When the member shares it on any social media platform, we display the confirmation screen.
- On this screen it displays the referral status and the sharing history of the member.
- For details on configuring the Sharing Page, click here.
Note: The screenshots provided are sourced from the page base iFrame. It's worth noting that we have the capability to set up all the aforementioned content within popups as well.
 |
|
 |
|
 |
Coupon Code Unlock Page
- There are two methods to obtain the coupon code for the referee.
- A friend can click on the shared link provided by the referrer and will be redirected to a page where they must enter their email address in order to receive the coupon code. Referees can access the link from Facebook, Twitter (Now X), or directly from their inbox if it has been shared by the referrer.
- A friend can access the URL shared by the referrer and follow the provided instructions. In this process, the referee needs to input their email address along with the referrer's invite code. Upon successful submission, the referee will receive the coupon code.
- When the referee receives the coupon code, they can store it in their email by sending it to themselves.
- The referee can copy the code and apply it at the checkout.
iFrame Standard Template Size (Recommended)
As previously outlined in this document, the contents displayed within the iFrame can be fully customized to align with customer requests and match their specific design preferences. However, to avoid the complex design and difficulties in customization, Annex Cloud recommends sample templates with sizes.
Loyalty iFrame
- Dashboard size:-Width- 1170px and Height- as per ratio
Header section:
Header section is divided in four section size -25% Each
- Brand name or Logo size as ratio or Requirement.
- Header label: -fonts-size:14px, font-family: ABCMonumentGrotesk-Bold
- Header Description: - font-size: 32px, font-family: ABCMonumentGrotesk-Regular
Tab section:
- Tabs: - height:42px; width-25%. -If more tabs add then width divide as per ratio, Background color :- as per theme
font-size:14px; font-family: ABCMonumentGrotesk-Bold
Tab section:
- Tabs: - height:42px; width-25%. -If more tabs add then width divide as per ratio, Background color :- as per theme
font-size:14px; font-family: ABCMonumentGrotesk-Bold
Benefit table:
Table Background color as per theme
- Benefits heading: - font-size:30px; font-family: ABCMonumentGrotesk-Regular
- Table heading: font-size:30px; font-family: ABCMonumentGrotesk-Regular
- Table label: font-size:14px; font-family: ABCMonumentGrotesk-Bold
- Table Column txt1: font-size:14px; font-family: ABCMonumentGrotesk-Regular
- Table Column txt2: font-size:14px; font-family: ABCMonumentGrotesk-Bold
Earn tab:
- Action Box:- width-336px, Height-240px, Background Color:-as per theme
- Action Icon: - icon size – width:30px, height:20px (size will be change as per ratio)
- Action Name: font-size:16px; font-family: ABCMonumentGrotesk-Bold
- Action Limit: font-size:14px; font-family: ABCMonumentGrotesk-Regular and Bold
- Action Button: width:150px: height:44px, font-family: ABCMonumentGrotesk-Regular, font-size:14px; background as per client suggestion
Reward tab:
- Reward Box Outer: - width-336px, height-315px, Background color- as per theme
- Reward Price: - font-size:70px; font-family: ABCMonumentGrotesk-Bold
- Reward Price text: - font-size:16px; font-family: ABCMonumentGrotesk-Bold
- Points text: - font-size:14px; font-family: ABCMonumentGrotesk-Bold
- Redeem Button: -width:150px; height:44px; font-size:14px; font-family: ABCMonumentGrotesk-Regular,
Reward table:
- Reward Table Main Heading: - font-size:20px; font-family: ABCMonumentGrotesk-Bold,
- Reward Table Heading: - font-size:14px; font-family: ABCMonumentGrotesk-Bold
- Reward Table column txt: - font-size:14px; font-family: ABCMonumentGrotesk-Regular
Activity Tab:
- Activity Table Heading: - font-size:14px; font-family: ABCMonumentGrotesk-Bold
- Activity Table text: - font-size:14px; font-family: ABCMonumentGrotesk-Regular
Refer-a-Friend iFrame
Sign Up Page:
- Background Image: - Full page background image Or Half page Banner image (as per requirement size used)
- Heading txt: - font-size: 65px; font-family: ABCMonumentGrotesk-Regular'
- Sub text: - font-size:14px; font-family: ABCMonumentGrotesk-Regular
- Input fields: - width-50%, and 100%; Height- 44px; font-size:14px; font-family: ABCMonumentGrotesk-Regular,
- Share Button: - font-size: 14px; font-family: ABCMonumentGrotesk-Regular, width:190px; height-44px, Background color as per theme.
Sharing Page:
- Heading txt: - font-size: 65px; font-family: ABCMonumentGrotesk-Regular'
- Sub text: - font-size:14px; font-family: ABCMonumentGrotesk-Regular
- Social Button: - Width:-33% Each, Height:-44px; Background -color:- as per theme
- Input Label: - font-size:18px; font-family: ABCMonumentGrotesk-Regular
- Input Field:- Height- 44px; widht:100%; font-size:16px; font-family: ABCMonumentGrotesk-Regular
- Share Button: -Width:250px, Height- 44px; font-size:14px; font-family: ABCMonumentGrotesk-Regular
Share By Email:
- Popup Size: - Width:730px; Height:427px; background-color:#white(FFFFFF)
- Heading text: - font-size:40px; font-family: ABCMonumentGrotesk-Regular
- textarea: - Width:-100%, Height:-90px; Font-size:18px; Font-family: ABCMonumentGrotesk-Regular
- Address text: - font-size:17px; font-family: ABCMonumentGrotesk-Regular
- Share Button: -Width:180px, Height- 40px; font-size:14px; font-family: ABCMonumentGrotesk-Regular
Thank you popup:
- Heading text: - font-size:40px; font-family: ABCMonumentGrotesk-Regular
- Sub text: - font-size:18px; font-family: ABCMonumentGrotesk-Regular
- Share Button: -Width:233px, Height- 40px; font-size:14px; font-family: ABCMonumentGrotesk-Regular
Unlock Page:
- Heading text: - font-size:65px; font-family: ABCMonumentGrotesk-Regular
- Sub text: - font-size:14px; font-family: ABCMonumentGrotesk-Regular
- Input Field: -Width:100%, Height- 40px; font-size:14px; font-family: ABCMonumentGrotesk-Regular
- Code Button:- Width:224px; height:40px; font-size:14px; font-family: ABCMonumentGrotesk-Regular
Referral Page:
- Heading text: - font-size:40px; font-family: ABCMonumentGrotesk-Bold
- Table Heading text: - font-size:18px; font-family: ABCMonumentGrotesk-Bold
- Column text: - font-size:16px; font-family: ABCMonumentGrotesk-Regular
- Button:- Width:240px; height:40px; font-size:14px; font-family: ABCMonumentGrotesk-Regular
