2.2 Form website personalization

Form website personalization

If you haven't been able to identify the web visitor via utm_hyperef parameters from your campaigns, or reverse IP lookups, or with a cookie from a prior session, your next best option is to ask the visitor for some information and then personalising based on that input.

Of course there are many ways ask a user for information, such as chatbots (see our Landbot guide if that's your bag), but for this example lets keep it simple with a form.

To connect any form on your website to Hyperise, the quickest and simplest route is using our Chrome extension (https://chrome.google.com/webstore/detail/hyperise-image-website-pe/ppikcbhmbpfjahnbkkhahngadfaianbn):

1) Load the Chrome Extension on your web page 

2) Click on any form input element, then right click and select the Setup Form option

3) Now select each form input element and select the corresponding Hyperise personalisation field to map to.

Advanced code Implementation:

Under some circumstances it might be preferable to implement web personation from a form, or other trigger using code.  

Hyperise exposes the hyperise object via Javascript, which can be called to set information, as well as receive resulting enriched personalised data.

To pass collected data to Hyperise, to enable enrichment and personalisation, simply use the following Javascript call in your form or web calls, passing the collected data:

hyperise.personalize({email: ''});

Simply replace the email value with the input field ID. In the above GIF example we have a simple form, an input field called email and a button to trigger the form.  Finally we see in the form action the Javascript call to Hyperise, sending the email value direct from the input form.

<form action="javascript:hyperise.personalize({email: document.getElementById('email').value});" method="POST" >
  <input type="email" value="" name="email" id="email"  placeholder="email address" >
  <button >See Personalisation Demo</button>
</form>

You can pass any collected data; the example above is passing an email to Hyperise, the example below is passing the first name:

hyperise.personalize({first_name: document.getElementById('fname').value});

You can also pass multiple values, by using commas to separate each name: value pair:

hyperise.personalize({first_name: '', website: '', email: ''});

You can reset any personation in the users session by triggering the following Javascript command:

hyperise.revert();

You can also add a listener event, to attach to an existing form, that will uninterrupted the core form function.  Adding the following javascript snippet to your page will enable Hyperise to attach to the form:

<script>
document.querySelector("#myForm").addEventListener("submit", function(e){
    hyperise.personalize({
      email: document.getElementById('email').value , 
      first_name: document.getElementById('fname').value , 
      last_name: document.getElementById('lname').value , 
    });
})
</script>

Remember to change the myForm  and the email  ,  fname ,  lname input field IDs, to the actual values from your form.