Attributes

Introduction

An attribute is a property you set to your element in your template in order to make it later on user-adjustable in the content editor.

The attributes available depend on the template type:

HTML
Plain
Hosted page

Below you can find the list of attributes by type.

HTML

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

You have different kind of attributes that can be added to your HTML template. e.g. attr-canedit=”background”:

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

attr-canedit: Depending on the value you type to this attribute, it behaves on different ways:

yes: Include all the user-adjustable options that an user can set in that HTML element.
background: It’s possible to change the properties of the background-image of an HTML element. That image can be uploaded from the File Manager, from a Data Record or even pasting its URL.
image: Edit your styles for images. As we can do at “Background” tab, we can arrange images from File Manager, from a Data Record or even pasting its URL.
link: Place the URL and target (New window, Top window or Not track) of the link.
link-style: Change link and style properties.
paragraph: This attribute can be inserted in <p> tags. You can use the editor but it’s not allowed to use images on it.
style: Using this, you can change the styles of the current HTML element.
text: This one is similar to paragraph, but here you can preserve (not modify) your <p></p> tags inside your HTML content.

attr-candelete: This attribute makes an element removable on the Content editor. It shows a button and a red label noticing if you want to remove an element of your content.

In case of being combined with another element, you will only see the button on the top of the Content preview.

attr-canmove: To enable this attribute on your content, you need to set on the parent HTML element (of those HTML elements you want to mark as movable) the attribute “attr-movablearea=”yes”. On this way, you can enable to all the children HTML elements the properties to: duplicate, drag & drop, move and remove elements inside that area.

attr-condition: This lets you apply a condition to an element, so that this will be only displayed if the condition matches:

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

If you need information about how to create a condition, please visit this post.

attr-dynamic: This attribute allows you to display information from an array. This option is only compatible with <tr>, <td>, <option> and <div> elements.

Let’s use the following array from our data scheme as example:

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

The HTML code that we would use to display a simple table would look like:

<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: This attribute is used for defining a condition along with the attr-dynamic. This condition will be applied to each entry of the array. If you need information about how to create a condition, please visit this post.

<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>

Plain text

ATTR-DEFAULT: This attribute can be only added to the [#LAYER]. It defines whether this will be the default layer in the content editor or not.

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

ATTR-CANEDIT: This attribute can be applied to both [#LAYER] and [#BLOCK].

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

ATTR-CANDELETE: This can be set in both cases and it sets the possibility to delete the element.

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

ATTR-CANCLONE: This allows you to duplicate an element. It can be applied to both.

[#LAYER ATTR-CANDELETE="yes"][#/LAYER]

ATTR-CONDITION: This lets you apply a condition to an element, so that this will be only displayed if the condition matches:

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

Hosted page

In a hosted page template you can use not only all the HTML attributes, but also these others listed below.

Keep in mind that, for using these, you need to wrap the element within a <form>.

The attributes available are divided into two sections:

Direct URL: used for kicking off a flow.
Webhooks: used for calling a webhook.

Direct URL

attr-action: This indicates the action that will be triggered upon submission. In this case it will kick off a flow.

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

attr-redirect: This attribute is only compatible with <button> elements. It is optional and defines the page where the user will be redirected to after form submission.

<form>
   <button attr-action="FLOW" attr-redirect="https://www.google.es">Submit</button>
</form>

This attribute can have one of the following values:

An external URL: for instance,https://www.google.es.
Refresh the same page: #
Reload the current page, but add a get parameter: ?page=landing.

attr-field: this attribute is only compatible with <input> elements. It refers to the variable that will be updated upon form submission.

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

The only variables that can be updated in this case are @data@.

attr-update-session-param: This attribute is only compatible with <input> elements. It allows you 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>

Webhooks

attr-action: This indicates the action that will be triggered upon submission. In this case it will call a webhook.

attr-action-id: It refers to the hosted page that is triggering the submission. This ID can be generated by the hosted page plugin in a flow. For further information, please refer to this link.

attr-action-status: It refers to the status that is triggered upon submission. You can add custom statuses to your hosted pages webhook and use these instead. For more information please refer to this link.

attr-action-url: It points to the webhook URL that will receive a call upon submission.

attr-redirect: It is optional and defines the page where the user will be redirected to after form submission.

This attribute can have one of the following values:

An external URL: for instance,https://www.google.es.
Refresh the same page: #
Reload the current page, but add a get parameter: ?page=landing.

<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: this attribute is only compatible with <input> elements. It refers to the variable that will be updated upon form submission.

<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>

The only variables that can be updated in this case are @data@ and @keystore@.

For updating @keystore@ variables, we need to use an extra parameter that is explained below.

attr-update-keystore-key: This attribute is only compatible with a <button> element. It is used together with attr-field when we would like to update variables from the keystore.

<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: This attribute is only compatible with <input> elements. It allows you 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>

Introduction​

HTML​

Plain text​

Hosted page​

Direct URL​

Webhooks​