Skip to main content

Attributes

Introduction​

An attribute is a property added to an element in a template. Attributes control how users can edit, remove, move, or display that element in the content editor.

The available attributes depend on the template type:

  • HTML
  • Plain text
  • Hosted Pages

HTML templates​

Add attributes directly to HTML elements. For example:

<div attr-canedit="yes"></div>

attr-canedit​

The value of attr-canedit determines which parts of an element users can adjust in the content editor. For example:

<tr>
  <td attr-canedit="yes" id="section_main_id" class="section_main_title">
    Lorem ipsum dolor sit amet
  </td>
</tr>

Supported values include:

  • yes: Makes the element's available content and options editable.
  • background: Lets users change the element's background image. They can choose an image from File Manager, use a Data Record image, or paste an image URL.
  • image: Lets users change image styles and choose an image from File Manager, a Data Record, or a URL.
  • link: Lets users set the link URL and target. Targets include New window, Top window, and Not track.
  • link-style: Lets users edit link and style properties.
  • paragraph: Enables editing on a <p> element. Images cannot be added through this editor.
  • style: Lets users change styles for the element.
  • text: Enables text editing while preserving the <p> tags in the HTML.

attr-candelete​

Add attr-candelete to make an element removable in the content editor. The editor displays a delete control and a red label to indicate that the element can be removed. When this attribute is combined with another editable element, the delete control appears at the top of the content preview.

attr-canmove​

Use attr-canmove on child elements that users should be able to rearrange. Add attr-movablearea="yes" to their parent element. This lets users duplicate, drag, move, or remove the child elements within that area.

attr-condition​

Use attr-condition to show an element only when the named condition is met:

<div attr-condition="welcome guest">Hello @data.guest_name@</div>

For information about creating conditions, see Conditions.

attr-dynamic​

Use attr-dynamic to display items from an array. This attribute is compatible with <tr>, <td>, <option>, and <div> elements.

For example, given this array in the data schema:

{
  "people": [
    {
      "name": "Sandro",
      "age": 17
    },
    {
      "name": "John",
      "age": 22
    }
  ]
}

Use attr-dynamic on a table row to create a row for each person:

<table>
  <thead></thead>
  <tbody>
    <tr attr-dynamic="@data.people.*@">
      <td>@data.people.name@</td>
      <td>@data.people.age@</td>
    </tr>
  </tbody>
</table>

attr-dynamicrow-condition​

Use attr-dynamicrow-condition with attr-dynamic to apply a condition to each item in the array. For example, this row is shown when the older than 18 condition is met:

<table>
  <thead></thead>
  <tbody>
    <tr
      attr-dynamic="@data.people.*@"
      attr-dynamicrow-condition="older than 18"
    >
      <td>@data.people.name@</td>
      <td>@data.people.age@</td>
    </tr>
  </tbody>
</table>

For information about creating conditions, see Conditions.

Plain-text templates​

For the content creation and editing workflow, see Create and use plain-text content.

