Create a Guided Landing Page Template create-a-guided-landing-page-template
Guided landing page templates have a special syntax. Use this syntax to specify what is customizable and where content will end up on each landing page built from your template. Only the regions or variables you specify as editable will be available for customization within the 鈥淕uided鈥 landing page editor.
There are two ways to declare that something on your page should be editable:
- Declare an object as an 鈥渆lement鈥. The landing page creator will be able to add images, text, or Marketo assets into those specified regions.
- Declare a string as a 鈥渧ariable鈥. The landing page creator will be able to replace that variable with a string, color, or boolean state from a true/false lever.
Editable Elements editable-elements
Elements are declared by adding a normal DOM element to the template, then decorating the element with a Marketo-specific class name.
Text text
If you define a region as Rich Text, users will be able to edit its contents using Marketo鈥檚 Rich Text Editor.
Required attributes:
class: 鈥渕ktoText鈥
id: ID string. Contains only letters, numbers, dash 鈥-鈥, and underscore 鈥淿鈥. No spaces allowed. Must be unique.
mktoName : String. This is the display name that will be shown in the landing page editor. Best practice is to use a descriptive name.
Optional:
The content of an element with class mktoText (if provided) will be used as the default value for the editable region.
Example:
<div class="mktoText" id="exampleText" mktoName="Main Body Text"> Optionally add default text for the editable text area.</div>
Image image
You have two options for defining editable Image Elements. You may use either a <div>, which specifies a container that the image will be inserted into, or an <img> tag.
Option 1 - Use a <div> option-use-a-div
Required attributes:
class: 鈥渕ktoImg鈥
id: ID string. Contains only letters, numbers, dash 鈥-鈥, and underscore 鈥淿鈥. No spaces allowed. Must be unique.
mktoName : String. This is the display name that will be shown in the landing page editor. Best practice is to use a descriptive name.
Optional:
mktoImgClass: String. The value here will be added to the class attribute of the <img> element inside the div.
Example:
<div class="mktoImg" id="exampleImg" mktoName="Example Image"></div>
Option 2 - Use a <img> option-use-a-img
Required attributes:
class: 鈥渕ktoImg鈥
id: ID string. Contains only letters, numbers, dash 鈥-鈥, and underscore 鈥淿鈥. No spaces allowed. Must be unique.
mktoName : String. This is the display name that will be shown in the landing page editor. Best practice is to use a descriptive name.
Optional:
src: String URL. This will be used as the default value for the image.
Example:
<img class="mktoImg" id="exampleImg" mktoName="Example Image">
<img> version, the rendered HTML will contain a generated div wrapper around the <img> tag. It will be set to class .鈥漨ktoImg.mktoGen,鈥 and will be display:inline-block.Form form
Example:Required attributes:
class: 鈥渕ktoForm鈥
id: ID string. Contains only letters, numbers, dash 鈥-鈥, and underscore 鈥淿鈥. No spaces allowed. Must be unique.
mktoName : String. This is the display name that will be shown in the landing page editor. Best practice is to use a descriptive name.
<div class="mktoForm" id="exampleForm" mktoName="Example Form"></div>
Snippet snippet
Required attributes:
class: 鈥渕ktoSnippet鈥
id: ID string. Contains only letters, numbers, dash 鈥-鈥, and underscore 鈥淿鈥. No spaces allowed. Must be unique.
mktoName : String. This is the display name that will be shown in the landing page editor. Best practice is to use a descriptive name.
Example:
<div class="mktoSnippet" id="exampleSnippet" mktoName="Example Snippet"></div>
Share Button share-button
Required attributes:
class: 鈥渕ktoShareButton鈥
id: ID string. Contains only letters, numbers, dash 鈥-鈥, and underscore 鈥淿鈥. No spaces allowed. Must be unique.
mktoName : String. This is the display name that will be shown in the landing page editor. Best practice is to use a descriptive name.
Example:
<div class="mktoShareButton" id="exampleShareButton" mktoName="Example Share Button"></div>
Video video
Required attributes:
class: 鈥渕ktoVideo鈥
id: ID string. Contains only letters, numbers, dash 鈥-鈥, and underscore 鈥淿鈥. No spaces allowed. Must be unique.
mktoName : String. This is the display name that will be shown in the landing page editor. Best practice is to use a descriptive name.
Example:
<div class="mktoVideo" id="exampleVideo" mktoName="Example Video"></div>
Poll poll
Required attributes:
class: 鈥渕ktoPoll鈥
id: ID string. Contains only letters, numbers, dash 鈥-鈥, and underscore 鈥淿鈥. No spaces allowed. Must be unique.
mktoName : String. This is the display name that will be shown in the landing page editor. Best practice is to use a descriptive name.
Example:
<div class="mktoPoll" id="examplePoll" mktoName="Example Poll"></div>
Referral referral
Required attributes:
class: 鈥渕ktoReferral鈥
id: ID string. Contains only letters, numbers, dash 鈥-鈥, and underscore 鈥淿鈥. No spaces allowed. Must be unique.
mktoName : String. This is the display name that will be shown in the landing page editor. Best practice is to use a descriptive name.
Example:
<div class="mktoReferral" id="exampleReferral" mktoName="Example Referral"></div>
Sweepstakes sweepstakes
Required attributes:
class: 鈥渕ktoSweepstakes鈥
id: ID string. Contains only letters, numbers, dash 鈥-鈥, and underscore 鈥淿鈥. No spaces allowed. Must be unique.
mktoName : String. This is the display name that will be shown in the landing page editor. Best practice is to use a descriptive name.
Example:
<div class="mktoSweepstakes" id="exampleSweepstakes" mktoName="Example Sweepstakes"></div>
Editable Variables editable-variables
All variable types are used by referencing the value of their id attribute wrapped inside of a ${ } character sequence. They can be used anywhere in the document, except for inside of other variable declarations.
Example:
${var1}
Declaration:
Variables are declared as meta tags inside the <head> element of the template. There are three types of variables available for use: String, Color, and Boolean.
String string
Required Attributes:
class : 鈥渕ktoString鈥,
id: ID string. Contains only letters, numbers, dash 鈥-鈥, and underscore 鈥淿鈥. No spaces allowed. Must be unique.
mktoName : String. This is the display name that will be shown in the landing page editor. Best practice is to use a descriptive name.
Optional:
default: String value for the attribute. Blank if none provided.
allowHtml: 鈥渢rue鈥 or 鈥渇alse鈥. Controls if the value will be printed without being HTML escaped. Defaults to 鈥渇alse鈥 if unset.
Basic Example:
<meta class="mktoString" id="var1" mktoName="My Variable">
Example with all attributes:
<meta class="mktoString" id="var1" mktoName="My Variable" default="This is my default value" allowHtml="true">
Color color
Required Attributes:
class : 鈥渕ktoColor鈥,
id: ID string. Contains only letters, numbers, dash 鈥-鈥, and underscore 鈥淿鈥. No spaces allowed. Must be unique.
mktoName : String. This is the display name that will be shown in the landing page editor. Best practice is to use a descriptive name.
Optional:
default: A 7-digit HEX character color code. Eg: 鈥#336699鈥
Basic Example:
<meta class="mktoColor" id="color1" mktoName="My Color Variable">
Example with all attributes:
<meta class="mktoColor" id="color" mktoName="My Color Variable" default="#336699">
Boolean boolean
Required Attributes:
class : 鈥渕ktoBoolean鈥,
id: ID string. Contains only letters, numbers, dash 鈥-鈥, and underscore 鈥淿鈥. No spaces allowed. Must be unique.
mktoName : String. This is the display name that will be shown in the landing page editor. Best practice is to use a descriptive name.
Optional:
default: Boolean string. 鈥渢rue鈥 or 鈥渇alse鈥 controls if the value starts in the ON or OFF position. 鈥渇alse鈥 if not provided.
false_value: String. The value to be inserted for the variable when it is in the OFF position. 鈥渇alse鈥 if not provided.
true_value: String. The value to be inserted for the variable when it is in the ON position. 鈥渢rue鈥 if not provided.
false_value_name: String. The display name to be shown in the landing page editor when the value is in the OFF position. 鈥淥FF鈥 if not provided.
true_value_name: String. The display name to be shown in the landing page editor when the value is in the ON position. 鈥淥N鈥 if not provided.
Basic Example:
<meta class="mktoColor" id="color" mktoName="My Color Variable" default="#336699">
<meta class="mktoBoolean" id="boolean1" mktoName="My Boolean Variable">
Example with all attributes:
This example shows a common use case where a boolean variable controls the visibility of a css element by setting the value of css display property to either 鈥渂lock鈥 or 鈥渘one鈥 to show/hide an element by id with CSS. The landing page editor will use the display name Show/Hide instead of OFF/ON.
<meta class="mktoBoolean" id="boolean1" mktoName="My Boolean Variable" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show"> <style> #myConditionalDisplayArea { display: ${boolean1}; } </style>