Corporate Websites
You're currently viewing XMPL V3
Attention: XMPL V5 beta is now available!
An anonymous controller is used for web pages that are generic -- that are not aware of the recipient visiting them. Note that during the visit of an anonymous controller the recipient might be revealed (by registration of the recipient, or by passing the recipient as a parameter from an external source). Once the recipient is identified the page becomes a personalized page. This is commonly used in corporate websites.
The following methods and attributes add the corporate website functionality to the anonymous controller.
-
xmp-remember-recipient– if set, after xmp-register the recipient is stored in a cookie, and following visits to the page will remember the recipient and show personalized info.For example:
<body ng-app="xmp.app" xmp-cloak xmp-remember-recipient ng-controller="XMPAnonymousPage" >
-
forgetRecipient()- if called, clears the cookie, making the page anonymous.For example:
<div ng-show="xmp.recipientID"> Hello {{xmp.r.Fname}} <br> <a href="" ng-click="forgetRecipient()">I'm not {{xmp.r.Fname}}</a> </div>
-
setRecipient(_recipientId_)- makes the page personalized to the specified recipient. -
rememberRecipient()- manually force the controller to register the current recipient in the cookie (instead of using xmp-remember-recipient).
Sometimes you need to toggle the behavior based on whether the user is still anonymous or has identified. In the former case there is no RecipientID, while in the latter there is. This section will explain how to do just that.
You can define that a generic image will be showed for anonymous user and a uImage will be shown for identified users. You can also define to show the generic while the uImage has not loaded yet (it loads asynchronously).
<img ng-show="!xmp.recipientID || xmp.status.r.MyAdor!== 'loaded'" class="splash" src="<?php echo $post->_banner ?>" alt="XMPie"/>
<div ng-show="xmp.recipientID && xmp.status.r.MyAdor=== 'loaded'" style="width:100%;height:700px;overflow:hidden;">
<img class="splash" xmp-image-asset="xmp.r.MyAdor" alt="XMPie" style=""/>
</div>You can use similar expressions to control the style. In the example below the fonts are shift to white to suit the color of the underlying uImage.
ng-style="!!xmp.recipientID && xmp.status.r.MyAdor=== 'loaded' && {'color':'white'}"
New!! Take a look at XMPL V5 Beta