SAP CDC SA Demo Framework

This page allows you to take alook at the aspects of the SAP CDC SA Framework, how to implement (which should be simple) and what fucnitonality is available. The styling and functionality is a real demo of how things work.

Page Setup

Page Head

Place code in the </head> tag


<!-- SAP CDC SA Framework: REQUIRED Meta -->
<!-- Need to add information for this!! -->
<meta name="id" content="" />
<meta name="name" content="" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="image_src" href="#" />
		
<!-- SAP CDC SA Framework: REQUIRED StyleSheet -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css?ver=2040">
<link rel="stylesheet/less" href="/sap/themes/default/css/style.less?ver=2040" type="text/css" />
<script type="text/javascript" src="/sap/js/less-1.7.0.min.js?ver=2040"></script>
<script type="text/javascript">
	// Comment the below out if not deployed over 'localhost'
	var less = { env: 'development' };
</script>

Page Body

Place code in your </body> tag



<!-- SAP CDC SA Framework: REQUIRED -->
<div id="placeholder_offcanvas"></div>

<!-- HEADER: START -->
	    <header>
<!-- SAP CDC SA Framework: REQUIRED -->
            <div id="placeholder_profile_bar"></div>
	    </header>
<!-- HEADER: END -->

<!-- MAIN: START -->
        <main>...</main>
<!-- MAIN: END -->

<!-- FOOTER: START -->
        <footer>...</footer>
<!-- FOOTER: END -->

<!-- SAP CDC SA Framework: REQUIRED - MODALS: START -->
        <div id="placeholder_modal_core"></div>
        <div id="placeholder_modal"></div>
<!-- MODALS: END -->

<!-- SAP CDC SA Framework: REQUIRED - HOTSPOTS: START -->
        <div id="placeholder_hotspots">
            <!--
            <div class="hotspot action click tooltip-hover" title="Hotspot Example" data-id="hotspot_01" data-type="hotspot" data-name="My Hotspot" data-url="#"  data-thumbnail="#" data-meta="" data-event="click" style="position: fixed; width: 100px; height: 50px; top: 10%; left: 10%"></div>
            -->
        </div>
<!-- HOTSPOTS: END -->

Page Script

Place code at the bottom of the DOM, just before the </body> tag

IMPORTANT: I MUST add your API Key to the websevice before you are able to use.


<!-- SAP CDC SA Framework: REQUIRED Script -->
<!-- JQuery: //jquery.com/ -->
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js?ver=01"></script>
<!-- Boostrap: //getbootstrap.com/ -->
        <script type="text/javascript" src="/sap/js/bootstrap.js?ver=01"></script>
<!-- Modernizr: //modernizr.com/ -->
        <script type="text/javascript" src="/sap/js/modernizr-2.8.3.min.js?ver=01"></script>
<!-- YouTube Api: //developers.google.com/youtube/iframe_api_reference?hl=en -->
        <script type="text/javascript" src="//www.youtube.com/iframe_api?ver=01"></script>
<!-- Scroll Reveal Api: //scrollrevealjs.org/ -->
        <script type="text/javascript" src="//cdn.jsdelivr.net/scrollreveal.js/3.0.6/scrollreveal.min.js?ver=01"></script>
