# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.storylane.io/editing-demos/personalizing-demos.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.