Klaviyo integration
This guide walks you through building a Klaviyo email flow that fires when a customer completes a Dialog diagnostic, sending them personalized product recommendations by email. For the newer Personal Shopper events, jump to Personal Shopper flows.
Prerequisites
Section titled “Prerequisites”- Your Klaviyo API key must be configured in Dialog (contact Dialog if it isn’t).
- You must have received at least one diagnostic event from Dialog after the Klaviyo API key was configured. This creates the
dialog_diagnosticmetric in Klaviyo.
Setup steps
Section titled “Setup steps”1. Access Flows
Section titled “1. Access Flows”In your Klaviyo dashboard, click Flows in the left sidebar.
2. Create a new flow
Section titled “2. Create a new flow”Click Create Flow (top right).
3. Start from scratch
Section titled “3. Start from scratch”Select Build your own.
4. Name your flow
Section titled “4. Name your flow”Use: Default diagnostic email.
5. Configure the trigger
Section titled “5. Configure the trigger”- Click the Trigger block.
- In the right panel, select Your metrics.
- Click API.
- Select dialog_diagnostic.
- Click Save.
6. Add an email block
Section titled “6. Add an email block”Drag an Email block from the left panel and connect it to the trigger.
7. Configure email settings
Section titled “7. Configure email settings”Click the Email block and fill in:
- Email name — internal reference name.
- Subject line — what recipients will see.
8. Create a custom HTML template
Section titled “8. Create a custom HTML template”- In the Template section, click the ⋮ (three dots) button.
- Select Create custom HTML email.
9. Paste the template
Section titled “9. Paste the template”Copy and paste the Dialog HTML template (see Template options below) into the editor.
10. Customize the template
Section titled “10. Customize the template”Replace these placeholders with your actual values:
| Placeholder | Replace with |
|---|---|
REPLACE_ME_BY_ORGANIZATION_LOGO_URL | Your logo image URL |
REPLACE_ME_BY_ORGANIZATION_BANNER_URL | Your banner image URL |
REPLACE_ME_BY_YOUR_STORE_DOMAIN | Your store domain |
Optional:
- Add your custom footer.
- Tweak the CSS (colors, background).
11. Save and activate
Section titled “11. Save and activate”Save the template, review the flow, and set its status to Live.
Template variables reference
Section titled “Template variables reference”Dialog auto-populates these variables in the email:
| Variable | Description |
|---|---|
| `{{ event.diagnostic_resume | safe }}` |
{{ event.products }} | Array of recommended products |
Product object properties:
title— product namehandle— product URL slugimage— product image URLprice— product pricecurrency— price currencysentence— personalized recommendation text
Template options
Section titled “Template options”You have two ways to set up the email:
- Option 1: Full HTML template — paste into Klaviyo’s custom HTML editor for a complete, ready-to-customize email.
- Option 2: HTML block — drop into an HTML block inside an existing Klaviyo template so it inherits your brand layout.
Option 1: Full HTML template
Section titled “Option 1: Full HTML template”In Klaviyo, click the ⋮ menu on the Template block and select Create custom HTML email, then paste the code below.
Show the full HTML template
<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: HTML block in an existing template
Section titled “Option 2: HTML block in an existing template”If you already have a Klaviyo template with your brand layout, add an HTML block and paste the snippet below. Only the Personal Shopper results section is rendered — the rest of your template stays untouched.
Show the HTML block snippet
<!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>Personal Shopper users
Section titled “Personal Shopper users”If you’ve activated Personal Shopper, Klaviyo configuration lives in the Personal Shopper section itself, alongside CRM tags and the events Dialog sends after completion. The legacy diagnostic flow on this page is independent and stays available.
Need help?
Section titled “Need help?”Email paul@askdialog.com if the flow doesn’t trigger, the dialog_diagnostic metric isn’t showing up, or you want a hand customizing the template.
