Email Dynamic Template

Las plantillas dinámicas de correo electrónico de Engagelab admiten el lenguaje de plantillas Handlebars para presentar el contenido personalizado que se envía a través de la API.

Sustitución de variables

Sustitución básica

Ejemplo de plantilla

Hello {{firstname}}

              
              <p>Hello {{firstname}}</p>

Este bloque de código se muestra en una ventana flotante

Datos de prueba

{ "firstName": "Engagelab" }

              
              { "firstName": "Engagelab" }

Este bloque de código se muestra en una ventana flotante

Resultado de renderizado

Hello Engagelab

              
              <p>Hello Engagelab</p>

Este bloque de código se muestra en una ventana flotante

Sustitución de objetos anidados

Ejemplo de plantilla

Hello {{user.profile.firstName}}

              
              <p>Hello {{user.profile.firstName}}</p>

Este bloque de código se muestra en una ventana flotante

Datos de prueba

{ "user": { "profile": { "firstName": "Engagelab" } } }

              
              {
    "user": {
        "profile": {
            "firstName": "Engagelab" 
        }
    }
}

Este bloque de código se muestra en una ventana flotante

Resultado de renderizado

Hello Engagelab

              
              <p>Hello Engagelab</p>

Este bloque de código se muestra en una ventana flotante

formatDate

La función formatDate acepta marcas de tiempo Unix o fechas en formato ISO8601 y las convierte al formato especificado mediante los marcadores de la siguiente tabla.
Tomando como ejemplo la hora UTC 1987-09-20T20:55:00.000Z, los resultados de conversión y visualización se muestran en la tabla siguiente:

Marcador de posición	Resultado
YYYY	1987
YY	87
MMMM	September
MMM	Sep
MM	09
M	9
DD	20
D	20
dddd	Sunday
ddd	Sun
hh	08
h	8
HH	20
H	20
mm	55
m	55
ss	00
s	0
A	PM
ZZ	+0000
Z	+00:00

Ejemplo de plantilla

{{formatDate timeStamp dateFormat}}  {{formatDate timeStamp dateFormat timezoneOffset}}

              
              <p>{{formatDate timeStamp dateFormat}}</p>
<!-- Example of time zone offset -->
<p>{{formatDate timeStamp dateFormat timezoneOffset}}</p>

Este bloque de código se muestra en una ventana flotante

Datos de prueba

{ "timeStamp": "1987-09-20T12:55:00.000Z", "dateFormat": "YYYY-MM-DD HH:mm:ss A", "timezoneOffset": "+0800" }

              
              {
  "timeStamp": "1987-09-20T12:55:00.000Z",
  "dateFormat": "YYYY-MM-DD HH:mm:ss A",
  "timezoneOffset": "+0800"
}

Este bloque de código se muestra en una ventana flotante

Resultado de renderizado

1987-09-20 12:55:00 PM  1987-09-20 20:55:00 PM

              
              <!-- Rendering Result（Template One） -->
<p>1987-09-20 12:55:00 PM</p>

<!-- Rendering Result（Template Two） -->
<p>1987-09-20 20:55:00 PM</p>

Este bloque de código se muestra en una ventana flotante

Insert

Ejemplo de plantilla

Thank you for contacting us about {{insert businessName "your business"}}.

              
              <p>Thank you for contacting us about {{insert businessName "your business"}}.</p>

Este bloque de código se muestra en una ventana flotante

Datos de prueba

// Test Data One {} // Test Data One { "businessName": "Engagelab" }

              
              // Test Data One
{}

// Test Data One
{
    "businessName": "Engagelab"
}

Este bloque de código se muestra en una ventana flotante

Resultado de renderizado

Hello Ben! Thank you for contacting us about your business.  Hello Customer! Thank you for contacting us about Engagelab.

              
              <!-- Rendering Result One -->
<p>Hello Ben! Thank you for contacting us about your business.</p>

<!-- Rendering Result二 -->
<p>Hello Customer! Thank you for contacting us about Engagelab.</p>

