Using landing page template builder

The landing page template builder allows you to create landing page templates from scratch and edit them by using HTML, CSS, and JavaScript. To each template you can add variables which enable to build a configuration form that simplifies the template editing. Thanks to this, modification of such a template doesn’t require applying changes to the template code. The template builder contains a user-friendly configuration form that brings editing down to filling out fields that define the properties of the template. This makes templates editing possible by any user regardless of the programming skills.

Editing a ready-made template

1. Go to Communication > Landing page > Add landing page.
2. In the Content section, click Define.
3. Click Create message.
4. Select the folder with predefined templates.
5. Select one of the templates to edit.
   Result: You are redirected to the code editor.
6. You can edit the template in two ways:
   • Edit the code of the template, add variables).
   • Go to the Config tab and fill out the form.
7. After you make changes to the template, you can check the preview.
8. If the template is ready, in the upper right corner click Save this template > Save as.
9. On the pop-up:
   1. In the Template name field, enter the name of the template.
   2. From the Template folder dropdown list, select the folder where the template will be saved.
   3. Confirm by clicking Apply.

Creating a template

1. Go to Communication > Landing page > Add landing page.
2. In the Content section, click Define.
3. Click Create message.
4. In the upper right corner, click New Template.
5. On the pop-up, select Code editor.
6. Use the HTML, CSS, and JavaScript tabs to define the properties of the template.
7. If the template is ready, in the upper right corner click Save as.
8. On the pop-up:
   1. In the Template name field, enter the name of the template.
   2. From the Template folder dropdown list, select the folder where the template will be saved.
   3. Confirm by clicking Apply.

Template editing simplification

To make your template more accessible to users without programming skills, you can add a configuration form with variables dedicated for the template, so the user can make adjustments to the template.

The effect of template editing simplification is that you can edit templates by filling out a user-friendly configuration form (available in the Config tab) whose fields define the value for each property of the template.

The process of template simplification involves replacing values with variables in the HTML, CSS, and JavaScript code elements, such as alignment, font, color in CSS, or HTML tags as title, description or buttons. <!–You can also add a variable in the place of Jinjava elements, such as a recommendation campaign ID, voucher pool ID, or catalog name. —>Variables inserted in the code appear in a form the Config tab when editing the template.

List of variables

You can use the following variables:

• String - Allows you to add a field that requires a string value.
• Select - Allows you to add a dropdown list with configurable values.
• Switch - Allows you to add a field which is enabled/disabled by a toggle.
• Color - Allows you to add a color selector. You can either select a color or enter its code manually.
• Number - Allows you to add a field that requires a number. You can either select a number from a dropdown or enter it manually.

While inserting a variable in the code, you must define the ID of the variable, select the type of the variable (if you chose the Select type, you must define the scope of values available in the dropdown) and define a default value. Optionally, you can add a label and description.

Results of simplifying template editing

Instead of modifying the design of the template directly in the code, a user can go to the Config tab and define the properties of the template by filling out configuration form.

The image below presents the easy-to-edit form that lets users without coding expertise change the variable values:

Adding a variable

1. Select one of the following tabs: HTML, CSS, JavaScript.

2. Find a property to which you want to add a variable.

3. On the right side, click Variable.
   Result: A sidebar appears.

4. In the Identifier field, enter the ID of the variable.
   This will be the title of the field unless you define the Label field.

5. From the Type dropdown list, select the type of variable.
   

   StringSelectSwitchColorNumber

   Allows you to add a field that requires a string value.

   1. In the Label (Optional) field, enter the name of the field.
      If this field is empty, the name of the field will be taken from the Identifier field.
   2. In the Description (Optional) field, enter a short explanation of the field’s purpose.
   3. In the Default Value field, enter the default value.

   Allows you to add a dropdown list with configurable values.

   1. In the Label (Optional) field, enter the name of the field. If this field is empty, the name of the field will be taken from the Identifier field.
   2. In the Description (Optional) field, enter a short explanation what this field is for.
   3. In the Display Name field, enter the name that will be visible in a dropdown.
   4. In the Value field, enter a value.
   5. In the Default Value field, enter the default value.

   Allows you to add a field which is enabled/disabled by a toggle.

   1. In the Label (Optional) field, enter the name of the field. If this field is empty, the name of the field will be taken from the Identifier field.
   2. In the Description (Optional) field, enter a short explanation what this field is for.
   3. In the Default Value field, select the default value (true/false).

   Allows you to add a color selector. You can either select a color or enter its code manually.

   1. In the Label (Optional) field, enter the name of the field. If this field is empty, the name of the field will be taken from the Identifier field.
   2. In the Description (Optional) field, enter a short explanation what this field is for.
   3. In the Default Value field, enter the default value.

   Allows you to add a field that requires a number. You can either select a number from a dropdown or enter it manually.

   1. In the Label (Optional) field, enter the name of the field. If this field is empty, the name of the field will be taken from the Identifier field.
   2. In the Description (Optional) field, enter a short explanation what this field is for.
   3. In the Default Value field, enter the default value.

   

6. Optionally, to modify the order of variables appearing in the configuration form, add the order parameter to the variable formula (for example, #### type: "string", id: "string", label: "Text", order: 1 !####).

7. In the upper right corner, click Add.
   Result: In the template code a variable will appear (it starts with ####)