Integración con Klaviyo
Esta guía te lleva paso a paso por la construcción de un flow de email Klaviyo que se dispara cuando un cliente termina un diagnóstico Dialog y le envía recomendaciones de producto personalizadas por email. Para los eventos Personal Shopper más recientes, salta a Usuarios de Personal Shopper.
Prerrequisitos
Sección titulada «Prerrequisitos»- Tu API key de Klaviyo debe estar configurada en Dialog (contacta a Dialog si no lo está).
- Debes haber recibido al menos un evento de diagnóstico desde Dialog después de que la API key de Klaviyo fuera configurada. Esto crea la métrica
dialog_diagnosticen Klaviyo.
Pasos de setup
Sección titulada «Pasos de setup»1. Acceder a Flows
Sección titulada «1. Acceder a Flows»En tu dashboard de Klaviyo, haz clic en Flows en la sidebar izquierda.
2. Crear un flow nuevo
Sección titulada «2. Crear un flow nuevo»Haz clic en Create Flow (arriba a la derecha).
3. Empezar de cero
Sección titulada «3. Empezar de cero»Selecciona Build your own.
4. Nombrar tu flow
Sección titulada «4. Nombrar tu flow»Usa: Default diagnostic email.
5. Configurar el trigger
Sección titulada «5. Configurar el trigger»- Haz clic en el bloque Trigger.
- En el panel de la derecha, selecciona Your metrics.
- Haz clic en API.
- Selecciona dialog_diagnostic.
- Haz clic en Save.
6. Añadir un bloque email
Sección titulada «6. Añadir un bloque email»Arrastra un bloque Email desde el panel de la izquierda y conéctalo al trigger.
7. Configurar el bloque email
Sección titulada «7. Configurar el bloque email»Haz clic en el bloque Email y rellena:
- Email name: nombre de referencia interno.
- Subject line: lo que los destinatarios verán.
8. Crear un template HTML custom
Sección titulada «8. Crear un template HTML custom»- En la sección Template, haz clic en el botón ⋮ (tres puntos).
- Selecciona Create custom HTML email.
9. Pegar el template
Sección titulada «9. Pegar el template»Copia y pega el template HTML de Dialog (ver Opciones de template abajo) en el editor.
10. Customizar el template
Sección titulada «10. Customizar el template»Reemplaza estos placeholders con tus valores reales:
| Placeholder | Reemplazar por |
|---|---|
REPLACE_ME_BY_ORGANIZATION_LOGO_URL |
La URL de tu logo |
REPLACE_ME_BY_ORGANIZATION_BANNER_URL |
La URL de tu banner |
REPLACE_ME_BY_YOUR_STORE_DOMAIN |
El dominio de tu tienda |
Opcional:
- Añade tu footer custom.
- Ajusta el CSS (colores, background).
11. Guardar y activar
Sección titulada «11. Guardar y activar»Guarda el template, revisa el flow, y ponlo en estado Live.
Referencia de variables de template
Sección titulada «Referencia de variables de template»Dialog rellena automáticamente estas variables en el email:
| Variable | Descripción |
|---|---|
| `{{ event.diagnostic_resume | safe }}` |
{{ event.products }} |
Array de productos recomendados |
Propiedades del objeto producto:
title: nombre del productohandle: slug de URL del productoimage: URL de la imagenprice: preciocurrency: monedasentence: texto personalizado de recomendación
Opciones de template
Sección titulada «Opciones de template»Tienes dos formas de montar el email:
- Opción 1: template HTML completo: pégalo en el editor HTML custom de Klaviyo para un email completo y listo para customizar.
- Opción 2: bloque HTML: pégalo en un bloque HTML dentro de un template Klaviyo existente para que herede tu layout de marca.
Opción 1: template HTML completo
Sección titulada «Opción 1: template HTML completo»En Klaviyo, haz clic en el menú ⋮ del bloque Template y selecciona Create custom HTML email, luego pega el código de abajo.
Mostrar el template HTML completo
<div id="outer"> <div id="inner"> <div id="bodyTable" style="background-color:transparent!important"> <div> <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%"> <tbody> <tr> <td> <div style="margin:0px auto;max-width:600px"> <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%"> <tbody> <tr> <td style="direction:ltr;font-size:0px;padding:0px;text-align:center">
<!-- ========== HEADER - Logo ========== --> <div style="margin:0px auto;border-radius:0px;max-width:600px;background-color:transparent!important"> <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;border-radius:0px;background-color:transparent!important"> <tbody> <tr> <td style="direction:ltr;font-size:0px;padding:0px;text-align:center"> <div style="display:table;table-layout:fixed;width:100%"> <div style="display:table-cell;vertical-align:middle;width:100%">
<!-- Logo --> <div style="font-size:0px;text-align:center;width:100%;padding:20px;"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%" width="100%"> <tbody> <tr> <td style="vertical-align:top;padding:5px 18px"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"> <tbody> <tr> <td align="center"> <img alt="Organization logo" src="REPLACE_ME_BY_ORGANIZATION_LOGO_URL" style="display:block;outline:none;text-decoration:none;height:auto;width:150px" width="150"> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div>
<!-- Banner Image --> <div style="font-size:0px;text-align:center;width:100%"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%" width="100%"> <tbody> <tr> <td style="vertical-align:top;padding:0px"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"> <tbody> <tr> <td align="center" style="font-size:0px;word-break:break-word"> <img alt="Organization banner" src="REPLACE_ME_BY_ORGANIZATION_BANNER_URL" style="display:block;outline:none;text-decoration:none;height:auto;font-size:13px;width:100%" width="600"> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div>
<!-- ========== DIAGNOSTIC RESUME ========== --> <div style="font-size:0px;text-align:center;width:100%"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%" width="100%"> <tbody> <tr> <td style="vertical-align:top;padding:30px 50px 20px 50px"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"> <tbody> <tr> <td align="center" style="font-size:0px;padding:0px;word-break:break-word"> <div style="font-family:Helvetica,Arial,sans-serif;font-size:16px;font-style:normal;font-weight:400;letter-spacing:0px;line-height:1.5;text-align:center;color:#000000"> {{ event.diagnostic_resume|safe }} </div> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div>
<!-- Section Title --> <div style="font-size:0px;text-align:center;width:100%"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%" width="100%"> <tbody> <tr> <td style="vertical-align:top;padding:9px 18px"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"> <tbody> <tr> <td align="center" style="font-size:0px;padding:0px;word-break:break-word"> <div style="font-family:Helvetica,Arial,sans-serif;font-size:26px;font-style:normal;font-weight:700;letter-spacing:0px;line-height:1.3;text-align:center;color:#000000"> La routine adaptée à vos besoins </div> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div>
</div> </div> </td> </tr> </tbody> </table> </div>
<!-- ========== DIVIDER ========== --> <div style="margin:0px auto;max-width:600px"> <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%"> <tbody> <tr> <td style="padding:8px 40px"> <p style="border-top:solid 1px #000000;font-size:1px;margin:0 auto;width:100%"></p> </td> </tr> </tbody> </table> </div>
<!-- ========== PRODUCTS LIST ========== --> {% for product in event.products %} <div style="margin:0px auto;max-width:600px"> <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%"> <tbody> <tr> <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center">
<!-- Product Title --> <div style="font-size:0px;text-align:center;width:100%"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%" width="100%"> <tbody> <tr> <td style="vertical-align:top;padding:9px 18px"> <div style="font-family:Helvetica,Arial,sans-serif;font-size:18px;font-style:normal;font-weight:700;letter-spacing:0px;line-height:1.3;text-align:center;color:#000000"> {{ product.title }} </div> </td> </tr> </tbody> </table> </div>
<!-- Product Image --> <div style="font-size:0px;text-align:center;width:100%"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%" width="100%"> <tbody> <tr> <td style="vertical-align:top;padding:10px 50px"> <a href="https://REPLACE_ME_BY_YOUR_STORE_DOMAIN/products/{{ product.handle }}" target="_blank" style="display:block"> <img alt="{{ product.title }}" src="{{ product.image }}" style="display:block;outline:none;text-decoration:none;height:auto;font-size:13px;width:100%;max-width:300px;margin:0 auto" width="300"> </a> </td> </tr> </tbody> </table> </div>
<!-- Product Sentence --> {% if product.sentence %} <div style="font-size:0px;text-align:center;width:100%"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%" width="100%"> <tbody> <tr> <td style="vertical-align:top;padding:10px 40px 5px"> <div style="font-family:Helvetica,Arial,sans-serif;font-size:14px;font-style:italic;font-weight:400;line-height:1.4;text-align:center;color:#666666"> {{ product.sentence }} </div> </td> </tr> </tbody> </table> </div> {% endif %}
<!-- Product Price --> <div style="font-size:0px;text-align:center;width:100%"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%" width="100%"> <tbody> <tr> <td style="vertical-align:top;padding:5px 18px"> <div style="font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;text-align:center;color:#000000"> {{ product.price }} {{ product.currency }} </div> </td> </tr> </tbody> </table> </div>
<!-- CTA Button --> <div style="font-size:0px;text-align:center;width:100%"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%" width="100%"> <tbody> <tr> <td style="vertical-align:top;padding:15px 18px 10px"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" align="center"> <tbody> <tr> <td align="center" bgcolor="#000000" role="presentation" style="border:none;border-radius:30px;background:#000000" valign="middle"> <a href="https://REPLACE_ME_BY_YOUR_STORE_DOMAIN/products/{{ product.handle }}" target="_blank" style="color:#FAF9F9;text-decoration:none;display:inline-block;background:#EBA38F;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:700;line-height:100%;letter-spacing:0px;margin:0px;text-transform:none;padding:15px 30px;border-radius:30px"> Voir le produit </a> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div>
</td> </tr> </tbody> </table>
<!-- Divider between products --> <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%"> <tbody> <tr> <td style="padding:8px 40px"> <p style="border-top:solid 1px #000000;font-size:1px;margin:0 auto;width:100%"></p> </td> </tr> </tbody> </table> </div>
{% endfor %}
<!-- ========== SPACER ========== --> <div style="height:50px;line-height:50px"> </div>
</td> </tr> </tbody> </table> </div> </td> </tr> </tbody> </table> </div> </div> </div> </div>Opción 2: bloque HTML en un template existente
Sección titulada «Opción 2: bloque HTML en un template existente»Si ya tienes un template Klaviyo con tu layout de marca, añade un bloque HTML y pega el snippet de abajo. Solo se renderiza la sección de resultados Personal Shopper, el resto de tu template queda intacto.
Mostrar el snippet del bloque HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html> <head> <title>Dialog default email Diagnostic</title> <style type="text/css"> body { background: #eee; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; } #outer { width: 95%; min-width: 320px; max-width: 600px; margin: 20px auto; background: #f9f9f9; position: relative; } #inner { padding: 20px; font-size: 14px; line-height: 19px; } p { margin: 0 0 9px; } </style> </head> <body> <div id="outer"> <div id="inner"> <div id="bodyTable" style="background-color:transparent!important"> <div> <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%"> <tbody> <tr> <td> <div style="margin:0px auto;max-width:600px"> <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%"> <tbody> <tr> <td style="direction:ltr;font-size:0px;padding:0px;text-align:center">
<!-- ========== HEADER - Logo ========== --> <div style="margin:0px auto;border-radius:0px;max-width:600px;background-color:transparent!important"> <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;border-radius:0px;background-color:transparent!important"> <tbody> <tr> <td style="direction:ltr;font-size:0px;padding:0px;text-align:center"> <div style="display:table;table-layout:fixed;width:100%"> <div style="display:table-cell;vertical-align:middle;width:100%">
<!-- Logo --> <div style="font-size:0px;text-align:center;width:100%;padding:20px;"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%" width="100%"> <tbody> <tr> <td style="vertical-align:top;padding:5px 18px"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"> <tbody> <tr> <td align="center"> <img alt="Organization logo" src="REPLACE_ME_BY_ORGANIZATION_LOGO_URL" style="display:block;outline:none;text-decoration:none;height:auto;width:150px" width="150"> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div>
<!-- Banner Image --> <div style="font-size:0px;text-align:center;width:100%"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%" width="100%"> <tbody> <tr> <td style="vertical-align:top;padding:0px"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"> <tbody> <tr> <td align="center" style="font-size:0px;word-break:break-word"> <img alt="Organization banner" src="REPLACE_ME_BY_ORGANIZATION_BANNER_URL" style="display:block;outline:none;text-decoration:none;height:auto;font-size:13px;width:100%" width="600"> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div>
<!-- ========== DIAGNOSTIC RESUME ========== --> <div style="font-size:0px;text-align:center;width:100%"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%" width="100%"> <tbody> <tr> <td style="vertical-align:top;padding:30px 50px 20px 50px"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"> <tbody> <tr> <td align="center" style="font-size:0px;padding:0px;word-break:break-word"> <div style="font-family:Helvetica,Arial,sans-serif;font-size:16px;font-style:normal;font-weight:400;letter-spacing:0px;line-height:1.5;text-align:center;color:#000000"> {{ event.diagnostic_resume|safe }} </div> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div>
<!-- Section Title --> <div style="font-size:0px;text-align:center;width:100%"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%" width="100%"> <tbody> <tr> <td style="vertical-align:top;padding:9px 18px"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"> <tbody> <tr> <td align="center" style="font-size:0px;padding:0px;word-break:break-word"> <div style="font-family:Helvetica,Arial,sans-serif;font-size:26px;font-style:normal;font-weight:700;letter-spacing:0px;line-height:1.3;text-align:center;color:#000000"> La routine adaptée à vos besoins </div> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div>
</div> </div> </td> </tr> </tbody> </table> </div>
<!-- ========== DIVIDER ========== --> <div style="margin:0px auto;max-width:600px"> <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%"> <tbody> <tr> <td style="padding:8px 40px"> <p style="border-top:solid 1px #000000;font-size:1px;margin:0 auto;width:100%"></p> </td> </tr> </tbody> </table> </div>
<!-- ========== PRODUCTS LIST ========== --> {% for product in event.products %} <div style="margin:0px auto;max-width:600px"> <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%"> <tbody> <tr> <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center">
<!-- Product Title --> <div style="font-size:0px;text-align:center;width:100%"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%" width="100%"> <tbody> <tr> <td style="vertical-align:top;padding:9px 18px"> <div style="font-family:Helvetica,Arial,sans-serif;font-size:18px;font-style:normal;font-weight:700;letter-spacing:0px;line-height:1.3;text-align:center;color:#000000"> {{ product.title }} </div> </td> </tr> </tbody> </table> </div>
<!-- Product Image --> <div style="font-size:0px;text-align:center;width:100%"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%" width="100%"> <tbody> <tr> <td style="vertical-align:top;padding:10px 50px"> <a href="https://REPLACE_ME_BY_YOUR_STORE_DOMAIN/products/{{ product.handle }}" target="_blank" style="display:block"> <img alt="{{ product.title }}" src="{{ product.image }}" style="display:block;outline:none;text-decoration:none;height:auto;font-size:13px;width:100%;max-width:300px;margin:0 auto" width="300"> </a> </td> </tr> </tbody> </table> </div>
<!-- Product Sentence --> {% if product.sentence %} <div style="font-size:0px;text-align:center;width:100%"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%" width="100%"> <tbody> <tr> <td style="vertical-align:top;padding:10px 40px 5px"> <div style="font-family:Helvetica,Arial,sans-serif;font-size:14px;font-style:italic;font-weight:400;line-height:1.4;text-align:center;color:#666666"> {{ product.sentence }} </div> </td> </tr> </tbody> </table> </div> {% endif %}
<!-- Product Price --> <div style="font-size:0px;text-align:center;width:100%"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%" width="100%"> <tbody> <tr> <td style="vertical-align:top;padding:5px 18px"> <div style="font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;text-align:center;color:#000000"> {{ product.price }} {{ product.currency }} </div> </td> </tr> </tbody> </table> </div>
<!-- CTA Button --> <div style="font-size:0px;text-align:center;width:100%"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%" width="100%"> <tbody> <tr> <td style="vertical-align:top;padding:15px 18px 10px"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" align="center"> <tbody> <tr> <td align="center" bgcolor="#000000" role="presentation" style="border:none;border-radius:30px;background:#000000" valign="middle"> <a href="https://REPLACE_ME_BY_YOUR_STORE_DOMAIN/products/{{ product.handle }}" target="_blank" style="color:#FAF9F9;text-decoration:none;display:inline-block;background:#EBA38F;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:700;line-height:100%;letter-spacing:0px;margin:0px;text-transform:none;padding:15px 30px;border-radius:30px"> Voir le produit </a> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div>
</td> </tr> </tbody> </table>
<!-- Divider between products --> <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%"> <tbody> <tr> <td style="padding:8px 40px"> <p style="border-top:solid 1px #000000;font-size:1px;margin:0 auto;width:100%"></p> </td> </tr> </tbody> </table> </div>
{% endfor %}
<!-- ========== SPACER ========== --> <div style="height:50px;line-height:50px"> </div>
</td> </tr> </tbody> </table> </div> </td> </tr> </tbody> </table> </div> </div> </div> </div> </body></html>Usuarios de Personal Shopper
Sección titulada «Usuarios de Personal Shopper»Si activaste Personal Shopper, la configuración Klaviyo vive en la sección Personal Shopper misma, junto a los CRM tags y los eventos que Dialog envía tras la completion. El flow diagnostic legacy de esta página queda independiente y disponible.
¿Necesitas ayuda?
Sección titulada «¿Necesitas ayuda?»Escribe a paul@askdialog.com si el flow no se dispara, si la métrica dialog_diagnostic no aparece, o si quieres una mano para customizar el template.
