Adding New Recipients through Registration
You're currently viewing XMPL V3
Attention: XMPL V5 beta is now available!
One method of adding new recipients to your database is by providing a registration page through which new viewers can register themselves and become recipients.
The XMPL library allows you to define pages that start off as anonymous pages, lacking personalization, and define in them registration forms. When a user submits a registration form, the page can redirect to a personalized page per the initial data provided by the user and the calculated data that became available. You can also stay in the same page and only alter its view to become personalized.
In this entry we will look into anonymous pages and registration forms.
So far, in Webpage Personalization and Updating Recipient Data we saw pages that are personalized. This means that when a page loads, recipient ID is realized from the URL or a passed cookie. Data is then retrieved from the database based on the requirements of the page, and personalized data is presented.
There are other scenarios where we will want to use XMPL HTML tags and attributes that do not involve the initial loading of a recipient. For example, we may want to start a page with login info, and only after login retrieve recipient data. We may want to create a registration form in which initially there is no recipient, but only after the user submits the data we direct him to a personalized page (or not). There are scenarios where we will want to use XMPL outside of a viewer = recipient paradigm. All these scenarios cannot use the regular personalization schema.
For these cases we have the Anonymous page controller. To set it up on a page use the same steps used with a personalized page, described here, but with two differences:
- For
ng-controllerthe value should beXMPAnonymousPage. - There is no need to access the page with a
ridparameter at the URL, as there is no r, meaning a recipient.
The body tag for an anonymous page:
<body ng-app="xmp.app"
ng-controller="XMPAnonymousPage"
xmp-clear-all-cookies-onload>
YOUR PERSONAL CONTENT HERE
</body>As an example you can review the registration sample here.
Once you set up a page to be an anonymous page, it means that it does not initially load data. You can still use all personalization tags, wherever it makes sense. For example, you can create a registration form, as we will soon, and use the same ADOR references as you did with the update form, to indicate which fields should be used to create the initial values for a recipient.
Later in this entry we will also review how to create a transition in the same page from an anonymous state to a personalized state, once registration is complete.
Using the library HTML tags and attributes you can perform such a transition in the registration form scenario. However, if you are willing to dive in a little deeper and learn how to use the library in programming, there are more scenarios that you can implement to make this transition.
A common paradigm for using anonymous pages for which there is support in the XMPL HTML tags and attributes is a registration page. As part of your site you can create a page that has a registration form. A page visitor can fill in this form and thus be added to your customer database. You can later complete the experience with redirecting to a personalized page, or a transition in the page itself. We will look into both methods.
We will start with defining such a form.
Assuming that we have the XMPAnonymousPage controller value set up, it is quite simple. Consider the following example of such a form:
<form xmp-register xmp-success-url="index.html">
<ul>
<li>
First Name : <input type="text" xmp-write-ador="xmp.r['First Name']" size="30">
</li>
<li>
Last Name : <input type="text" xmp-write-ador="xmp.r['Last Name']" size="30">
</li>
</ul>
<input class="btn-primary" ng-click="forgetRecipient()" type="submit" value="save">
</form> If you read Updating Recipient Data, you will find a striking resemblance to the update form. The only difference is that instead of using xmp-register we used xmp-update (there is also the matter of the different page controller).
All attributes from the update form follow here are well: the method of defining a redirect URL for success, multiple buttons for defining different targets, and the usage of hidden fields. If you are not familiar with these, refer to Updating Recipient Data.
Similarly, xmp-write-ador tags are used on input fields to associate ADORs with the values that the user places. In this case however, there is no initial value to retrieve as there is no recipient. Instead, once the form is submitted, the values and ADORs are collected and a request to add a new recipient based on these values is sent to the server.
Due to the nature of the XMPAnonymousPage controller, once you add a recipient through the form's submit option, the data of the recipient is retrieved as well as its newly created recipient ID. The recipient ID is stored in a cookie.
This means that if you now redirect to a personalized page (in the example, to index.html), the redirected page will have the recipient ID data and will be able to become personalized.
We can also use the above to stay in the same page and continue as a personalized page. Refer to the following section to learn more about this.
Let's assume that you don't want to redirect the page to another URL. You prefer to transition the page to become personalized once the registration form is submitted. It is possible to do so since once a form is submitted, all ADORs used in the page (even if currently hidden) are retrieved for the newly created recipient, as well as its fresh recipient ID.
In registerAndUpdate.html you will find an example of such a page. It has a registration form, and once the registration form is complete, the page shows the new recipient data and allows the person to update it with an update form.
To implement the "before" and "after" cases the page uses the AngularJS attribute 'ng-show' and the recipient ID existence, as saved in xmp.recipientID.
So far we have only seen the xmp data structure used in the ADOR reference, such as xmp.r["First Name"] which is used to refer to the First Name ADOR of a recipient. However, xmp has a little more than that. For example, you can get the recipient ID, if available, by referring to xmp.recipientID. Coupled with the AngularJS ng-show attribute, we can either show or hide parts of the page based on whether xmp.recipientID exists or not.
Take a look at the following example:
<div class="section" ng-show='!xmp.recipientID'>
<div class="section-title">Registration form</div>
<div class="section-content">
<form xmp-register xmp-success-url="index.html">
<ul>
<li>
First Name : <input type="text" xmp-write-ador="xmp.r['First Name']" size="30">
</li>
<li>
Last Name : <input type="text" xmp-write-ador="xmp.r['Last Name']" size="30">
</li>
</ul>
<input class="btn-primary" type="submit" value="save">
</form>
</div>
</div>The top div has ng-show='!xmp.recipientID'. This means that the content will be visible only if xmp.recipientID is null. This is the initial case, where the page is still anonymous.
To include content that should be shown once the page becomes personalized, use the opposite condition. For example, if you want to change the page to an update form after the registration form is submitted, use the following code:
<div class="section" ng-show='xmp.recipientID'>
<div class="section-title">Update form</div>
<div class="section-content">
<form xmp-update xmp-success-url="index.html">
<ul>
<li>
First Name : <input type="text" xmp-write-ador="xmp.r['First Name']" size="30">
</li>
<li>
Last Name : <input type="text" xmp-write-ador="xmp.r['Last Name']" size="30">
</li>
</ul>
<input class="btn-primary" type="submit" value="save">
</form>
</div>
</div>Note that the changes are:
-
ng-shownow hasxmp.recipientIDand not!xmp.recipientID- this is to make the content shown where there is a recipient ID. This will happen only after the registration form is submitted. - The form has
xmp-update, which makes it an update form.
To see the end result of using both forms, refer to registerAndUpdate.html.
There is another paradigm for adding recipients that is supported by XMPL HTML tags and attributes. It is carried out by a recipient referring a friend. We will look into it in Refer a Friend.
New!! Take a look at XMPL V5 Beta