<!-- SAP CDC: Core Script (SA Framework) -->
<!-- Parameters are Optional -->
        <script id="gscript" type="text/javascript" src="/sap/js/sap-cdc-core-v1.0.min.js?ver=2040">
        {
            "scriptProtocol": "//"
            , "scriptUrl": "cdn.gigya.com/js/socialize.js?apiKey="
            , "scriptApiKey": "3_7yhpxP54S87Wk4gPRRinbQ2HMhXgXM04wpm5DVi5ZXfwmnV97UzA6ZLlS8leL0qe"
            , "scriptExtras": ""
            , "scriptCid": "Gigya SA Framework Website"
            , "serviceUrl": "/sap/webservice/gigya-ws-v1.0.aspx/"
            , "siteTheme": "default"
            , "siteTooltipEnabled": true
            , "sitePopoverEnabled": true
            , "siteHotspotsVisiable": false
            , "raasRegSource": "Gigya SA Framework Website"
            , "raasScreenSetRegistration": "Media-RegistrationLogin"
            , "raasScreenSetProfile": "Media-ProfileUpdate"
            , "raasScreenSetPrefCentre": "Media-PrefCentre"
            , "engagementFirstVisitEnabled": true
            , "engagementOnLoginProfilingEnabled": true
            , "engagementOnLoginProfiling1": 1
            , "engagementOnLoginProfiling2": 2 
            , "engagementOnLoginProfiling3": 3
            , "trackingLoginEnabled": true
            , "trackingLogoutEnabled": true
            , "trackingEventsEnabled": true
            , "trackingJourneyEnabled": true
            , "eventNotificationEnabled": true
            , "eventLoadingEnabled": true
            , "loyaltyEnabled": false
            , "loyaltyChallengeOverall": '_default'
        }
        </script>
<!-- SAP CDC: Custom Script -->
        <script type="text/javascript" src="/sap/themes/default/js/sap-cdc-custom.js?ver=2040"></script>

Frameworks (Scripts)

JQuery

Framework: //ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js?ver=01

Documentation


<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js?ver=01" /></script>

Bootstrap

Framework: /sap/js/bootstrap.js?ver=01

Documentation


<script type="text/javascript" src="/sap/js/bootstrap.js?ver=01"></script>

Modernizr

Framework: /sap/js/modernizr-2.8.3.min.js?ver=01

Documentation


<script type="text/javascript" src="/sap/js/modernizr-2.8.3.min.js?ver=01"></script>

YouTube API

Framework: //www.youtube.com/iframe_api?ver=01

Documentation


<script type="text/javascript" src="//www.youtube.com/iframe_api?ver=01"></script>

Scroll Reveal

Framework: //cdn.jsdelivr.net/scrollreveal.js/3.0.6/scrollreveal.min.js?ver=01

Documentation


<script type="text/javascript" src="//cdn.jsdelivr.net/scrollreveal.js/3.0.6/scrollreveal.min.js?ver=01"></script>

Gigya

CORE

Parameters you can pass with the script are optional.

Framework: /sap/js/sap-cdc-core-v1.0.min.js?ver=2040

CUSTOM

You can place your custom script into the custom.js file. If you create your own 'theme' make sure you refer to the current directory.

File: /sap/themes/default/js/sap-cdc-custom.js?ver=2040


// CORE
<script id="gscript" type="text/javascript" src="/sap/js/sap-cdc-core-v1.0.min.js?ver=2040">
        {
            "scriptProtocol": "//"
            , "scriptUrl": "cdn.gigya.com/js/socialize.js?apiKey="
            , "scriptApiKey": "3_7yhpxP54S87Wk4gPRRinbQ2HMhXgXM04wpm5DVi5ZXfwmnV97UzA6ZLlS8leL0qe"
            , "scriptExtras": ""
            , "scriptCid": "Gigya SA Framework Website"
            , "serviceUrl": "/sap/webservice/gigya-ws-v1.0.aspx/"
            , "siteTheme": "default"
            , "siteTooltipEnabled": true
            , "sitePopoverEnabled": true
            , "siteHotspotsVisiable": false
            , "raasRegSource": "Gigya SA Framework Website"
            , "raasScreenSetRegistration": "Media-RegistrationLogin"
            , "raasScreenSetProfile": "Media-ProfileUpdate"
            , "raasScreenSetPrefCentre": "Media-PrefCentre"
            , "engagementFirstVisitEnabled": true
            , "engagementOnLoginProfilingEnabled": true
            , "engagementOnLoginProfiling1": 1
            , "engagementOnLoginProfiling2": 2 
            , "engagementOnLoginProfiling3": 3
            , "trackingLoginEnabled": true
            , "trackingLogoutEnabled": true
            , "trackingEventsEnabled": true
            , "trackingJourneyEnabled": true
            , "eventNotificationEnabled": true
            , "eventLoadingEnabled": true
            , "loyaltyEnabled": false
            , "loyaltyChallengeOverall": '_default'
        }
