Loyal Patron Website Tools Guide

Introduction

This Website Tools Guide includes implementation instructions for webmasters that covers the following engagement strategies for visitors to interact with your website:

We highly recommend you forward this guide to your webmaster for implementation. Your webmaster will be the ideal resource to perform this straightforward implementation as they are familiar with your site's layout and branding schematics.

EXTREMELY IMPORTANT FOR BUSINESSES THAT DISTRIBUTE CARDS

If your business circulates gift cards and/or rewards cards as part of a stored value program where the back of your card advertises your website address as an online card activation option and you can't complete this website tools guide implementation  before the cards are distributed to patrons, BE SURE TO PUBLISH PROMINENT BUTTONS/LINKS ON YOUR WEBSITE that will redirect patrons back to the proper Signup and Login links on your vendor’s default program website.

Create an Activate Account button/link that links to <a href="https://loyalpatron.com/lp_patron_register_activate_card.php">Activate Account</a>

Create a Member Login button/link that links to <a href="https://loyalpatron.com/lp_patron_login.php">Member Login</a>

These links will temporarily allow patrons to register and login while you complete the full integration.

Webmaster Integration Instructions

You should prominently announce/display your Loyalty/Rewards/VIP program on your website's home page in addition to creating at least two (2) new web pages for your site, some of them with specific <iframe> tags.

All pages can have your site's usual header, navigation, and sidebar, but they are not required. The content area for the hosted pages should be a minimum of 600 pixels wide. For <iframe> tags, you can use the width attribute to define the <iframe> width.

When experimenting with <iframe> height, it is very important that you keep the scrolling attribute set to "auto". scrolling="auto"

VERY IMPORTANT: If operating a stored value program where gift card and/or reward transactions are processed through a terminal, you'll be following BOTH Step 1 (Signup) and Step 2 (Login)Do NOT combine the signup page (Step 1) and account login (Step 2) tags on the same page of your site. This means plan on setting up Step (1) Create New Patron Registration Page (Signup) on a completely different webpage from Step 2: Create Patron Account Login Portal (Login).

WARNING: If you stack Step 1 (Signup) page on top of or underneath the Step 2 (Login) page your page will be unusable on some devices and give website visitors problems when interacting with these pages on your site.

You Need Your Merchant ID for the Steps Below

Your merchant ID is shown in the upper right corner of the HOME screen when signed into the back office with Administrator security clearance. The merchant ID is circled in red in the screenshot below.

You will be required to substitute the merchant ID value in place of '9999' in the <iframe> tags in the steps below.

If you cannot locate your merchant ID, please request your ID by sending an email to support@loyalpatron.com.

Step (1) Create New Patron Registration Page (Signup)

The fields displayed on the signup form (Name, Email, Mobile, Birthday, subscriber list interests, etc.) are controlled inside the back office from SETTINGS > Registration Settings by a user with Administrator security clearance.  If operating a stored value program where gift cards and/or reward transactions are processed through a terminal, be sure to set the Collect Card ID field to either "REQUIRED" OR "Optional" (for supporting card-less registration).  Card-less registration allows patrons to signup without a physical card ID# and be identified by their mobile number at the terminal. If operating a Loyalty Kiosk and/or WiFi Plus program (no stored value) then set Collect Card ID to "Hidden" in SETTINGS > Registration Settings.

This page hosts the account registration form where patrons go to register and activate their Loyalty/Rewards/VIP program account. This page is typically linked from an Activate Card (for merchants running card program) or Activate Rewards (for merchants offering card-less programs) link in your navigation or on a special landing page for your gift/rewards card program. You can name this button/link (see example below) anything you want as its personal preference.

Include this code to display the registration form in the content area of the new page:

<iframe src="https://app.loyalpatron.com/acgpl/iframe/cardholder/register.php?m=9999" width="100%" height="1400px" scrolling="auto" onload="window.scrollTo(0,0);"></iframe>
VERY IMPORTANT: You must replace the value of the M parameter (m=9999) with your actual merchant ID# (see inset box above).
This is used to:
  1. Restrict patron access to only your business.
  2. Obey your account's Registration Settings in the back office.

Once included the <iframe> portion of the page should look like this depending on whether Collect Card ID field in SETTINGS > Registration Settings is set to "Required(left image) or "Optional" (center image) OR your page will open up the signup form instantly if Collect Card ID in SETTINGS > Registration Settings is set to "Hidden" (right image).


Collect Card ID = Required

Collect Card ID = Optional

Collect Card ID = Hidden

Styling options

CSS styles cannot be applied to <iframe> buttons (color, etc) due to cross-domain content restrictions.

If your page background interferes with the <iframe> content, you can make the <iframe> content non-transparent. Add this attribute to the <iframe> tag: style="background: #fff;"

Your particular site layout might not need a height specified in pixels. Try this: height="100%"

To eliminate the border around the <iframe>, add frameborder="0" to the <iframe> tag.

Using a white background is recommended for optimal viewing.

All app.loyalpatron.com links should be specified as https. They will be redirected to https from http in all cases anyway. Container pages that are http will load an iframe referencing https just fine.

