Website Personalisation - Unless Integration


Using a tool like Unless enables the creation of custom audience segments, and adding personalisation in a code free simple way.  With Hyperise integrated with Unless, you can personalise text elements on the page, using enriched data used by your personalised image.


To achieve this we need to do four things:

  1. Add the Unless snippet to your website
  2. Create your personalised image in Hyperise
  3. Add the Hyperise code snippet to Unless
  4. Personalise the page with Hyperise Merge tags


Pretty simple in bullet fashion, lets jump into the detail and flesh-out those steps... 

1. Add Unless snippet

As you're interested in this integration, we can maybe assume you're already an Unless user, so you've probably already done this step.  However just in case, here is the link to the Unless getting started help guide: https://unless.com/en/help/getting-started/creating-your-first-personalization/


2. Create Image

Again we're kinda assuming if you've got this far, that you know how to create a personalised image in Hyperise, but if not, check out this quicker overview video of our Image editor: 


3. Unless/Hyperise Integration

Finally we're on to the home straight and connecting the two platforms.


First we're going to need the Hyperise custom snippet, which is show below.  Copy all the code below in the black box:


var url = new URL(window.location.href);
url.searchParams.get("utm_hyperef")?(hyperef=url.searchParams.get("utm_hyperef"),createCookie("utm_hyperef",hyperef,365)):hyperef=accessCookie("utm_hyperef");

var source_id =Β '';
var image_template =Β '';

hype = loadJSON('https://hyperise.com/test/combinedapi.php?image_template='+image_template+'&source_id='+source_id+'&utm_hyperef='+hyperef);
console.log(hype);

Txt.set('first_name', hype.first_name);
Txt.set('last_name', hype.last_name);
Txt.set('job_title', hype.job_title);
Txt.set('profile_image', hype.profile_url);
Txt.set('business_name', hype.business_name);
Txt.set('business_website', hype.business_website);
Txt.set('logo_url', hype.logo_url);
Txt.set('custom_image_1', hype.custom_image_1);
Txt.set('custom_text_1', hype.custom_text_1);

function loadJSON(e){var n=loadTextFileAjaxSync(e,"application/json");return JSON.parse(n)}function loadTextFileAjaxSync(e,n){var t=new XMLHttpRequest;return t.open("GET",e,!1),null!==n&&t.overrideMimeType&&t.overrideMimeType(n),t.send(),200==t.status?t.responseText:null}

function createCookie(e,t,i){var n=new Date;n.setTime(n.getTime()+24*i*60*60*1e3),document.cookie=e+"="+t+"; expires="+n.toGMTString()}function accessCookie(e){for(var t=e+"=",i=document.cookie.split(";"),n=0;n<i.length;n++){var o=i[n].trim();if(0==o.indexOf(t))return o.substring(t.length,o.length)}return""}


The above code has two parameters you need to complete source_id and image_template both of these values can be retrieved from the Hyper-Campaign within Hyperise.  


Go to the Hyper-Campaign from the main menu and select the Image and Integration options and view the code in step 2.1.



Now we head over to Unless, navigate to Personalizations > On-site and either create a new on-site personalisation, or edit an existing Personalization if you've created one already.



Within the settings page  you'll find the Personalization Editor button, clicking this will take you to the page where you can add the code.



From within the editor on the right-hand-side, click the custom javascript  icon and paste in the code example from above.



Now update the two parameter values from the Hyper-Campaign and the data enrichment integration will be complete!


4. Adding Personalisation Tags


Once the integration is complete you can now start to use the editor to select elements on the page and create personalised alternatives, with the same personalisation tags you use within Hyperise.




You can now see the final live page here https://hyperise.com/unless?utm_hyperef=tcook@apple.com using Unless, in this example we're passed our fav tcook πŸ™‚ to see some Apple personalisation.