Personalising Website Content and Images (v1)

Adding personalised images to emails is a great way to boost email CTR and increase the prospects in your funnel.  Taking that personalisation further and personalising the web page your prospects visit has proven to 2X website CTA clicks.  - We call it Hyper-Personalisation!


This guide details how to use the Hyper-Campaign to personalise your website.


The Hyper-Campaign


You can access the Hyper-Campaign direst from the main menu and then select your image and integration option.


If you're already in the image, selecting the Launch button will take you there, with your image and integration already selected.


Once select, we're given three steps, the first is a repeat of the email image code provided in the image editor.


This is expanded with step two, which provides the code for your website.


Click the Copy Code button in section 2.1 to copy our standard Javascript snippet:



Copy the Code


Lets take a close look at an example of the code we're copying from step 2.1 of the Hyper-Campaign:



<!-- Image Element Code  -->
<img id="hyperiseImage1" src="https://img.hyperi.se/i/ck1jjG35m.png" />

<!-- Paste this script before end of body element-->
<script src='https://app.hyperise.io/snippets/r/Dmug6Yad3.js'></script>
<script>
hyperise.init({
    imageId: 'hyperiseImage1',
    imageTemplate: 'ck1jjG35m',
    sourceId: 24256,
    sourceCode: 'hubspot',
    pixelId: '123456789',
});
</script>



The copied code snippet contains two elements, the Image code which displays the image, and then the Javascript snippet, which personalises the page content and images.


The Image Code


<!-- Image Element Code  -->
<img id="hyperiseImage1" src="https://img.hyperi.se/i/ck1jjG35m.png" 



The image code as we see in the example above can be added anywhere within the <body> tags of the web page, it's just HTML, so should play nicely with any web site editor.  


Alternatively rather than adding a new image, you could choose an existing image on your web page to be updated and personalised, simply by changing it's ID to the one used by the Hyper-Campaign.


By default the ID is set to hyperiseImage1 (id="hyperiseImage1"), so changing any existing image on the page to this ID, will then be updated when the page loads.


The Javascript Snippet


If you're not able to change the ID of an existing image (because it's used elsewhere, or would effect the pages style etc) then you can change the default ID of the image being updated within the Javascript snippet, by changing the imageId value, as shown in the example below:


<!-- Paste this script before end of body element-->
<script src='https://app.hyperise.io/snippets/r/Dmug6Yad3.js'></script>
<script>
hyperise.init({
    imageId: 'hyperiseImage1',
    imageTemplate: 'ck1jjG35m',
    sourceId: 24256,
    sourceCode: 'hubspot',
    pixelId: '123456789',
});
</script>



Adding a Second Image


Once you've started to realise the benefit of personalising website call to actions (CTA) on your sales pages, you'll maybe start to think about expanding the number of personalised elements on a page.


The example below shows the part of the Javascript Snippet that sets the image ID, source, pixel and template.


hyperise.init({
    imageId: 'hyperiseImage1',
    imageTemplate: 'ck1jjG35m',
    sourceId: 24256,
    sourceCode: 'hubspot',
    pixelId: '123456789',
}



We can simply repeat this call for each additional image we want to personalise on the page.


In the example below we show the full Javascript snippet used to change 3 images on a web page:


<!-- Paste this script before end of body element-->
<script src='https://app.hyperise.io/snippets/r/Dmug6Yad3.js'></script>
<script>
hyperise.init({
    imageId: 'hyperiseImage1',
    imageTemplate: 'ck1jjG35m',
    sourceId: 24256,
    sourceCode: 'hubspot',
    pixelId: '123456789',
});

hyperise.init({
    imageId: 'hyperiseImage2',
    imageTemplate: 'febXHyYiE',
    sourceId: 24256,
    sourceCode: 'hubspot',
    pixelId: '123456789',
});

hyperise.init({
    imageId: 'hyperiseImage3',
    imageTemplate: 'QHNdycRuN',
    sourceId: 24256,
    sourceCode: 'hubspot',
    pixelId: '123456789',
});
</script>



Note: we are personalising 3 images in the snippet above (image IDs: hyperiseImage1, hyperiseImage2 & hyperiseImage3) we would then also add or update three images on the page with the respective image IDs.


Along with the image ID, we've changed the imageTemplate, which identifies which image template to be used.  You can find this information in the image URL or via the Hyper-Campaign settings for that image.


Once you've mastered this little trick, you can really go to town on making a personalised sales funnel experience.  


Our own homepage is an example of multiple dynamic images being used :)




Website Content Personalisation


The Javascript snippet also enables content personalisation on the web page.


Simply add any of the Merge Tags used within your image, to the web page content.  These tags will be replaced with the enriched data the image uses, or fallback data set, if not able to personalise.


<body> 
<h1>Hi {{first_name}} - welcome to a better, stress-free way to manage your entire business at 
<span style="color:blue;">{{business_name}}</span></h1> 

<!-- Image Element Code  --> <img id="hyperiseImage1" src="https://img.hyperi.se/i/NyLvWGzzy.png" /> 

</body>


In the above example we have some simple HTML code, that includes a header tag with {{first_name}} and {{business_name}} personalisation merge tags added (as well as a personalised image).


Website Cookies


The Hyper-Campaign snippet will also set a cookie, this enables that second time visitors, who visit directly, rather than from a personalised link, will still be identified and served personalised images and web page content.




I hope the above example is helpful, but please jump on to chat, or our facebook community, if you have any further questions.