</script>

// CUSTOM
<script type="text/javascript" src="/sap/themes/default/js/sap-cdc-custom.js?ver=2040"></script>

Theme

Default

This page is a current representation on how the current theme applied will look.

The Gigya SA Framework has been built to allow you to scale out your own themes. As default, you have a 'default' theme to get going with, but this can be copied and renamed in the '/sap/themes/' folder and then changed accordinly (all 'Core' files are directly under the '/sap/' folder, your theme allows you to change accordinly).

If you do change your site theme, you will need to change in the following locations.


// Change Css reference
<link rel="stylesheet/less" href="/sap/themes/default/css/style.less?ver=2040" type="text/css" />

// Change Parameter in the Script
<script id="gscript" type="text/javascript" src="/sap/js/sap-cdc-core-v1.0.min.js?ver=2040">
        {
            "siteTheme": "DEFAULT"
        }
</script>

// Change reference to your custom script
<script type="text/javascript" src="/sap/themes/default/js/sap-cdc-custom.js?ver=2040"></script>

Gigya SAFramework

RaaS


// Buttons
class="btn-raas-login"
class="btn-raas-registration"
class="btn-raas-profile"
class="btn-raas-prefCentre"
class="btn btn-warning btn-raas-logout"

// In Page *Make sure you add an ID to your element
id="YOUR_ID" class="page-raas-registration"
id="YOUR_ID" class="page-raas-profile"

Screen-Sets - CUSTOM

You can create your own custom screensets and incorporate these are following


// Button - Modal
class="btn-raas-screenset" data-screen-set="" data-start-screen=""

// In Page *Make sure you add an ID to your element
id="YOUR_ID" class="page-raas-screenset" data-screen-set="" data-start-screen=""

Password Management

.btn-raas-create-password is only displayed when the user does not have a password.

.btn-raas-reset-password is only displayed when the user has a password.


class="btn-raas-create-password"
class="btn-raas-reset-password"

Engagement Plugins

Connections

Make sure you apply an 'ID' to the element for the connections to be injected into!


id="" class="connections-container" data-providers="" data-width="" data-height=""  data-button-size=""

id="framework_connections" class="connections-container" data-providers="facebook, twitter, googleplus, linkedin, instagram" data-width="320" data-height="100"

Engagement Bar


class="btn-share" data-title="Silent Beauty" data-description="quis nostrud exercitation ullamco laboris nisi ut" data-url="/article.aspx" data-thumbnail="/images/banners/banner1.jpg" data-type="advanced"
class="btn-share" data-title="Silent Beauty" data-description="quis nostrud exercitation ullamco laboris nisi ut" data-url="/article.aspx" data-thumbnail="/images/banners/banner1.jpg" data-type="simple"

ShareBar

Custom



// Custom
div class="sharebar-container-custom" data-title="" data-description="" data-url=""

div class="sharebar-container-custom" title="ShareBar" data-placement="top" data-title="Leaders hail WW2 comfort women deal" data-description="The leaders of Japan and South Korea welcome the agreement to settle the issue of comfort women forced to work in Japanese brothels during World War Two." data-url="/index.html"

Reactions


id="" class="reactions-container"

id="reactions_news_01" class="reactions-container" title="Reactions" data-placement="top"

Comments


id="comments_example" class="page-comments" data-categoryID="Comments Example" data-streamID="homepage"

Ratings & Reviews


id="ratings_example" class="page-rating" data-categoryID="Ratings and Reviews Example" data-streamID="homepage"
id="reviews_example" class="page-comments" data-categoryID="Ratings and Reviews Example" data-streamID="homepage"

Signals