Este bloque de código se muestra en una ventana flotante

Instrucciones condicionales

If, Else, Else If

Ejemplo de plantilla

{{#if user.profile.isTeacher}} Hello, Teacher {{user.profile.firstName}} {{else if user.profile.isStudent}} Hello, Student {{user.profile.firstName}} {{else}} Hello, {{user.profile.firstName}}! Welcome. {{/if}}

              
              {{#if user.profile.isTeacher}}
   <p>Hello, Teacher {{user.profile.firstName}}</p>
{{else if user.profile.isStudent}}
   <p>Hello, Student {{user.profile.firstName}}</p>
{{else}}
   <p>Hello, {{user.profile.firstName}}! Welcome.</p>
{{/if}}

Este bloque de código se muestra en una ventana flotante

Datos de prueba

// Test Data One { "user": { "profile": { "firstName": "Zhang San", "isTeacher": true } } } // Test Data二 { "user": { "profile": { "firstName": "Li Si", "isStudent": true } } } // Test Data三 { "user": { "profile": { "firstName": "Wang Wu", } } }

              
              // Test Data One
{
    "user": {
        "profile": {
            "firstName": "Zhang San",
            "isTeacher": true
        }
    }
}

// Test Data二
{
    "user": {
        "profile": {
            "firstName": "Li Si",
            "isStudent": true
        }
    }
}

// Test Data三
{
    "user": {
        "profile": {
            "firstName": "Wang Wu",
        }
    }
}

Este bloque de código se muestra en una ventana flotante

Resultado de renderizado

Hello, Teacher Zhang San  Hello, Student Li Si  Hello, Wang Wu! Welcome.

              
              <!-- Rendering Result（Test Data One） -->
<p>Hello, Teacher Zhang San</p>

<!-- Rendering Result（Test Data二） -->
<p>Hello, Student Li Si</p>

<!-- Rendering Result（Test Data三） -->
<p>Hello, Wang Wu! Welcome.</p>

Este bloque de código se muestra en una ventana flotante

Unless

Ejemplo de plantilla

{{#unless license}} WARNING: This entry does not have a license! {{/unless}}

              
              {{#unless license}}
    <p class="warning">WARNING: This entry does not have a license!</p>
{{/unless}}

Este bloque de código se muestra en una ventana flotante

Datos de prueba

{}

{}

Este bloque de código se muestra en una ventana flotante

Resultado de renderizado

WARNING: This entry does not have a license!

              
              <!-- Rendering Result -->
<p class="warning">WARNING: This entry does not have a license!</p>

Este bloque de código se muestra en una ventana flotante

Operadores de comparación

Los operadores de comparación admiten dos modos de uso: básico y con else.

La sintaxis admitida se muestra en la tabla siguiente:

Expresión	Explicación
greaterThan	>
lessThan	<
equals	=
greaterThanOrEquals	>=
lessThanOrEquals	<=
notEquals	!=

Básico

Ejemplo de plantilla

{{#greaterThan truckWeight limitWeight}} The truck is not allowed to pass. {{/greaterThan}}

              
              <p> 
{{#greaterThan truckWeight limitWeight}}
The truck is not allowed to pass.
{{/greaterThan}}
</p>

Este bloque de código se muestra en una ventana flotante

Datos de prueba

{ "truckWeight": 6, "limitWeight": 5 }

              
              {
    "truckWeight": 6,
    "limitWeight": 5
}

Este bloque de código se muestra en una ventana flotante

Resultado de renderizado

The truck is not allowed to pass.

              
              <p> 
The truck is not allowed to pass.
</p>

Este bloque de código se muestra en una ventana flotante

Con else

Ejemplo de plantilla

{{#greaterThan truckWeight limitWeight}} The truck is not allowed to pass. {{else}} The truck is allowed to pass. {{/greaterThan}}

              
              <p> 
{{#greaterThan truckWeight limitWeight}}
The truck is not allowed to pass.
{{else}}
The truck is allowed to pass.
{{/greaterThan}}
</p>

Este bloque de código se muestra en una ventana flotante

Datos de prueba

{ "truckWeight": 5, "limitWeight": 5 }

              
              {
    "truckWeight": 5,
    "limitWeight": 5
}

Este bloque de código se muestra en una ventana flotante

Resultado de renderizado

The truck is allowed to pass.

              
              <p> 
The truck is allowed to pass.
</p>

Este bloque de código se muestra en una ventana flotante

in, notIn

Al igual que los operadores de comparación, también admiten dos modos de uso: básico y con else.

Ejemplo de plantilla

{{#in fruit favoriteFruits}} Like to eat. {{else}} Do not like to eat. {{/in}}

              
              <p>
{{#in fruit favoriteFruits}}
Like to eat.
{{else}}
Do not like to eat.
{{/in}}
</p>

Este bloque de código se muestra en una ventana flotante

Datos de prueba

// Test Data One { "fruit": "Apple", "favoriteFruits": [ "Apple", "Banana", "Orange" ] } // Test Data二 { "fruit": "Grape", "favoriteFruits": [ "Apple", "Banana", "Orange" ] }

              
              // Test Data One
{
    "fruit": "Apple",
    "favoriteFruits": [
        "Apple",
        "Banana",
        "Orange"
    ]
}

// Test Data二
{
    "fruit": "Grape",
    "favoriteFruits": [
        "Apple",
        "Banana",
        "Orange"
    ]
}

Este bloque de código se muestra en una ventana flotante

Resultado de renderizado

Like to eat.  Do not like to eat.

              
              <!-- Rendering Result One -->
<p>
Like to eat.
</p>

<!-- Rendering Result Two -->
<p>
Do not like to eat.
</p>

Este bloque de código se muestra en una ventana flotante

Iteración

Each

Ejemplo de plantilla

<ul> {{#each fruits}} <li>{{this}}</li> {{/each}} </ul>

              
              <ul>
{{#each fruits}}
    <li>{{this}}</li>
{{/each}}
</ul>

Este bloque de código se muestra en una ventana flotante

Datos de prueba

{ "fruits": [ "Apple", "Banana", "Orange" ] }

              
              {
    "fruits": [
        "Apple",
        "Banana",
        "Orange"
    ]
}

Este bloque de código se muestra en una ventana flotante

Resultado de renderizado

<ul> <li>Apple</li> <li>Banana</li> <li>Orange</li> </ul>

              
              <ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Orange</li>
</ul>

Este bloque de código se muestra en una ventana flotante

Explicación complementaria

Al utilizar each para iterar sobre un array (matriz), se puede usar {{@index}} para referenciar el índice actual del bucle.

{{#each array}} {{@index}}: {{this}} {{/each}}

              
              {{#each array}} {{@index}}: {{this}} {{/each}}

Este bloque de código se muestra en una ventana flotante

Además, para la iteración de objetos, se utiliza {{@key}} para referenciar el nombre de la clave actual.

{{#each object}} {{@key}}: {{this}} {{/each}}

              
              {{#each object}} {{@key}}: {{this}} {{/each}}

Este bloque de código se muestra en una ventana flotante

With

Ejemplo de plantilla

{{#with user.profile}} Hello {{firstName}} {{/with}}

              
              {{#with user.profile}}
<p>Hello {{firstName}}</p>
{{/with}}

Este bloque de código se muestra en una ventana flotante

Datos de prueba

{ "user": { "profile": { "firstName": "Engagelab" } } }

              
              {
    "user": {
        "profile": {
            "firstName": "Engagelab" 
        }
    }
}

Este bloque de código se muestra en una ventana flotante

Resultado de renderizado

Hello Engagelab

              
              <p>Hello Engagelab</p>

Este bloque de código se muestra en una ventana flotante

Plantillas dinámicas

Sustitución de variables

Sustitución básica

Sustitución de objetos anidados

formatDate

Insert

Instrucciones condicionales

If, Else, Else If

Unless

Operadores de comparación

Básico

Con else

in, notIn

Iteración

Each

Explicación complementaria

With