Lite Preferences Center

Skip to end of metadata
Go to start of metadata

Description

The Lite Preferences Center is a custom user flow using the accounts.sendLiteInvite API to begin the user journey. This flow allows lite users the ability to view and adjust their communications and privacy settings.

This flow requires a page to be created on the target website (Lite Preferences Center redirectURL) that fires accounts.showScreenSet for screens that are created specifically for this purpose. There is a working demo below, as well as basic code examples to get you started.

It is possible to customize the expiration of both the email link and the user session, the defaults are listed in the accounts.sendLiteInvite REST documentation. It is important to also note that the link inside the email generated via the sendLiteInvite API contains a single-use token, and once clicked, can not be reused.

If a link is reused, an errorCode will be attached to the URL query string that is passed to your site similar to the following:

https://Your-Site.com/index.php?errorCode=403005&errorMessage=Unauthorized+user

 

Activation

You can enable your Lite Preferences Center for your site one of two ways. You can either call accounts.setPolicies and pass the preferencesCenter object with a valid redirect URL for the user to be directed after clicking their invitation link or you can enter your Gigya Console and in the Email Templates tab, open the Lite Preferences Center email template and enter your redirectURL there, being sure to press Save Settings when finished. While in the email template, you can also ensure that you update the return email address and any other data you would like to customize at this time.

 

User Flow

The user begins their journey by clicking on a link on the clients website or in an email. When the link is clicked on the website, the site would trigger a call to accounts.sendLiteInvite with the necessary parameters and the user would receive an invitation to their email address associated with the lite account.

When a response is received from the aforementioned call to accounts.sendLiteInvite, the site logic (if the user clicked a site-based link) should present the user with the necessary information either on screen, or being redirected to a success or error page, e.g., if successful, that they will receive an email with a link to enter their Lite Preferences Center and how long the link is valid for; otherwise, if an error occurred, the error details. The sendLiteInvite API will always return a 200 OK response, so as not to be used for account harvesting, any errors handled, would be based upon your site's logic for validating the user and/or email address entered into the form prior to calling the API.

When the user now arrives at their email and clicks the Lite Preferences Center invitation link, the token in the redirect URI will be validated upon the user arriving at your Lite Preferences Center page by the Gigya WebSDK, where you would have screen-sets for the user to view and edit their data. These screen-sets will read the gig_regToken passed in the query string of the invitation link and if the token is valid, the user will have a valid session and can then update their data via any Update Profile screens you place on this landing page. 

Flow Diagram

 

Sample Lite Preferences Center Client-Side Page

 Click to view the code
 <!-- BASIC PAGE -->
<html>
<head>
<title>Lite Preferences Center</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" lang="javascript" src="https://cdns.gigya.com/JS/socialize.js?apikey=Your-API-Key"></script>
        <style>
            .valididatedUserContainer {
                text-align: center;
            }
            .directVisitorContainer {
                text-align: left;
            }
            #valididatedUserContainer {
                display: none;
            }
            #directVisitorContainer {
                display: block;
            }
            .emailSuccessContainer {
                text-align: center;
            }
            #emailSuccessContainer {
                display: none;
            }
            #userEmail {
                width: 50%;
            }

            #subScreenContainer {
                border: 2px solid navy;
                padding: 0px 10px 10px 10px;
                margin-top:25px;
            }
            .prefsBtn, .sendInviteBtn {
                width: 300px;
                height: 50px;
                background-color: navy;
                color: skyblue;
                cursor: pointer;
                font-size: 16px;
            }
            .strike {
                text-decoration: line-through;
            }
        </style>