class="btn-signal" data-signal-id="" data-signal-path="" data-signal-count="" data-signal-value="" data-signal-type=""
// data-signal-path * optional - will use page path
// data-signal-type * add OR remove

// Add
class="btn-signal" data-signal-id="product_01" data-signal-path="/" data-signal-count="1" data-signal-value="9.99" data-signal-type="add">Add

// Remove
class="btn-signal" data-signal-id="product_01" data-signal-path="/" data-signal-type="remove">Remove

// Purchase
class="btn-signal" data-signal-id="_purchases" data-signal-count="1" data-signal-value="9.99" data-signal-type="add"

// Ad-Click
class="btn-signal" data-signal-id="_adClicks" data-signal-path="/" data-signal-count="1" data-signal-type="add"

Loyalty

Make sure Loyalty is enabled for the API Key and setup and configured!

The framework uses the following 'Action IDs', add these to your Loyalty in Gigya, if you let me know I can export my Loyalty to JSON and you can upload to your instance:

actionPointsXS
actionPointsSM
actionPointsMD
actionPointsLG
actionPointsXL
actionPointsArticleRead
actionPointsArticleWishList
actionPointsProductAdded
actionPointsProductWishList

Download the JSON

Status

Challenges

Achievements

Leaderboard


// Modal
class="btn-modal-loyalty"

// Toggle Loyalty Canvas
class="btn-loyalty-toggle-offcanvas"

// Count 
class="loyalty-count"

// Action (points)
class="btn-loyalty-action" data-loyalty-action="" data-loyalty-operation=""

// Add
class="btn-loyalty-action" data-loyalty-action="actionPointsMD" data-loyalty-operation="grant"

// Remove
class="btn-loyalty-action" data-loyalty-action="actionPointsMD" data-loyalty-operation="revoke"

// Status
class="loyalty-status-container"

//Challenges
class="loyalty-challenges-container"

// Achievements
class="loyalty-achievements-container" data-width="400"

// Leaderboard
class="loyalty-leaderboard-container" data-display-no="20"

Profile Data

Profile Placeholders

You will need to login to see the data

UID: (.profile-id)

Created Timestamp: (.profile-created)

Registration Src: (.profile-regsource)

Login Device: (.profile-login-id)

Login Device: (.profile-login-device)

Login Browser: (.profile-login-browser)

Login Count: (.profile-login-site-count)

Login Timestamp: (.profile-login-timestamp)

Login Country: (.profile-login-location-country)

Login Region: (.profile-login-location-region)

Privacy: (.profile-privacy)

Email: (.profile-email-primary)

Provider: (.profile-login-provider)

Name (Nickname): (.profile-name)

First Name: (.profile-name-first)

Last Name: (.profile-name-last)

Photo: (.profile-img-photo)

Thumbnail: (.profile-img-thumbnail)

Age: (.profile-age)

Gender: (.profile-gender-name)

Relationship Status: (.profile-relationship-status)

Meta-Data: (.profile-meta)

Membership - Role: (.profile-membership-type)

Membership - Subscribed: (.profile-membership-subscribed)

Subscription - Level: (.profile-subscription-level)

Subscription - Cost: (.profile-subscription-cost)

Subscription - Period: (.profile-subscription-period)

Subscription - Timestamp: (.profile-subscription-timestamp)

Subscription - expiry: (.profile-subscription-expiry)


<span class="profile-id"></span>
<span class="profile-created"></span>
<span class="profile-login-timestamp"></span>
<span class="profile-login-location-country"></span>
<span class="profile-login-location-region"></span>
<span class="profile-regsource"></span>
<span class="profile-privacy"></span>
<span class="profile-email-primary"></span>
<span class="profile-login-provider"></span>
<span class="profile-name"></span>
<span class="profile-name-first"></span>
<span class="profile-name-last"></span>
<img class="profile-img-photo" src="" alt="" />
<img class="profile-img-thumbnail" src="" alt="" />
<span class="profile-age"></span>
<span class="profile-gender-name"></span>
<span class="profile-relationship-status"></span>
<span class="profile-meta"></span>
<span class="profile-membership-type"></span>
<span class="profile-membership-subscribed"></span>
<span class="profile-subscription-level"></span>
<span class="profile-subscription-cost"></span>
<span class="profile-subscription-period"></span>
<span class="profile-subscription-timestamp"></span>
<span class="profile-subscription-expiry"></span>
class="btn-account-obj"