All pages can have your site's usual header, navigation, and sidebar, but they are not required. The content area for the hosted pages should be a minimum of 600 pixels wide. For <iframe> tags, you can use the width attribute to define the <iframe> width.

When experimenting with <iframe> height, it is very important that you keep the scrolling attribute set to "auto". scrolling="auto"

NOTE: We include a "Help Registering" link for patrons who experience difficulty signing up for your Loyalty/Rewards/VIP program. This link opens a trouble ticket form that is received and resolved by our Customer Care specialists on your behalf to help your customers complete signup.

Step (2) Create Patron Account Login Portal (Login)

THIS STEP IS ONLY APPLICABLE FOR STORED VALUE PROGRAMS

Step 2 (Login) is only applicable for merchants who operate a stored value program where gift and/or reward transactions are processed using either the Virtual, VeriFone or certified POS terminal. If your business is not processing stored value transactions this step is unnecessary. Proceed directly to Step 3 (Confirmation).

This page hosts the login, summary, activity, and profile content when patrons login using their card/email/mobile and password to access their account online. Most webmasters typically link this page from an "Account Login" or "Member Login" link in your navigation or special gift/reward program landing page.

To include account content within your page use this code:

<iframe src="https://app.loyalpatron.com/acgpl/iframe/cardholder/account.php?m=9999" width="100%" height="2000px" scrolling="auto"></iframe>
VERY IMPORTANT: You must replace the value of the M parameter (m=9999) with your actual merchant ID# (see inset box above).
This is used to:
  1. Restrict patron access to only your business.

Once included, the <iframe> portion of the page should like this:


NOTE: We include a "Get Help" link for patrons who experience difficulty signing into their Loyalty/Rewards/VIP program. This link opens a trouble ticket form that is received and resolved by our Customer Care specialists on your behalf to help your customers login successfully.

 


After this step is complete, patron's will have the ability to login to their account over your website. Patrons will be able to perform the following functions:

  • Check currently available Gift, Rewards and/or Comp stored value balances
  • Update their profile online (i.e., change their email address or privacy settings)
  • Review history of transactions (sales, loads, redemptions) processed through the Virtual or POS terminal.
  • Update their credit card on file for recurring membership transactions (requires Membership Auto Pay module)

Step (3): Create New Account Activated Page (Confirmation)

In this step, your webmaster will create a landing page off your web domain where the patron is taken directly after clicking the ACTIVATE button sent to their email as a double opt in procedure after submitting the registration form as configured in Step 1 (Signup). By creating an account activated confirmation page we are able to route the patron back to your website. If you don't provide us with this new page link patrons will be routed to a generic landing page confirmation screen instead of routing the patron back to your website.

Please create a new page that flows off the branding of the existing website that lets patrons know their loyalty/VIP/rewards (whatever you are calling your program) account is activated.

For merchants running a stored value program where balances are accumulated and redeemed through a terminal, this confirmation page should contain a link to the account login page configured in Step 2 (Login) above.

Final Integration Configuration

When you have defined the location of the Account Activated confirmation page you have two options.  A user with Administrator access clearance can add this page directly to the back office by following these easy steps:

  • Click SETTINGS > Business Profile
  • Scroll to the field, ‘Website Private Labeling Account Activation URL’ and add landing page URL.
  • Click Save to submit changes.

Alternatively, you can email the complete landing page URL to support@loyalpatron.com and our Tech Support department will add it for you and confirm back when complete.  Then Step 1 (Signup) will be ready for final testing.

Step (4): Update Existing Index Page (Home Nav)

Once you have the applicable new pages (above) in place, you are ready to launch your Loyalty/Rewards/VIP program across your site. You should consider adding links to your main nav, footer and site maps to prominently advertise your Loyalty/Rewards/VIP program to visitors so they know how to signup and optionally, login to their account if your running a stored value program.

Step 5: Test New Patron Pages (Test)

At this point, you should be able to click on the new page link from Step 1 (Signup) and follow the prompts to complete signup.
  • If Collect Card ID = "Optional" in SETTINGS > Registration Settings select the "Use Mobile Phone Number" option to create a card-less registration profile.
  • If Collect Card ID = "Required" in SETTINGS > Registration Settings, please contact support@loyalpatron.com and request a valid card ID# you can test with.

After submitting the signup form, check your inbox for a double opt in verification email with an Activate button.  Click or tap the Activate Button and verify you are taken directly to the Account Activated Confirmation page created during Step 3 (Confirmation).

If operating a stored value program, you should now be able to click on the new page link from Step 2 (Login) and test logging into your account as a real customer would do to check balances, update their profile or check transaction history.  Please check the layout and click through the various tabs to verify site visitors will receive a smooth user experience when signed in as a patron.

NOTE: You can delete all testing and real profiles associated with your mobile number in the system by texting the word "wipe" to either 55678 (in the USA) or 70734 (in Canada). This action cannot be undone but is useful for removing test profiles.

CONGRATULATIONS ON A JOB WELL DONE!
Patrons can now signup online from your website.

2019-09 (v7)

If you have any questions or problems relating to using this integration guide, please email support@loyalpatron.com.

[ Onboarding index ]