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