Profile Objects

The following variable JS objects are available to tap into the data

Variables - Global.vars.##
Account Info - Global.vars.obj.accountInfo
User Obj - Global.vars.obj.userObj
Profile Quick Values - Global.vars.profile

Get Account Info - Data

.profile-info
.get-account-info

The '.profile-info' takes less processing as the data is obtained from the 'Global.vars.obj.accountInfo' object.

The '.get-account-info' makes a 'accounts.getAccountInfo' everytime to get the data.

First name (Profile):

Last name (Profile):

Role (Data):


class="profile-info" data-key=""

class="profile-info" data-key="profile.firstName"

// 
class="get-account-info" data-key=""

class="get-account-info" data-key="profile-lastName"

class="get-account-info" data-key="data-persona.role.type"

Tracking

Registration/Login (Automatic)

behaviour.connections.login.login_[%LOGIN_COUNT%]_[%TIMESTAMP%]

Tracking: Last Login (Automatic)

behaviour.connections.lastLogin

Tracking: Logout (Automatic)

behaviour.connections.logout.logout_[%LOGIN_COUNT%]_[%LOGIN_ID%]

Tracking: Page/Journey Tracking (Automatic)

behaviour.connections.journey.journey_[%LOGIN_COUNT%]_[%LOGIN_ID%]_[%TIMESTAMP%]

Tracking: Relationship Status Tracking (Automatic)

For demo purposes the 'Device Type' is determined by the 'Screen.Width', meaning you change change the screen size or use a browser emulator to simulate different devices.

Device is set as follows.

Watch = < 200
Phone = < 400
Phablet = < 450
Tablet = < 1050
else Computer

Events

Set Account Info ([%DATA_KEY%])

Key/Value

Object


// Key/Value
class="action-set-account-info click" data-key="" data-value=""

class="action-set-account-info click" data-key="persona.type" data-value="crazy"
class="action-set-account-info hover" data-key="persona.type" data-value="engaged"

// Object
class="action-set-account-info-obj click" data-object=""

class="action-set-account-info-obj click" data-object="{'obj': { 'key1': 'value1', 'key2': 'alue2', 'key3': 'value3' } };"
class="action-set-account-info-obj click" data-object="{'address':[{ 'streetNo': '27', 'line1': 'Hillside Road', 'city': 'Newport', 'postcode': '2106', 'country': 'Australia' },{ streetNo: '50', 'line1': 'Gigya', 'line2': 'Pitt street', 'city': 'Sydney', 'postcode': '200', 'country': 'Australia' }]};"

Purchase Subscription


// Modal
class="btn-subscription-purchase"

Competition


data-competition-id="comp_003" data-competition-name="Watford Gift Voucher" data-competition-value="true"

General (behaviour.activity.[DATA_TYPE])


class="action click" data-id="anything_01" data-type="anything" data-name="My Name" data-url="/page.html"  data-thumbnail="/imgs/img.jpg" data-meta="fashion,cost" data-event="anything"

class="action hover"

Action - Image (behaviour.activity.image)


class="action click" data-id="image_01" data-type="image" data-name="img-300x250.jpg" data-url="/imgs/img-300x250.jpg"  data-thumbnail="/imgs/img-300x250.jpg" data-meta="fashion,cost" data-event="view"

class="action hover"

Action - Article (behaviour.activity.article)


class="action click" data-id="article_01" data-type="article" data-name="Article Name" data-url="/article.aspx" data-thumbnail="/images/banners/banner1.jpg" data-meta="sport" data-event="read"