</head>
<body>
<div class="pageBodyContent" id="">
       <script>
        var __pcenter = window.__pcenter || {};
        console.log("PCenter: ", __pcenter);
        __pcenter.tools = __pcenter.tools || {};
        __pcenter.tools.fullUrl = window.location.href;
        __pcenter.tools.fullPath = window.location.pathname;
        __pcenter.tools.fullSearch = window.location.search;

        __pcenter.user = __pcenter.user || {};
        __pcenter.user.isValid = false;
        __pcenter.user.isVerified = false;

        // check if the user is viewing the page via an access link or directly. returns true if user has a regtoken.
        __pcenter.tools.checkArrivingUser = function() {
            var isValidated;
            if (__pcenter.tools.fullSearch.indexOf("gig_regToken") > -1) {
                isValidated = true;
                __pcenter.user.isValid = true;
            } else {
                isValidated = false;
            }
            return isValidated;
        };

        // email regex checker from https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript
        function validateEmail(email) {
            var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            return re.test(String(email).toLowerCase());
        }

        // process an invitation response
        var showSuccessContainer = function() {
            document.getElementById('directVisitorContainer').style.display = "none";
            document.getElementById('emailSuccessContainer').style.display = "block";
        };

        // Send an invitation - Ajax
        __pcenter.tools.sendInvitation = function(email) {
            if ((!!email) && (validateEmail(email) === true)) {
                $.post('sendLiteInvite.php', {"email":email})
                .done(function(data) {
                    var returnedResponse = data;
                    console.log(returnedResponse);
                    if (returnedResponse == "Success") {
                        showSuccessContainer();
                    } else {
                        alert("There was a server error.");
                        return false;
                    }
                });
            } else {
                alert("The email address entered is invalid.");
            }
        };
       </script>

        <h2>Lite Preferences Center</h2>
        <hr><br />
        
        <div class="emailSuccessContainer" id="emailSuccessContainer">
            EMAIL Success Container <br /><br />
            Please check your email box for your invitation link.
        </div>

        <div class="valididatedUserContainer" id="valididatedUserContainer">
            Validated User Container<br /><br />
            <button class="prefsBtn" id="showConsentScreenBtn">Open Consent Preferences</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button class="prefsBtn" id="showCommunicationScreenBtn">Open Communication Preferences</button>
        </div>
        <div class="directVisitorContainer" id="directVisitorContainer">
            To access your Lite Preferences Center, enter your email address and click the following button to receive an email invitation.<br /><br /><br />
            Email: <input type="text" class="" id="userEmail" name=""><br /><br />
            <button class="sendInviteBtn" id="sendInviteBtn">Send Invitation</button><br /><br />
            If you have not yet subscribed to our awesome and creative newsletters, please use the form below to subscribe, then refresh the page to send an invite to your email.
            <div id="subScreenContainer"></div>

        </div>
        <script>
        // activate the buttons
        var sendInvitationButton = document.getElementById('sendInviteBtn');
        var userEmailField = document.getElementById('userEmail');
        sendInvitationButton.addEventListener("click", function() {
            var userEmail = document.getElementById('userEmail').value;
            __pcenter.tools.sendInvitation(userEmail);
        });
        var showConsentScreenBtn = document.getElementById('showConsentScreenBtn');
        var showCommunicationScreenBtn = document.getElementById('showCommunicationScreenBtn');
        showConsentScreenBtn.addEventListener("click", function() {
            gigya.accounts.showScreenSet({
                "screenSet":"LitePreferencesCenter-ProfileUpdate",
                "startScreen":"gigya-privacy-screen"
            });
        });
        showCommunicationScreenBtn.addEventListener("click", function() {
            gigya.accounts.showScreenSet({
                "screenSet":"LitePreferencesCenter-ProfileUpdate",
                "startScreen":"gigya-communication-screen"
            });
        });

        // check if the user is arriving directly or using a link and display the appropriate info
        var visitingUserContainer = document.getElementById('directVisitorContainer');
        var validatedUserContainer = document.getElementById('valididatedUserContainer');
        if (__pcenter.tools.checkArrivingUser() === true) {
            validatedUserContainer.style.display = "block";
            visitingUserContainer.style.display = "none";
        }
        gigya.accounts.showScreenSet({
            "screenSet":"LitePreferencesCenter-LiteRegistration",
            "containerID":"subScreenContainer"
        });
        </script>
    </div><!-- /.pageBodyContent end -->
</body>
</html>

 

Sample Lite Preferences Center Server-Side Page

 Click to view the code.
<?php

include_once("../SDK/php/GSSDK.php"); // Path to Gigya PHP SDK

$apiKey = "Your-API-Key";
$secretKey = "Your Partner Secret";

$incEmail = null;
if (isset($_POST['email']) && $_POST['email'] !== "") {
    $incEmail = $_POST['email'];
}

$method = "accounts.sendLiteInvite";
$request = new GSRequest($apiKey,$secretKey,$method);
$request->setParam("invitationExpiration",3600);

if ($incEmail) {
    $request->setParam("email",$incEmail);
} else {
    echo "Email is invalid.";
    return;
}


$response = $request->send();

if($response->getErrorCode()==0)
    {
        echo "Success";
    }
else
    {
        echo ("Uh-oh, we got the following error: " . $response->getErrorMessage());
        error_log($response->getLog());
    }

?>

 

Live Demo

See the above code on Gigya's Demo Site

Additional Information

accounts.sendLiteInvite REST

 

 

 

  • No labels