Personalize from Lead Form

Using Storylane Lead Form

When you use Storylane Lead Form, below token variables are automatically created for you.

• {{email}}, {{first_name}}, {{last_name}}, {{name}}

• You can use the above tokens in your guided steps to personalize the experience

Try Interactive Demo Yourself 👇

Using Custom Lead Form

If you are using your custom lead form (eg: Hubspot, Marketo, Pardot, etc.), then you will need to pass the form data through a cross-origin message so that tokens can be assigned.

Below is a sample code snippet showing how data will be sent:

// sample code where tokens "first_name" and "last_name" are assigned
window.parent.postMessage({
  message: 'storylane-token-submit',
  payload: {
    token: {first_name: "John", last_name: "Doe"}
  }
},'*');

Example with Hubspot Form:

// sample code where tokens "first_name" and "last_name" are 
// assigned by fetching data from hubspot form

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
   hbspt.forms.create({
    region: "na1",
    portalId: "######",
    formId: "######-######-######-######-######",
       onFormSubmit: function($form) {
           $hs_fname = $form[0].first_name.value;
           $hs_lname = $form[0].last_name.value;
           window.parent.postMessage({
	 	message: 'storylane-token-submit',
		payload: {
		 	token: {first_name: $hs_fname, last_name: $hs_lname}
		}
	   },'*');
       }
  });
</script>

Example with Marketo Form

// sample code where tokens "first_name" and "last_name" are 
// assigned by fetching data from marketo form

<script src="//test.storylane.io/js/forms2/js/forms2.min.js"></script> 
<form id="mktoForm_####"></form> 

<script>
MktoForms2.loadForm("//test.storylane.io", "###-####-####", ####, function(form) {
   // Add an handler 
   form.onSuccess(function(){
         var vals = form.vals();
         window.parent.postMessage({
	 	message: 'storylane-token-submit',
		payload: {
		 	token: {first_name: vals.first_name, last_name: vals.last_name}
		}
	 },'*');
    });
});
</script>