Intégration Klaviyo
Ce guide t’aide à créer un flow Klaviyo qui se déclenche quand un client termine un diagnostic Dialog et lui envoie des recommandations produit personnalisées par email. Pour les events Personal Shopper plus récents, saute à Flows Personal Shopper.
Prérequis
Section intitulée « Prérequis »- Ta clé API Klaviyo doit être configurée dans Dialog (contacte Dialog si ce n’est pas le cas).
- Tu dois avoir reçu au moins un event diagnostic depuis Dialog après que la clé API Klaviyo a été configurée. Ça crée la métrique
dialog_diagnosticdans Klaviyo.
Étapes de setup
Section intitulée « Étapes de setup »1. Accéder à Flows
Section intitulée « 1. Accéder à Flows »Dans le dashboard Klaviyo, clique sur Flows dans la sidebar de gauche.
2. Créer un nouveau flow
Section intitulée « 2. Créer un nouveau flow »Clique sur Create Flow (en haut à droite).
3. Partir de zéro
Section intitulée « 3. Partir de zéro »Sélectionne Build your own.
4. Nommer ton flow
Section intitulée « 4. Nommer ton flow »Utilise : Default diagnostic email.
5. Configurer le trigger
Section intitulée « 5. Configurer le trigger »- Clique sur le bloc Trigger.
- Dans le panel de droite, sélectionne Your metrics.
- Clique sur API.
- Sélectionne dialog_diagnostic.
- Clique sur Save.
6. Ajouter un bloc email
Section intitulée « 6. Ajouter un bloc email »Drag un bloc Email depuis le panel de gauche et connecte-le au trigger.
7. Configurer le bloc email
Section intitulée « 7. Configurer le bloc email »Clique sur le bloc Email et remplis :
- Email name — nom de référence interne.
- Subject line — ce que les destinataires vont voir.
8. Créer un template HTML custom
Section intitulée « 8. Créer un template HTML custom »- Dans la section Template, clique sur le bouton ⋮ (trois points).
- Sélectionne Create custom HTML email.
9. Coller le template
Section intitulée « 9. Coller le template »Copie et colle le template HTML Dialog (voir Options de template plus bas) dans l’éditeur.
10. Customiser le template
Section intitulée « 10. Customiser le template »Remplace ces placeholders par tes vraies valeurs :
| Placeholder | À remplacer par |
|---|---|
REPLACE_ME_BY_ORGANIZATION_LOGO_URL | L’URL de ton logo |
REPLACE_ME_BY_ORGANIZATION_BANNER_URL | L’URL de ta bannière |
REPLACE_ME_BY_YOUR_STORE_DOMAIN | Le domaine de ta boutique |
Optionnel :
- Ajoute ton footer custom.
- Tweake le CSS (couleurs, background).
11. Sauvegarder et activer
Section intitulée « 11. Sauvegarder et activer »Save le template, review le flow, et mets le statut sur Live.
Référence des variables de template
Section intitulée « Référence des variables de template »Dialog auto-remplit ces variables dans l’email :
| Variable | Description |
|---|---|
| `{{ event.diagnostic_resume | safe }}` |
{{ event.products }} | Array des produits recommandés |
Propriétés de l’objet produit :
title— nom du produithandle— slug d’URL du produitimage— URL de l’imageprice— prixcurrency— devisesentence— texte personnalisé de recommandation
Options de template
Section intitulée « Options de template »Tu as deux façons de monter l’email :
- Option 1 : template HTML complet — à coller dans l’éditeur HTML custom de Klaviyo pour un email complet et prêt à customiser.
- Option 2 : bloc HTML — à coller dans un bloc HTML d’un template Klaviyo existant pour qu’il hérite de ton layout de marque.
Option 1 : template HTML complet
Section intitulée « Option 1 : template HTML complet »Dans Klaviyo, clique sur le menu ⋮ du bloc Template et sélectionne Create custom HTML email, puis colle le code ci-dessous.
Afficher le template HTML complet
<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>Option 2 : bloc HTML dans un template existant
Section intitulée « Option 2 : bloc HTML dans un template existant »Si tu as déjà un template Klaviyo avec ton layout de marque, ajoute un bloc HTML et colle le snippet ci-dessous. Seule la section résultats Personal Shopper est rendue — le reste de ton template reste intact.
Afficher le snippet de bloc 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>Utilisateurs Personal Shopper
Section intitulée « Utilisateurs Personal Shopper »Si tu as activé Personal Shopper, la config Klaviyo vit dans la section Personal Shopper elle-même, à côté des CRM tags et des events Dialog après completion. Le flow diagnostic legacy de cette page reste indépendant et dispo.
Besoin d’aide ?
Section intitulée « Besoin d’aide ? »Écris à paul@askdialog.com si le flow ne se déclenche pas, si la métrique dialog_diagnostic n’apparaît pas, ou si tu veux un coup de main pour customiser le template.