class="action hover"

Action - Video (behaviour.activity.video)

Search Results


id="" class="action-video" data-id="" data-type="" data-width="" data-height="" data-thumbnail="" data-meta="" data-autoplay="" data-start-time="" data-resume="" data-search="" data-results-container=""

id="youTube_ecH49e_Pw20" class="action-video" data-id="ecH49e_Pw20" data-type="youtube" data-thumbnail="/images/video.jpg" data-meta="video" data-resume="true" data-search="true" data-results-container=".video-search-results"

Display Videos

Use to insert the users currently watched videos.


class="display-videos"

Action - Search


class="btn-site-search"

Action - Basket (ecommerce.basket.active)


class="action-basket click" data-id="product_01" data-type="basket" data-name="Product Name" data-url="/product.aspx" data-thumbnail="/images/product/product.jpg" data-meta="sport" data-event="add" data-qty="1" data-price="9.99"

Events - Wish List

General (prefCentre.wishlist.[%DATA_TYPE%])


class="action-wishlist-add click" data-id="other_01" data-type="other" data-event="something happened" data-name="Something" data-url="/page.aspx" data-thumbnail="thumbnail.jpg" data-meta="meta"

class="action-wishlist-add hover"

Read Later ([%prefCentre.wishlist.article)


class="action-wishlist-add click" data-id="" data-type="" data-event="" data-name="" data-url="" data-thumbnail="" data-meta=""

class="action-wishlist-add click" data-id="article_02" data-type="article" data-event="readLater" data-name="Article 02" data-url="/article.aspx" data-thumbnail="/imgs/article2.jpg" data-meta="fashion"

Real Later - Remove ([%prefCentre.wishlist.article)

!! NEED TO DO


class="action-wishlist-remove click" data-id="" data-type="" data-event="" data-name="" data-url="" data-thumbnail="" data-meta=""

class="action-wishlist-remove click" data-id="article_02" data-type="article" data-event="readLater" data-name="Article 02" data-url="/article.aspx" data-thumbnail="/imgs/article2.jpg" data-meta="fashion"

class="action-wishlist-remove hover"

Product (prefCentre.wishlist.product)


class="action-wishlist-add click" data-id="product_01" data-type="product" data-event="buyLater" data-name="Product 01" data-url="/product.aspx" data-thumbnail="/imgs/products/product1.jpg" data-meta="fashion,entertainment" data-price="10.99" data-qty="2"

Events - Preference Centre (prefCentre.[%DATA_KEY%])

Add


class="action-set-account-info click" data-key="" data-value=""

class="action-set-account-info click" data-key="prefCentre.interest.sport" data-value="true"

Events - Persona

Add (persona.[%DATA_KEY%])


class="btn btn-primary action-set-account-info click" data-key="persona.person.weird" data-value="true"

Meta-Data

Add (persona.meta)


class="action-meta click" data-meta="" data-type=""

class="action-meta click" data-meta="fashion,sport" data-type="add"

class="action-meta hover"

Remove


class="action-meta click" data-meta="" data-type=""

class="action-meta click" data-meta="sport" data-type="remove"

Personalization

Authentication

You are currently Authenticated.

You are currently Unauthenticated.


// Displays when user is unauthenticated hidden when authenticated
class="unauthenticated"

// Displays when user is authenticated, hidden when unauthenticated
class="authenticated"

Gender

This is what the user will see if their gender is unknown (or unauthenticated).

This is what the user see's if they are Male.

This is what the user see's if they are Female.


// Selector for gender personalization
class="personalize-gender"

// Displays if gender is male, hidden otherwise
class="personalize-gender gender-m"

// Displays if gender is female, hidden otherwise
class="personalize-gender gender-f"

Button Switch
<button type="button" class="btn btn-success btn-gender-change">Switch Gender</button>

Age

This is what the user will see if their age is unknown (or unauthenticated).

This is what the user see's if they are less than 18.

This is what the user see's if they are less than 31.

This is what the user see's if they are less than 51.

This is what the user see's if they are less than 101.


// Selector for age personalization
class="personalize-age"

// Displays if age is under 18, hidden otherwise
class="personalize-age age-17"

// Displays if age is under 30, hidden otherwise
class="personalize-age age-30"

// Displays if age is under 50, hidden otherwise
class="personalize-age age-50"

// Displays if age is under 100, hidden otherwise
class="personalize-age age-100"

// Button Switch
<button type="button" class="btn btn-success btn-age-change" data-age="17">Switch Age < 18</button>

Relationship

This is what the user will see if their relationship status is unknown (or unauthenticated).

This is what the user see's if they are Single.

This is what the user see's if they are In a relationship.

This is what the user see's if they are Engaged.

This is what the user see's if they are Married.


// Selector for relationship personalization
class="personalize-relationship"

// Displays if relationship is single, hidden otherwise
class="personalize-relationship relationship-single"

// Displays if relationship is 'in a relationship', hidden otherwise
class="personalize-relationship relationship-relationship"

// Displays if relationship is married, hidden otherwise
class="personalize-relationship relationship-married"

// Displays if relationship is engaged, hidden otherwise
class="personalize-relationship relationship-engaged"

// Button Switch
<button type="button" class="btn btn-success btn-relationship-change" data-status="single">Switch Single</button>

Subscription

This is what the user will see if they are NOT Subscribed.

This is what the user will see if they ARE Subscribed.


// Displays if subscribtion is 'subscribed', hidden otherwise
class="subscribed"

// Displays if subscribtion is 'unsubscribed', hidden otherwise
class="unsubscribed"

Membership Level

This is what the user will see if the are a public user.

This is what the user see's if they have Bronze membership.

This is what the user see's if they have Silver membership.

This is what the user see's if they have Gold membership.

This is what the user see's if they have Platinum membership.

| | | |


// Selector for membership personalization
class="personalize-membership"

// Displays if membership is bronze, hidden otherwise
class="personalize-membership membership-bronze"

// Displays if membership is silver, hidden otherwise
class="personalize-membership membership-silver"

// Displays if membership is gold, hidden otherwise
class="personalize-membership membership-gold"

// Displays if membership is platinum, hidden otherwise
class="personalize-membership membership-platinum"

// Button Switch
class="btn-membership-change" data-membership="gold"

Search

accounts.search()

Note: I have found if I use 'SELECT *' the response from the webservice breaks (packets too big I think?). For now use 'SELECT UID, profile.email, profile.firstName, profile.lastName, profile.photoURL'.


class="account-search" data-query="" data-results-container=""

class="account-search-click" data-query="select UID, profile.email, profile.firstName, profile.lastName, profile.photoURL from accounts WHERE (profile.favorites.movies.name = 'Finding Nemo')" data-results-container=""

<div class="accounts_search_results">
    <div class="header"> </div>
    <div class="content"> </div>
</div>

accounts.search(): Click & Hover

Default results container is 'accounts_search_results', you can choose using 'data-results-container'.


class="account-search-click" data-query="" data-results-container=""
class="account-search-hover" data-query="" data-results-container=""

class="account-search-click" data-query="select UID, profile.email, profile.firstName, profile.lastName, profile.photoURL from accounts WHERE (profile.favorites.movies.name = 'Finding Nemo')" data-results-container=""

<div class="accounts_search_results">
    <div class="header"> </div>
    <div class="content"> </div>
</div>

Progessive Profiling

Modals

You will need to add your content to the modals depending on what you want.


data-toggle="" data-target=""

data-toggle="modal" data-target="#modalUserFirstVisit"

data-toggle="modal" data-target="#modalProgressiveProfiling1"

data-toggle="modal" data-target="#modalProgressiveProfiling2"

data-toggle="modal" data-target="#modalProgressiveProfiling3"

Gigya Screen-Sets

WIP

Data Visualization

Identity Data


class="display-data"

Display Activity


// Modal
class="btn-modal-activity"

// Display Activity
class="display-activity"

Display Wish List

Wish List Count = 0

Search Results


// Modal
class="btn-modal-wishlist"

// Count
class="profile-wishlist-count"

// Display Wish List
class="display-wishlist" data-results-container=""

// Example
<div class="display-wishlist" data-results-container=".example-wishlist-search-results"></div>
<div class="example-wishlist-search-results">
	<hr class="position-relative" />
	<h4>Search Results</h4>
	<div class="header alert alert-success"></div>
	<div class="content"></div>
</div>

Display Basket

Wish List Count = 0

Search Results

Display Logins


// Modal
class="btn-modal-logins"

// Display Logins
class="display-logins"

class="display-logins" data-login-host="all" data-results-container=".login-search-results"

<div class="login-search-results">
    <div class="header"> </div>
    <div class="content"> </div>
</div>

Display Journey

If you click the Journey Page, it will do a 'accounts.search' and find other users whom also visited that page.

Search Results


class="display-journey"

class="display-journey" data-journey-id="all" data-results-container=".journey-search-results"

<div class="journey-search-results">
    <div class="header"> </div>
    <div class="content"> </div>
</div>

Display Likes

If you click the like, it will do a 'accounts.search' and find other users whom also like that like.


class="display-likes

<div class="accounts_search_results">
    <div class="header"> </div>
    <div class="content"> </div>
</div>

Friends (Facebook)

Will return only Facebook friends and only those whome are also in Gigya.


class="display-friends"


class="display-friends" data-detailLevel="extended"

Connecting People

If you click the like, it will do a 'accounts.search' and find other users whom also like that like.

Add People

Current People Connections

Misc

Mission Control


<div class="mission-control-container"  data-id="" data-name="" data-description="" data-url="" data-thumbnail="" data-meta="" data-price="" data-qty=""></div>

<div class="mission-control-container"  data-id="article_01" data-name="Silent Beauty" data-description="quis nostrud exercitation ullamco laboris nisi ut" data-url="article.aspx" data-thumbnail="/images/banners/banner1.jpg" data-meta="fashion,entertainment" data-price="10.99" data-qty="2"></div>

Hotspots


<div class="hotspot action click tooltip-hover" title="Hotspot Example" data-id="hotspot_01" data-type="hotspot" data-name="My Hotspot" data-url="#"  data-thumbnail="#" data-meta="" data-event="click" style="position: fixed; width: 100px; height: 50px; top: 10%; left: 10%"></div>

Scroll Animation


class="btn-scroll" data-scroll-id="" data-scroll-speed="" data-scroll-offset=""

class="btn-scroll" data-scroll-id="#gigya" data-scroll-speed="1000" data-scroll-offset="-120"

Bootstrap

Tooltips


class="tooltip-hover" title="" data-placement="">

class="tooltip-hover" title="Tooltip Txt" data-placement="top"

class="tooltip-hover" title="Tooltip Txt" data-placement="right"

class="tooltip-hover" title="Tooltip Txt" data-placement="bottom"

class="tooltip-hover" title="Tooltip Txt" data-placement="left"

Popover


class="popover-hover" data-original-title="" data-content="" data-placement=""

class="popover-hover" data-original-title="Title" data-content="Some content
Blah" data-placement="top"

class="popover-hover" data-original-title="Title" data-content="Some content
Blah" data-placement="right"

class="popover-hover" data-original-title="Title" data-content="Some content
Blah" data-placement="bottom"

class="popover-hover" data-original-title="Title" data-content="Some content
Blah" data-placement="left"

Modals

Generic Modal


class="display-modal click" data-header="" data-body=""

class="display-modal hover" data-header="" data-body=""

class="display-modal click" data-header="Header" data-body="Body"

All Modals


class="display-modal click" data-header="" data-body=""

class="display-modal hover" data-header="" data-body=""

class="display-modal click" data-header="Header" data-body="Body"

Offers

top