Use editable form fields in code-based experiences code-based-form-fields
For both more flexibility and control over the code-based experiences, Journey Optimizer allows your development team to create JSON or HTML content templates containing specific predefined editable fields.
When creating a code-based experience, non-technical marketers can then directly edit these fields in the interface, without the need to even open the personalization editor, or to touch any other code elements in their journey or campaign.
This capability provides a simplified experience for marketing users while allowing developers more control over the code content, resulting in less room for errors.
Understand the form field syntax form-field-syntax
To make portions of an HTML or an JSON code payload editable, you must use a specific syntax in the expression editor. This involves declaring a variable with a default value that users can override after applying the content template to their code-based experience.
For example, suppose you want to create a content template to apply it to your code-based experiences, and allow users to customize a specific color used in different locations, such as frames or buttons’ background colors.
When creating your content template, you need to declare a variable with a unique ID, for example “color”, and call it at the desired locations in the content where you want to apply this color.
When applying the content template to their content, users will be able to customize the color used wherever the variable is referenced.
Add editable fields to HTML or JSON content templates add-editable-fields
To make some of your JSON or HTML code editable, start by creating a code-based experience content template where you can define specific form fields.
➡️ Learn how to add editable fields to code-based experience templates in this video
-
Create a content template and select the Code-based experience channel. Learn how to create templates
-
Select the authoring mode: HTML or JSON.
note caution CAUTION Changing the authoring mode will result in losing all of your current code. The code-based experiences based on this template need to use the same authoring mode. -
Open the personalization editor to edit your code content.
-
To define an editable form field, navigate to the Helper functions menu in the left navigation pane and add the inline attribute. The syntax to declare and call the variable is automatically added in your content.
-
Replace
"name"with a unique ID to identify the editable field. For example, enter “imgURL”.note NOTE The field ID must be unique and cannot contain spaces. This ID should be used everywhere in your content where you want to display the variable’s value. -
Adapt the syntax to suit your needs by adding parameters detailed in the table below:
table 0-row-3 1-row-3 2-row-3 Action Parameter Example Declare an editable field with a default value. When adding the template to your content, this default value will be used if you don’t customize it. Add the default value between the inline tags. {{#inline "editableFieldID"}}default_value{{/inline}}Define a label for the editable field. This label will display in the code editor when editing the template’s fields. name="title"{{#inline "editableFieldID" name="title"}}default_value{{/inline}}
-
From the Editable form fields section, you can:
- Edit each value directly inside the editable fields, without opening the code editor.
- Click the personalization icon to edit each field using the code editor.
note NOTE In both cases, you can only edit one field at a time, and you cannot edit the rest of the code-based experience content. -
If a decision policy was added to the content template, it comes with all the attributes available in the offers catalog schema. You can edit the decision item inline or using the expression editor.
-
To edit the rest of the code, click the Edit code button and update your full code-based experience content, including the editable form fields. Learn more
How-to video video
Learn how to add editable fields to code-based experience channel content templates.