When editing templates, you can create variables based on various external inputs, including data from your:
• CRM integration
• Contact list and email automation system
• Lead forms
This allows you to personalize demos on the fly without needing to create a new demo for each viewer.
In-demo personalization is especially impactful when embedding a demo on a website or landing page with lead forms or when creating marketing outreach campaigns.
Setting Up Your Variables
Begin by selecting a text element in your template. Then create a new text variable for it.
From there, you'll have the option to get personalized values from:
- Salesforce
- URL Query Parameters
- Embedded Lead Forms
Setting up Lead Form Variables
When creating a new variable, select Lead Form. Then embed a new lead form into your demo.
When adding your new lead form code, add the following variable mapping into your <script>.
The actual script provided below needs to be modified with that of your lead system. Only the variable mapping should be copied.
Hubspot:
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
hbspt.forms.create({
region: "na1",
portalId: "XXXXXXX",
formId: "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX",
onFormSubmitted: function($form, data) {
window.postMessage({
message: 'walnut-set-variables',
variables: {
'Name': data.submissionValues.firstname,
}
}, location.href);
}
});
</script>
In the snippet above, the bold text is the part of the code you want to map between a field and the variable name.
'Name' is the variable name and 'firstname' is the field name in the lead system. You can map any field from your lead system to the variable.
Marketo:
MktoForms2.loadForm(
"//app-xyz.marketo.com",
"718-GIV-198",
621,
function (form) {
// hook up with form submit
form.onSuccess(function () {
// this part is similar, get the form values and send them back to our demo
const vals = form.vals();
window.postMessage(
{ message: "walnut-set-variables",
payload: { 'First name': vals.first_name,
'Last name': vals.last_name, },
},
"*",
);
});
},
);
Pardot:
const formID = "#pardot-form";
const form = document.querySelector(formId);
form.addEventListener("submit", function (event) {
window.postMessage(
{ message: "walnut-set-variables",
payload: { "First name": form.first_name.value,
"Email": form.email.value,
},
},
"*",
);
});
Setting up variables with URL Params
When creating a new variable, select URL from the "Get personalized value from" dropdown menu. This allows you to use any email platform to send demos and automatically populate content using recipient data, such as full name, company name, company logo, and more.
Here, you'll see how the query parameter you just created should look when added to your demo link. You can follow the same process for an image variable as well. Click done, and then create your demo.
Once a demo is created with URL query parameter variables a link of the published demo will become available. You can also copy the link without the URL variables if needed.
Important to Note 📝
-
If you’re using the Salesforce variable option, make sure the Salesforce integration is set up first.
-
When using the lead form variable, you can map any field(s) from your lead system to the variable—including multiple fields if needed.