# Personalizing Demos

* [Personalize HTML screens](#personalize-html-screens)
* [Personalize guided steps](#personalize-guided-steps)
* [Personalize demo content from the lead form data](#personalize-from-lead-form-data)
* [Personalize demo content from URL params](#personalize-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

<figure><img src="https://2431356420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN8hWd9k2Pbb6YSWO4pUQ%2Fuploads%2FVEiQsx5T1Zolk1869wsN%2FScreenshot%202025-07-31%20at%205.35.25%E2%80%AFPM.png?alt=media&#x26;token=100ca363-b9d4-4548-9503-8684f9a96502" alt=""><figcaption></figcaption></figure>

#### 📅 **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&#x20;
* Insert the date/time format you need

<figure><img src="https://2431356420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN8hWd9k2Pbb6YSWO4pUQ%2Fuploads%2FQBWvqsYHLJaOMoEC6S95%2FScreenshot%202025-07-31%20at%205.38.55%E2%80%AFPM.png?alt=media&#x26;token=3e4b996b-7e1a-4d6d-8f2e-30f08e3c8ac4" alt=""><figcaption></figcaption></figure>

[Read more about formatting options and how you can add/subtract dates](https://docs.storylane.io/trust-and-security/faqs/how-to-add-or-subtract-a-date-and-time-token)

#### 🖼️ **Image Tokens**

Dynamically swap out logos or images in your demo before sharing them with prospects.&#x20;

* 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)

<figure><img src="https://2431356420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN8hWd9k2Pbb6YSWO4pUQ%2Fuploads%2F6BYO9GBRrLhgzkW0F3K4%2FScreenshot%202025-07-31%20at%205.41.39%E2%80%AFPM.png?alt=media&#x26;token=fc705cdd-905f-4366-8f40-a8d556a7502c" alt=""><figcaption></figcaption></figure>

***

### 👉 **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

<div align="left"><figure><img src="https://2431356420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN8hWd9k2Pbb6YSWO4pUQ%2Fuploads%2FVQLWpeGCjMW2x0JUhRYz%2FScreenshot%202025-07-31%20at%206.38.29%E2%80%AFPM.png?alt=media&#x26;token=bbfb563f-f3f8-4900-a9f1-6be9eab6d8dc" alt="" width="375"><figcaption></figcaption></figure></div>

***

### 👉 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 👇

{% @storylane/embed subdomain="app" linkValue="3df4bbu8gykl" url="<https://app.storylane.io/share/3df4bbu8gykl>" %}

#### **When using a custom lead form**&#x20;

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. &#x20;

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

```javascript
// 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:

```javascript
// 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

```javascript
// 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:&#x20;

{% code overflow="wrap" %}

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

{% endcode %}

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

#### Passing data from CRM or Marketing Automation platform&#x20;

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

**Hubspot -** see the resource [here](https://knowledge.hubspot.com/website-pages/personalize-your-content) on how Hubspot contact data can be used as token values

Here is an Example for the above URL:

{% code overflow="wrap" %}

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

{% endcode %}

**Marketo -** resource [here ](https://experienceleague.adobe.com/docs/marketo/using/getting-started-with-marketo/quick-wins/personalize-an-email.html?lang=en)on how Marketo data can be used as token values

{% code overflow="wrap" %}

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

{% endcode %}

**Pardot -** resource [here](https://help.salesforce.com/s/articleView?id=sf.pardot_variable_tags.htm\&type=5) on how Pardot data can be used as token values

{% code overflow="wrap" %}

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

{% endcode %}

**ActiveCampaign** - resource [here](https://help.activecampaign.com/hc/en-us/articles/220709307-Personalization-Tags#list-of-standard-personalization-tags-0-5) on how ActiveCampaign data can be used as token values

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

**Lemlist** - resource [here](https://help.lemlist.com/en/articles/4452688-custom-variable-format) on how Lemlist data can be used as token values

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

{% hint style="info" %}
If you need help or have any questions, feel free to contact us at <support@storylane.io>.
{% endhint %}