Plain-text attributes are written inside the [#LAYER] and [#BLOCK] tags.

ATTR-DEFAULT​

Use ATTR-DEFAULT on a [#LAYER] to make it the default layer in the content editor:

[#LAYER ATTR-DEFAULT="yes"]Hello world[#/LAYER]

ATTR-CANEDIT​

Use ATTR-CANEDIT on a [#LAYER] or [#BLOCK] to make the content editable:

[#BLOCK ATTR-CANEDIT="yes"]Editable text[#/BLOCK]

ATTR-CANDELETE​

Use ATTR-CANDELETE on a layer or block to let users remove it:

[#BLOCK ATTR-CANDELETE="yes"]Removable text[#/BLOCK]

ATTR-CANCLONE​

Use ATTR-CANCLONE on a layer or block to let users duplicate it:

[#LAYER ATTR-CANCLONE="yes"]Repeatable text[#/LAYER]

ATTR-CONDITION​

Use ATTR-CONDITION to show a layer or block only when the named condition is met:

[#LAYER ATTR-CONDITION="older than 18"]You are old enough to drive[#/LAYER]

For information about creating conditions, see Conditions.

Hosted Page templates​

Deprecated functionality

Hosted Pages are deprecated and unavailable for new projects. The attributes in this section apply to existing projects that still use Hosted Pages. See Hosted Pages for details.

Hosted Page templates can use the HTML attributes described above, along with attributes for form submissions. Wrap the elements that use these attributes in a <form> element.

Hosted Page form attributes are used with either Direct URL submissions, which start a flow, or Webhooks, which call a webhook. For more information, see Direct URLs and Webhooks.

Direct URL submissions​

attr-action​

Set attr-action="FLOW" on the submit button to start a flow when the form is submitted:

<form>
  <button attr-action="FLOW" attr-redirect="#">Start a flow</button>
</form>

attr-redirect​

On a <button>, use the optional attr-redirect attribute to choose where to send the user after submission. It accepts:

  • An external URL, such as https://www.google.es.
  • # to refresh the current page.
  • A query string, such as ?page=landing, to reload the current page with a GET parameter.
<form>
  <button attr-action="FLOW" attr-redirect="https://www.google.es">Submit</button>
</form>

attr-field​

Use attr-field on an <input> to identify the variable to update when the form is submitted. For a Direct URL submission, only @data@ variables can be updated:

<form>
  <input type="text" value="update_var" attr-field="@data.var_to_update@">
  <button attr-action="FLOW" attr-redirect="#">Run my flow</button>
</form>

attr-update-session-param​

Use attr-update-session-param="YES" on an <input> to update a session variable:

<form>
  <input
    type="hidden"
    attr-update-session-param="YES"
    value="Session_value"
    attr-field="@session.field1@"
  >
  <button attr-action="FLOW" attr-redirect="#">Run my flow</button>
</form>

Webhook submissions​

attr-action​

Set attr-action="WEBHOOK" on the submit button to call a webhook when the form is submitted.

attr-action-id​

Set attr-action-id to the Hosted Page ID that is submitting the form. You can get this ID from the Hosted Page Generator in a flow. See Hosted Pages.

attr-action-status​

Set attr-action-status to the status to send with the webhook request. You can use a custom status configured for the Hosted Pages webhook. For more information, see Webhooks.

attr-action-url​

Set attr-action-url to the webhook URL that receives the request when the form is submitted.

attr-redirect​

Use the optional attr-redirect attribute to choose where to send the user after submission. It accepts an external URL, # to refresh the current page, or a query string such as ?page=landing to reload the current page with a GET parameter.

The following example calls a webhook and redirects to the current page:

<form>
  <button
    type="submit"
    attr-action="WEBHOOK"
    attr-action-id="{unique-id}"
    attr-action-status="SUBMITTED"
    attr-action-url="{webhook-url}"
    attr-redirect="#"
  >
    Call webhook
  </button>
</form>

attr-field​

Use attr-field on an <input> to identify the variable to update when the form is submitted. Webhook submissions can update @data@ and @keystore@ variables:

<form>
  <input type="text" value="update_var" attr-field="@data.var_to_update@">
  <button
    type="submit"
    attr-action="WEBHOOK"
    attr-action-id="{unique-id}"
    attr-action-status="SUBMITTED"
    attr-action-url="{webhook-url}"
    attr-redirect="#"
  >
    Call webhook
  </button>
</form>

To update a @keystore@ variable, also use attr-update-keystore-key on the submit button.

attr-update-keystore-key​

Use attr-update-keystore-key on a <button> with attr-field to update a Keystore variable. Set it to the Keystore data ID:

<form>
  <input type="text" value="update_var" attr-field="@keystore.my_keystore.var_to_update@">
  <button
    type="submit"
    attr-update-keystore-key="keystore-data-id"
    attr-action="WEBHOOK"
    attr-action-id="{unique-id}"
    attr-action-status="SUBMITTED"
    attr-action-url="{webhook-url}"
    attr-redirect="#"
  >
    Call webhook
  </button>
</form>

attr-update-session-param​

Use attr-update-session-param="YES" on an <input> to update a session variable:

<form>
  <input
    type="hidden"
    attr-update-session-param="YES"
    value="Session_value"
    attr-field="@session.field1@"
  >
  <button
    type="submit"
    attr-action="WEBHOOK"
    attr-action-id="{unique-id}"
    attr-action-status="SUBMITTED"
    attr-action-url="{webhook-url}"
    attr-redirect="#"
  >
    Call webhook
  </button>
</form>

Was this article helpful?