Intégration Klaviyo
Ce guide vous 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, sautez à Utilisateurs Personal Shopper.
Prérequis
Section intitulée « Prérequis »- Votre clé API Klaviyo doit être configurée dans Dialog (contactez Dialog si ce n’est pas le cas).
- Vous devez 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, cliquez sur Flows dans la sidebar de gauche.
2. Créer un nouveau flow
Section intitulée « 2. Créer un nouveau flow »Cliquez sur Create Flow (en haut à droite).
3. Partir de zéro
Section intitulée « 3. Partir de zéro »Sélectionnez Build your own.
4. Nommer votre flow
Section intitulée « 4. Nommer votre flow »Utilisez : Default diagnostic email.
5. Configurer le trigger
Section intitulée « 5. Configurer le trigger »- Cliquez sur le bloc Trigger.
- Dans le panel de droite, sélectionnez Your metrics.
- Cliquez sur API.
- Sélectionnez dialog_diagnostic.
- Cliquez 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 connectez-le au trigger.
7. Configurer le bloc email
Section intitulée « 7. Configurer le bloc email »Cliquez sur le bloc Email et remplissez :
- 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, cliquez sur le bouton ⋮ (trois points).
- Sélectionnez Create custom HTML email.
9. Coller le template
Section intitulée « 9. Coller le template »Copiez et collez le template HTML Dialog (voir Options de template plus bas) dans l’éditeur.
10. Customiser le template
Section intitulée « 10. Customiser le template »Remplacez ces placeholders par vos vraies valeurs :
| Placeholder | À remplacer par |
|---|---|
REPLACE_ME_BY_ORGANIZATION_LOGO_URL |
L’URL de votre logo |
REPLACE_ME_BY_ORGANIZATION_BANNER_URL |
L’URL de votre bannière |
REPLACE_ME_BY_YOUR_STORE_DOMAIN |
Le domaine de votre boutique |
Optionnel :
- Ajoutez votre footer custom.
- Tweakez le CSS (couleurs, background).
11. Sauvegarder et activer
Section intitulée « 11. Sauvegarder et activer »Save le template, review le flow, et mettez 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 »Vous avez 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 votre layout de marque.
Option 1 : template HTML complet
Section intitulée « Option 1 : template HTML complet »Dans Klaviyo, cliquez sur le menu ⋮ du bloc Template et sélectionnez Create custom HTML email, puis collez 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 vous avez déjà un template Klaviyo avec votre layout de marque, ajoutez un bloc HTML et collez le snippet ci-dessous. Seule la section résultats Personal Shopper est rendue : le reste de votre 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 vous avez 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 ? »Écrivez à paul@askdialog.com si le flow ne se déclenche pas, si la métrique dialog_diagnostic n’apparaît pas, ou si vous voulez un coup de main pour customiser le template.
