Personalizing Demos

• Personalize HTML screens

• Personalize guided steps

• Personalize demo content from the lead form data

• Personalize demo content from URL params

Read below to learn more about how content can be personalized in different ways.

👉 Personalize HTML Screens

💬 Text Tokens

Insert dynamic text tokens to personalize HTML screens

• Select any text element in the captured screen

• Then, select "Insert Text Token" to add your token

• Configure multiple tokens for your account by clicking on "Manage Fields". You can also assign a 'default' value as a fallback option

📅 Date & Time Tokens

Keep your demos fresh with the latest time and date

• Click on the element where you would like the current date or time to be shown

• Insert the date/time format you need

Read more about formatting options and how you can add/subtract dates

🖼️ Image Tokens

Dynamically swap out logos or images in your demo before sharing them with prospects.

• Click on any image element and choose "Assign Image token."

• Create a new token or choose an already existing token

• Assign 'Default' image for fallback

• If your image or logo is present on other pages, then choose to match "All Screens" (Storylane automatically detects the same element logo and updates all with a token, so you don't need to do it on each screen)

👉 Personalize Guided Steps

Personalize your guide content with "Text Tokens". This is a great way to share tailored demo experiences, especially with bottom of the funnel leads.

• Select the guide modal to edit

• Select the "Text Tokens" button

• Pick a token from the dropdown

👉 Personalize from lead form data

When using a native 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 the Interactive Demo Yourself 👇

When using a custom lead form

If you are using your custom lead form (e.g., 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>

Personalize from URL params

You can personalize your demo content through URL query parameters. Once you have 'Text tokens' set up then you can build different demo URLs by encoding the token values as URL params.

Let's say you have 3 tokens set up in your demo ("first_name", "last_name", "company_name"), then you can build your demo URL with data like below:

https://app.storylane.io/share/jdelklbymyyr?token[first_name]=Jane&token[last_name]=Smith&token[company_name]=Acme

When the above demo URL is opened then it will be automatically personalized with the token values passed in URL params.

Passing data from CRM or Marketing Automation platform

You can also pass data from your CRM or marketing platforms as token values in URL params

Hubspot - see the resource here on how Hubspot contact data can be used as token values

Here is an Example for the above URL:

https://app.storylane.io/share/jdelklbymyyr?token[first_name]={{contact.firstname}}&token[last_name]={{contact.lastname}}&token{company_name}={{contact.company}}

Marketo - resource here on how Marketo data can be used as token values

https://app.storylane.io/share/fvzglsvinxb8?email={{lead.Email Address:default=noemail}}

Pardot - resource here on how Pardot data can be used as token values

https://app.storylane.io/share/fvzglsvinxb8?email={{Recipient.Email}}

ActiveCampaign - resource here on how ActiveCampaign data can be used as token values

 https://app.storylane.io/share/fvzglsvinxb8?email=%EMAIL%

Lemlist - resource here on how Lemlist data can be used as token values

https://app.storylane.io/share/fvzglsvinxb8?email={{email}}