Cómo añadir códigos de barras a tus mensajes

Qué aprenderás

Descubre cómo usar la etiqueta {% barcode %} para generar códigos de barras Code 128 en tus mensajes de email, MMS, RCS y WhatsApp. El valor del código de barras puede ser una cadena estática, una propiedad de perfil, una variable de evento o un código de cupón de Klaviyo.

Referencia rápida

Antes de empezar

El {% barcode %} La etiqueta funciona al generar una URL. Cuando se carga esa URL (en una vista previa, una bandeja de entrada o un dispositivo móvil), se muestra una imagen PNG del código de barras. Esto significa que la imagen del código de barras no se creará hasta que se obtenga la URL.

El {% barcode %} La etiqueta se admite en:

• Email
• MMS
• RCS
• WhatsApp

Uso básico

La forma más sencilla de usar la etiqueta de código de barras es:

{% barcode 'MyCode' %}

Esto produce una URL que devuelve una imagen PNG de un código de barras. Cuando se escanea, el código de barras contiene el valor MyCode.

Puedes personalizar el código de barras pasando argumentos a la etiqueta. Por ejemplo:

{% barcode 'MyCode' width=200 height=100 %}

Consulta la sección de referencia de argumentos a continuación para ver todas las opciones disponibles.

Usar códigos de barras con diferentes canales

Email

En el caso del correo electrónico, tienes dos opciones para mostrar el código de barras:

Opción 1: Modo HTML (recomendado para correo electrónico)

Establecer mode=html para que la etiqueta genere un HTML <img> directamente. Este es el método más sencillo para incluir un código de barras en un correo electrónico.

{% barcode 'MyCode' mode=html %}

Coloca esta etiqueta en un bloque de texto o HTML en el editor de plantillas de correo electrónico.

Opción 2: Modo URL

Deja el modo desactivado (o configurado) mode=url) para obtener una URL, a continuación, coloque esa URL en el campo URL de la imagen de un bloque de imagen. Esto te da más control sobre el estilo de la imagen.

{% barcode 'MyCode' %}

MMS

En el caso de los mensajes MMS, añade la etiqueta de código de barras en la sección Imagen dinámica del editor SMS/MMS, no en el cuerpo del texto.

1. Abre tu mensaje MMS en el editor.
2. Haz clic en el icono Añadir imagen en el cuadro de mensaje.
3. Ve a la pestaña Imagen dinámica.
4. Pega tu etiqueta de código de barras, por ejemplo:

{% barcode person.LoyaltyId %}

1. Pulsa Guardar.

Esto sigue el mismo proceso que añadir cualquier imagen dinámica a un MMS. Para obtener más información, consulta Cómo añadir una imagen dinámica a un mensaje de mensajería de texto.

RCS

Para los mensajes RCS, utilice mode=rcs para formatear el código de barras según los requisitos de imagen RCS. Este modo establece automáticamente las dimensiones que se muestran correctamente tanto en Android como en iOS.

{% barcode 'MyCode' mode=rcs %}

Añade la etiqueta de código de barras en la sección Imagen dinámica del editor de mensajes de RCS, de la misma manera que lo harías para MMS.

Valores predeterminados de RCS:

• Ancho: 600 px
• Altura: 300 px
• Añadido a: 1440x720px

Estos valores predeterminados siguen las recomendaciones de formato de imagen RCS de Klaviyo. Puedes anularlos con opciones personalizadas width, height, padded_widthy padded_height si es necesario.

WhatsApp

Para los mensajes de WhatsApp, añade la etiqueta de código de barras en la sección Imagen dinámica del editor de mensajes, de la misma manera que lo harías para MMS.

{% barcode person.MembershipId %}

No se necesita ninguna configuración o modo especial para WhatsApp. Valor predeterminado mode=url funciona correctamente.

Referencia de argumentos de etiquetas de código de barras

Usar códigos de barras con propiedades de perfil y datos de eventos

Puedes utilizar propiedades de perfil o variables de eventos como valor de código de barras, para que cada destinatario reciba un código de barras único.

Ejemplos de propiedades de perfil:

{% barcode person.LoyaltyId %}
{% barcode person.email %}
{% barcode person.MembershipNumber %}

Ejemplos de variables de eventos (para flujos activados por métricas):

{% barcode event.Code %}
{% barcode event.OrderId %}

Gestionar los valores que faltan:

Si un destinatario no tiene establecida la propiedad, la URL del código de barras no será válida y la imagen no se cargará. Tienes dos opciones:

Opción 1: Usar un default Filtra para establecer un valor alternativo significativo:

{% barcode person.BarcodeCode|default:'STORE-MEMBER' %}

Asegúrate de que el valor predeterminado sea un valor que tenga sentido si se analiza. Un marcador de posición genérico como «alternativo» produciría un código de barras escaneable pero inútil.

Opción 2: Usa una declaración condicional para ocultar el código de barras por completo cuando falte el valor:

{% if person.BarcodeCode %}
  {% barcode person.BarcodeCode mode=html %}
{% endif %}

Ejemplo combinado de correo electrónico:

{% barcode person.LoyaltyId width=200 height=75 mode=html %}

Usar códigos de barras con códigos de cupón de Klaviyo

Si utilizas códigos de cupón gestionados por Klaviyo y quieres mostrarlos como códigos de barras, configura coupon=True. Esto indica al sistema que asigne un código de cupón al destinatario y lo use como valor de código de barras.

{% barcode 'ShopifyCoupon' coupon=True %}

Esto funciona en todos los canales. Por ejemplo, para enviar un código de barras de cupón a través de RCS:

{% barcode 'ShopifyCoupon' coupon=True mode=rcs %}

{% barcode person.CouponCode %}

Escala y tamaño

De forma predeterminada, el ancho y el alto del código de barras se escalan por un factor de 3 veces. Esto significa que:

• A width de 100 renderizados con un ancho real de 300 px
• A height de 50 renderizados a 150 px de altura real

Excepción: cuando mode=rcsPor lo tanto, el factor de escala es 1 veces. Esto permite un control más preciso sobre las dimensiones del código de barras para adaptarse a los requisitos de formato de imagen RCS.

Los valores de relleno no se escalan. El padded_width y padded_height Los argumentos siempre representan valores reales de píxeles. Debido a que el código de barras interno se escala 3 veces, tus valores de relleno deben ser mayores de 3 veces el ancho y la altura. Por ejemplo:

{% barcode 'Code' width=200 height=100 padded_width=700 padded_height=400 %}

Aquí, el código de barras se renderiza a 600x300px (200×3, 100×3) dentro de un lienzo acolchado de 700x400px.

Tamaño máximo de la imagen: el servicio de código de barras no generará imágenes de más de 4096 x 4096 píxeles. Este límite se aplica al tamaño renderizado después de la escala. Para los códigos de barras que no son RCS (escala x3), significa el máximo width El argumento es aproximadamente 1365 (1365 × 3 = 4095px). Para los códigos de barras RCS (escala 1x), el máximo es 4096.

Directrices de ancho para códigos largos:

• Para códigos de barras que no sean de RCS: si tu código excede los 15 caracteres, aumenta el ancho más allá del predeterminado de 100 (que se renderiza a 300px).
• Para códigos de barras RCS: si tu código excede los 30 caracteres, aumenta el ancho más allá del predeterminado de 600px.

Si el ancho es demasiado estrecho para codificar los datos, la imagen del código de barras no se generará.

Solución de problemas

Previsualizar siempre antes del envío

Porque el {% barcode %} La etiqueta produce una URL en el momento del renderizado y la imagen no se genera hasta que se recupera esa URL, los errores pueden no ser evidentes hasta que previsualices o envíes el mensaje. Sigue estos pasos para detectar problemas a tiempo:

1. Previsualiza el mensaje. Si el código de barras no se carga en la vista previa, no se cargará cuando se envíe.
2. Escanea el código de barras. Usa una herramienta de escaneo de códigos de barras (como imagetotext.info/barcode-scanner) para verificar que el código de barras codifica el valor esperado.
3. Envíate un mensaje de prueba antes de enviarlo a tu audiencia.

Problemas comunes

La imagen del código de barras no se carga

La causa más común es un valor de código de barras vacío. Esto ocurre cuando la etiqueta hace referencia a una propiedad de perfil o variable de evento que el destinatario no tiene. Por ejemplo:

{% barcode person.BarcodeCode %}

Si el destinatario no tiene BarcodeCode Como valor, a la URL generada le faltará el código y la imagen no se mostrará. Para solucionarlo, añade un default filtro:

{% barcode person.BarcodeCode|default:'defaultCode' %}

No se puede generar la imagen del código de barras, pero la URL parece correcta

Es probable que el ancho del código de barras sea demasiado estrecho para codificar todos los datos de tu código. Intenta aumentar el width valor. Como regla general:

• Los códigos de más de 15 caracteres necesitan un ancho mayor que los 100 predeterminados (300 px renderizados).
• Los códigos RCS de más de 30 caracteres necesitan un ancho superior al predeterminado de 600 px.

El código de barras no aparece en un bloque de texto (correo electrónico).

Comprueba si el bloque de texto tiene aplicada la lógica de mostrar u ocultar. Si una condición oculta el bloque, el código de barras no se mostrará aunque la etiqueta sea correcta. Abre la configuración del bloque para verificarlo.

Recursos adicionales

• Primeros pasos con los códigos de cupón en Klaviyo: descubre cómo crear y gestionar códigos de cupón, incluido cómo usar la etiqueta {% barcode_code %} anterior para los códigos de barras de cupón en email.
• Cómo añadir una imagen dinámica a un mensaje de texto: aprende a añadir imágenes dinámicas a mensajes MMS, incluido dónde encontrar la sección Imagen dinámica en el editor.
• Referencia de personalización de mensajes (referencia de todas las etiquetas de personalización disponibles en Klaviyo, incluidas las propiedades de perfil, las variables de evento y los filtros).
• Comprender las prácticas recomendadas para imágenes MMS y GIF: prácticas recomendadas para el tamaño y el formato de las imágenes en los mensajes MMS.