# Uso de plantillas Liquid

Las plantillas Liquid amplían significativamente las capacidades de personalización de Pushwoosh al implementar una lógica sofisticada además del uso regular del [Contenido dinámico](/es/developer/guides/personalization/dynamic-content/).

La personalización de mensajes en Pushwoosh se basa en [Tags (datos de usuario)](/es/developer/guides/audience-and-segmentation/tags/). Pushwoosh ofrece una variedad de [Tags predeterminados](/es/developer/guides/audience-and-segmentation/tags/#default-tags) y [Tags personalizados](/es/developer/guides/audience-and-segmentation/tags/#custom-tags). Usándolos, puede especificar el nombre, la ciudad, el historial de compras del usuario, etc., para enviar un mensaje más personalizado, por ejemplo: Hola `{First_name}`, gracias por pedir `{item}`.

Las plantillas Liquid añaden más lógica al contenido dinámico. Por ejemplo, si la etiqueta de suscripción de un usuario contiene "free", puede enviarle un mensaje: “Obtenga su 10% de descuento”.

Modificar el contenido del mensaje según los ID, comportamientos y preferencias de los usuarios es la forma más eficiente de aumentar la relevancia y obtener resultados más impresionantes de sus campañas de marketing.

## Sintaxis

Las plantillas de contenido basadas en [Liquid de Shopify](https://shopify.github.io/liquid/) utilizan una combinación de [**etiquetas**](/es/developer/guides/personalization/liquid-templates/#tags), [**objetos**](/es/developer/guides/personalization/liquid-templates/#objects) y [**filtros**](/es/developer/guides/personalization/liquid-templates/#filters) para cargar contenido dinámico. Las plantillas de contenido le permiten acceder a ciertas variables desde una plantilla y mostrar sus datos sin tener que saber nada sobre los datos en sí.

<Aside type="note">
Para obtener más información sobre la sintaxis, consulte la [documentación de Liquid](https://shopify.github.io/liquid/basics/introduction/).
</Aside>

### Objetos

Los `objetos` definen el contenido que se mostrará a un usuario. Los `objetos` deben estar entre llaves dobles: `{{ }}`

Por ejemplo, al personalizar un mensaje, envíe `{{Name}}` en su cuerpo para agregar los nombres de los usuarios al contenido del mensaje. El nombre del usuario (valor de la etiqueta Name) reemplazará el objeto Liquid en el mensaje que verá el usuario.

<Tabs>
  <TabItem label="Entrada">

```

Hi {{Name}}! We're glad you're back!

```

  </TabItem>

  <TabItem label="Salida">
    Hi Anna! We're glad you're back!
  </TabItem>
</Tabs>


### Etiquetas

Las `etiquetas` crean la lógica y el flujo de control para las plantillas. Los delimitadores de porcentaje de llave `{%` y `%}` y el texto que los rodea no producen ninguna salida visible cuando se renderiza la plantilla. Esto le permite asignar variables y crear condiciones o bucles sin mostrar ninguna de la lógica Liquid a un usuario.

Por ejemplo, usando la etiqueta `if`, puede variar el idioma del mensaje según el idioma que esté configurado en el dispositivo del usuario:

<Tabs>
  <TabItem label="Entrada">

```liquid
{% if Language == 'fr' %}
Salut!
{% else %}
Hello!
{% endif %}
````

  </TabItem>

  <TabItem label="Salida (fr)">
    Salut!
  </TabItem>

  <TabItem label="Salida (es)">
    Hello!
  </TabItem>
</Tabs>

### Operadores de etiquetas

<table data-header-hidden><thead><tr><th width="189.5" align="center">Operador</th><th>Descripción</th></tr></thead><tbody><tr><td align="center"><code>==</code></td><td>igual a</td></tr><tr><td align="center"><code>!=</code></td><td>no es igual a</td></tr><tr><td align="center"><code>></code></td><td>mayor que</td></tr><tr><td align="center"><code>&#x3C;</code></td><td>menor que</td></tr><tr><td align="center"><code>>=</code></td><td>mayor o igual que</td></tr><tr><td align="center"><code>&#x3C;=</code></td><td>menor o igual que</td></tr><tr><td align="center"><code>or</code></td><td>o lógico</td></tr><tr><td align="center"><code>and</code></td><td>y lógico</td></tr><tr><td align="center"><code>contains</code></td><td>comprueba la presencia de una subcadena dentro de una cadena o una matriz de cadenas</td></tr></tbody></table>

<Aside type="note">
En las etiquetas con más de un operador `and` u `or`, los operadores se comprueban en orden _de derecha a izquierda_. No puede cambiar el orden de las operaciones usando paréntesis; los paréntesis son caracteres no válidos en Liquid y evitarán que sus etiquetas funcionen.
</Aside>

### Filtros

Los `filtros` modifican la salida de un objeto o variable Liquid. Se utilizan dentro de llaves dobles `{{ }}` y en la asignación de variables, y se separan por un carácter de barra vertical `|`. Se pueden usar múltiples filtros en una salida y se aplican de izquierda a derecha.


<Tabs>
<TabItem label="Entrada">

```

{{ Name | capitalize | prepend:"Hello " }}

```

</TabItem>

<TabItem label="Salida">

Hello Anna

</TabItem>
</Tabs>

## Uso de plantillas Liquid en mensajes enviados a través de la API

Use la sintaxis de Liquid en sus solicitudes [`createMessage`](/es/developer/api-reference/messages-api/#createmessage) para implementar plantillas Liquid. Las plantillas están disponibles para el parámetro "content" de la solicitud `createMessage`, así como para cualquier otro parámetro que admita Contenido dinámico, en particular, los parámetros específicos de la plataforma "title", "subtitle" e "image".

Al usar plantillas de contenido, puede especificar los datos en sus solicitudes de API (pasando el parámetro "template\_bindings") u obtener los datos de los valores de las etiquetas almacenados en los dispositivos de los usuarios (al no usar el parámetro "template\_bindings"). De esta manera, puede crear campañas push basadas en el usuario que contengan contenido extremadamente relevante.

<Aside type="note">
Tenga en cuenta que, a diferencia del Contenido dinámico, las variables en las plantillas deben estar entre llaves dobles de la siguiente manera: `{{myVariable}}`.
</Aside>

Para definir la lógica de la plantilla usando las etiquetas con espacios en sus nombres, use la siguiente técnica:

**Ejemplo**

```
{% capture my_tag %}{{My Tag}}{% endcapture %}
{% if my_tag == 'value' %}
Content to send in this case
{% else %}
Content to send otherwise
{% endif %}
```
## Casos de uso de las plantillas Liquid

Aquí encontrará varios casos de uso en los que las plantillas Liquid son útiles.

### Push multilingüe

Las plantillas Liquid permiten especificar definitivamente en qué idioma los usuarios deben recibir sus mensajes push. Observe el ejemplo simple de la solicitud de API y el mensaje recibido según los enlaces de plantilla utilizados en la solicitud.


<Tabs>
<TabItem label="Entrada Liquid">

```

{% if Language == 'es' %}
¡Hola!
{% else %}
Hello!
{% endif %}

````

</TabItem>

<TabItem label="Solicitud de API">

```javascript
{
  "request": {
    "application": "XXXXX-XXXXX", // Pushwoosh app code
    "auth": "yxoPUlw.....IyEX4H", // API access token from Pushwoosh Control Panel
    "notifications" : [ // push message parameters
      {
       "content": "{% raw %}
{% if language == 'es' %}¡Hola!{% else %}hello!{% endif %}
{% endraw %}",
        "template_bindings": { // optional. When no template_bindings are passed in a request, Tag values from the device are used.
         "language" : "es"
        }
      }
    ]
  }
}
````

</TabItem>

<TabItem label="Salida">

**El idioma es 'es'**:
¡Hola!

**El idioma es 'en'**:
Hello!

</TabItem>
</Tabs>


### Aviso de actualización de suscripción

Anime a sus clientes a actualizar su suscripción en función de su plan actual.

<Tabs>
  <TabItem label="Entrada Liquid">

```

{% if Subscription == 'Basic' %}
    Upgrade to Silver for getting more product features and 24/7 support.
{% elsif Subscription == 'Silver' %}
    Upgrade to Gold for priority support and advanced features.
{% else %}
    Please contact your manager to renew your subscription.
{% endif %}

````

</TabItem>

<TabItem label="Solicitud de API">

```json
{
  "request": {
    "application": "XXXXX-XXXXX", // Pushwoosh app code
    "auth": "yxoPUlw.....IyEX4H", // API access token from Pushwoosh Control Panel
    "notifications" : [ // push message parameters
      {
       "content": "{% raw %}
{% if Subscription == 'Basic' %}Upgrade to Silver for getting more product features and 24/7 support.{% elsif Subscription == 'Silver' %}Upgrade to Gold for priority support and advanced features.{% else %}Please contact your manager to renew your subscription. {% endif %}
{% endraw %}",
        "template_bindings": { // optional. When no template_bindings are passed in a request, Tag values from the device are used.
         "language" : "es"
        }
      }
    ]
  }
}
````

  </TabItem>

  <TabItem label="Salida">

**Para usuarios con plan de suscripción Básico:**
Upgrade to Silver for getting more product features and 24/7 support.

**Para usuarios con plan de suscripción Silver:**
Upgrade to Gold for priority support and advanced features.

**Para usuarios con otros planes:**
Please contact your manager to renew your subscription.

  </TabItem>
</Tabs>


### Etiquetas de lista

Las plantillas de contenido son bastante útiles para manejar etiquetas de tipo Lista.

#### Tamaño variable

Uno de los posibles casos de uso es entregar contenido diferente según la cantidad de valores que contenga la etiqueta. Por ejemplo, puede ofrecer diferentes descuentos a clientes con diferentes comportamientos. Digamos que el cliente tiene algunos artículos en su WishList: ¡anímelo a comprar con el descuento más adecuado según la cantidad de productos que va a comprar!


<Tabs>
<TabItem label="Entrada Liquid">

```

{% if WishList.size >= 3 %}
Get 20% off your next purchase!
{% elsif WishList.size == 2 %}
Get a 10% discount on your next purchase!
{% else %}
Hey, take a look at new outwears!
{% endif %}

````

</TabItem>

<TabItem label="Solicitud de API">

```javascript
{
  "request": {
    "application": "XXXXX-XXXXX", // Pushwoosh app code
    "auth": "yxoPUlw.....IyEX4H", // API access token from Pushwoosh Control Panel
    "notifications" : [ // push message parameters
      {
       "content": "{% raw %}
{% if WishList.size >= 3 %}Get 20% off your next purchase!{% elsif WishList.size == 2 %}Get a 10% discount on your next purchase!{% else %}Hey, take a look at new outwears!{% endif %}
{% endraw %}",
        "template_bindings": {
         "WishList" : ["Skinny Low Ankle Jeans", "Linen Trenchcoat", "High Waisted Denim Skirt", "Strappy Tiered Maxi Dress"]
        }
      }
    ]
  }
}
````

</TabItem>

<TabItem label="Tamaño de WishList ≥ 3">

<img src="/personalization-liquid-templates-1.webp" alt="Vista previa del correo electrónico con un tamaño de lista de deseos mayor o igual a 3" width="200"/>

</TabItem>

<TabItem label="Tamaño de WishList = 2">

<img src="/personalization-liquid-templates-2.webp" alt="Vista previa del correo electrónico con un tamaño de lista de deseos igual a 2" width="200"/>

</TabItem>
</Tabs>

#### La variable contiene

Otro caso que podría necesitar cubrir es tratar con los valores de las etiquetas de lista y entregar el contenido más relevante en función de los valores que contiene la etiqueta.

<Tabs>
<TabItem label="Entrada Liquid">

```

{% if WishList contains 'Skinny Low Ankle Jeans' %}
Get 20% off products in your wishlist!
{% else %}
Hey, take a look at the brand new Skinny Low Ankle Jeans!
{% endif %}

````

</TabItem>

<TabItem label="Solicitud de API">

```javascript
{
  "request": {
    "application": "C90C0-0E786",
    "auth": "yxoPUlw.....IyEX4H", // API access token from Pushwoosh Control Panel
    "notifications" : [ // push message parameters
      {
       "content": "{% raw %}
{% if WishList contains 'Skinny Low Ankle Jeans' %}Get 20% off your next purchase!{% else %}Hey, take a look at the brand new Skinny Low Ankle Jeans!{% endif %}
{% endraw %}",
        "template_bindings": {
         "WishList" : ["Skinny Low Ankle Jeans", "Linen Trenchcoat", "High Waisted Denim Skirt", "Strappy Tiered Maxi Dress"]
        }
      }
    ]
  }
}
````

</TabItem>

<TabItem label="La variable contiene datos">

<img src="/personalization-liquid-templates-3.webp" alt="Plantilla personalizada con datos" width="200"/>

</TabItem>

<TabItem label="La variable no contiene datos">

<img src="/personalization-liquid-templates-4.webp" alt="Vista de respaldo cuando faltan datos" width="200"/>

</TabItem>
</Tabs>


### Plurales

Al usar las plantillas de contenido, puede ajustar el contenido del mensaje según el comportamiento de los usuarios. Por ejemplo, puede modificar el texto del mensaje para que contenga palabras en plural en caso de que la etiqueta de lista contenga más de un valor.


<Tabs>
<TabItem label="Entrada Liquid">

```
    Get 20% off item
{% if WishList.size > 1 %}
    s in your WishList!
{% else %}
    in your Wishlist!
{% endif %}

````

</TabItem>

<TabItem label="Solicitud de API">

```javascript
{
  "request": {
    "application": "C90C0-0E786",
    "auth": "yxoPUlw.....IyEX4H", // API access token from Pushwoosh Control Panel
    "notifications" : [ // push message parameters
      {
       "content": "Get 20% off item{% raw %}
{% if WishList.size > 1 %}s in your WishList!{% else %} in your Wishlist!{% endif %}
{% endraw %}",
        "template_bindings": { // optional. When no template_bindings are passed in a request, Tag values from the device are used.
         "WishList" : ["Skinny Low Ankle Jeans", "Linen Trenchcoat", "High Waisted Denim Skirt", "Strappy Tiered Maxi Dress"]
        }
      }
    ]
  }
}
````

</TabItem>

<TabItem label="Plural">

<img src="/personalization-liquid-templates-5.webp" alt="Ejemplo de plantilla en forma plural" width="200"/>

</TabItem>

<TabItem label="Singular">

<img src="/personalization-liquid-templates-6.webp" alt="Ejemplo de plantilla en forma singular" width="200"/>

</TabItem>
</Tabs>

### Zona horaria

La plantilla para zonas horarias convierte la fecha y la hora según la zona horaria especificada.

<Tabs>
<TabItem label="Entrada Liquid">
```
{{ MyDate | timezone: MyTimezone | date: \"%Y-%m-%d %H:%M\" }}
```
</TabItem>

<TabItem label="Solicitud de API">
```javascript title="Example"
{
  "request" : {
    "auth" : "3H9bk8w3.....Acge2RbupTB", // API access token from Pushwoosh Control Panel
    "application" : "XXXXX-XXXXX", // Pushwoosh app code
    "notifications" : [ // push message parameters
      {
        "content": "Current Date: {{ MyDate | timezone: MyTimezone | date: \"%Y-%m-%d %H:%M\" }}",
        "template_bindings": { // optional. When no template_bindings are passed in a request, Tag values from the device are used.
         "MyDate" : "2019-07-23 15:00",
         "MyTimezone" : "Asia/Dubai"
        }
      }
    ]
  }
}
```
</TabItem>
<TabItem label="Salida"> <img src="/personalization-liquid-templates-7.webp" alt="Salida de fecha personalizada en notificación push" width="200"/>
</TabItem>
</Tabs>


## Contenido conectado

El contenido conectado es una característica de las plantillas Liquid que le permite recuperar y utilizar dinámicamente datos de una fuente externa, como un servicio web, directamente en sus mensajes de correo electrónico o notificaciones push. Esta característica permite la personalización en tiempo real al obtener datos JSON de una URL especificada y guardarlos en una variable que se puede utilizar en su contenido.

#### Casos de uso clave

- **Recomendaciones de productos**: Muestre listas de productos personalizadas adaptadas a cada usuario.

- **Códigos promocionales**: Inserte códigos promocionales únicos generados por un servicio de backend.

#### Requisitos previos

* Para usar el Contenido Conectado, debe tener su propio servicio de backend que genere y proporcione los datos requeridos (por ejemplo, códigos promocionales, recomendaciones de productos) basados en **User ID, HWID o etiquetas personalizadas**. Pushwoosh luego obtiene estos datos antes de enviar un mensaje.

### Guía de implementación paso a paso


#### Paso 1. Configure el servicio de backend

El servicio de backend debe:

* Aceptar una solicitud que contenga parámetros específicos del usuario (por ejemplo, `userId`). El Contenido Conectado admite `UserID`, `HWID` o cualquier etiqueta personalizada que haya configurado en su proyecto.
* Devolver una respuesta JSON con los datos requeridos. Este contenido se puede insertar dinámicamente en los mensajes.

<Aside type="note" title="Cómo funciona">

El servicio de backend actúa como un proveedor de datos, respondiendo a las solicitudes HTTP con información específica del usuario.

1. Pushwoosh envía una solicitud a su backend, pasando identificadores específicos del usuario como parámetros de consulta.
2. Su backend procesa la solicitud y recupera los datos solicitados.
3. Su backend devuelve una respuesta JSON.
4. Antes de enviar un mensaje, Pushwoosh obtiene la respuesta JSON del servicio de backend y utiliza los valores devueltos (por ejemplo, el `code`) en el contenido del mensaje de forma dinámica.

**Ejemplo de respuesta**

```
{ "code": "SPECIALOFFERFORUSER12345" }
```
</Aside>



#### Paso 2. Cree un preset con contenido conectado en Pushwoosh

1. En el editor de contenido de [Push](/es/product/content/push-presets/) o [Email](/es/product/content/email-content/drag-and-drop-email-editor/), inserte la sintaxis de Contenido Conectado en el campo del mensaje.

**Ejemplo**

```
{% connected_content http://your-backend-url.com?userId={{ ${userid} }} :save result %}
```
**Desglose de la sintaxis**
|  |  |
| ----- | ----- |
| `connected_content` | Obtiene datos JSON de la URL de backend especificada. |
|    `http://your-backend-url.com` | El endpoint del backend que devuelve los datos requeridos en formato JSON. |
| `userId={{ ${userid} }}` | Un parámetro de consulta dinámico que pasa el ID de usuario al backend. |
| `:save result` | Almacena la respuesta JSON obtenida en la variable result para su uso en plantillas Liquid |

![Insertar la sintaxis de Contenido Conectado](/connectedcontent.webp)

**Autenticación (opcional)**

Si su servicio de backend requiere autenticación, puede incluir una clave de API o un token en la solicitud de Contenido Conectado para garantizar un acceso seguro.

```
{% connected_content http://your-backend-url.com?userId={{ ${userid} }}&auth=YOUR_API_KEY :save result %}
```

También puede enviar datos de autenticación (o cualquier otro) como encabezados HTTP utilizando el parámetro opcional `:headers`, un objeto JSON de nombres y valores de encabezado.

```
{% connected_content http://your-backend-url.com?userId={{ ${userid} }} :headers {"Authorization": "Bearer YOUR_TOKEN", "X-Api-Key": "YOUR_API_KEY"} :save result %}
```
|  |  |
| ----- | ----- |
| `:headers {...}` | Un objeto JSON de encabezados HTTP enviados con la solicitud, por ejemplo, `Authorization: Bearer <token>`. |

<Aside type="caution" title="Solo valores estáticos">
Las variables de personalización `${}` solo funcionan dentro de la URL. Los valores dentro de `:headers` son estáticos y no se interpolan.
</Aside>

**Uso de etiquetas en el contenido conectado**

Para incluir etiquetas personalizadas, insértelas como parámetros de consulta en la solicitud de **Contenido Conectado** (`{{ tag_name }}`).

```
{% connected_content http://your-backend-url.com?userId={{ ${userid} }}{{ Language }} :save result %}
```

2. A continuación, agregue el texto del mensaje incorporando los **datos recuperados**, de esta manera:

```

Hey, {{userid}}, grab your personal promo code - {{result.code}}
```

![Agregue el texto del mensaje con los **datos recuperados**](/connectedcontent-1.webp)

3. Después de finalizar el contenido del mensaje y configurar los ajustes del preset, guárdelo para reutilizarlo en las campañas.

<video src="/connectedcontent-2.webm" title="Enviar un mensaje con contenido conectado" autoplay loop muted playsinline />

#### Paso 3. Envíe un mensaje usando el preset configurado

Envíe un mensaje con este preset usando el formulario de [push único](/es/product/messaging-channels/push-notifications/send-push-notifications/one-time-push/#how-to-send-a-push-notification-using-the-one-time-push-form) o [correo electrónico](/es/product/messaging-channels/emails/send-email/#how-to-send-a-one-time-email) o [customer journey](/es/product/customer-journey/pushwoosh-journey-overview/).

<Aside type="caution" title="Importante">
Si el servicio devuelve un estado distinto de HTTP 200 OK, el correo electrónico o la notificación push no se enviará. Esto garantiza que su comunicación solo se envíe si los datos necesarios se recuperan con éxito.
</Aside>