In this post I'd like to share an example I built that shows how to make use of a new feature of the Liveperson tag called Set Page (or lpSetPage).

What Set Page does is allow you as a developer to mimic a new page event while staying on the same page.

A good use case for this feature is a dynamic page that uses AJAX to display different steps of a form without refreshing the page. Conceptually, every step can be considered a different and new page but technically the is no change to the URL and there is no full postback happening.

For this kind of scenario, Set Page can be very useful because it will basically instruct the server that a new page load has happened.

Here's an example of how to  call the Set Page function using the following syntax:

var params = {
          "title": "shopping area overlay",                              
          "newDbs": [{
               "name": "chat-NewSales",
               "pid": "chat-NewSales",
               "afterStartPage": "true",
               "ovr": "lpMTagConfig.db1"}],
                    "udes": "PV!CartValue=120"};

lpMTag.lpSetPage(params);

lpSetPage can be called without any parameters as well.

The (optional) variables lpSetPage accepts are as follows:

newDbs : An array of button objects.

title : The title of the new page.

referrer: The referrer to this page (probably not going to be used very often)

pageUrl: The page URL (probably not going to be used very often)
udes: a concatenated string of variables

for the "udes" variable you pass a string that for each variable has 3 parts:

1. The scope, PV = Page Variable, SV = Session Variable, VV = Visitor Variable followed by "!".
2. The name of the variable followed by "=".
3. The value.

One of the great advantages of the feature is that now its very easy to add dynamic buttons to pages dynamically effectively after the first time the page loads.

I've created a small code sample (attached) that demonstrates this idea:

Step 1: The home page with the button to load the overlay

Step 2: The overlay showing and lpSetPage been called

What this example does is load a page with a simple (not LP) button that when clicked will load an overlay html file using AJAX and display that on top of the normal page.

The overlay contains a div for a LP dynamic button. Only when the overlay is loaded, the page will call lpSetPage instructing the server that a new page has been loaded. At this point the button impression will be evaluated and the appropriate button will be sent down to the client.

What this example shows is how simple it is now to load a button at certain points of the page lifetime without resorting to sophisticated (and often brittle) coding or any additional plugins, etc.

In my opinion this is a great addition to the fuctionality supplied by LP to the customer's website, making it even easier to build great user interactions.