Klaviyo

This guide explains how to set up a Klaviyo integration which sends a product recommendation email when a customer who has provided Dialogtrail with their email address completes a product guide.

Note: Currently, the above functionality applies to every product guide on your account and to every product recommendation, even if it’s on a intermediate step.

Webhook

Log in to the Dialogtrail dashboard, click on your profile picture and company settings. Under webhooks, create a new webhook. Select product recommendation as the trigger and email as the required user value.

Paste https://a.klaviyo.com/api/track in the request URL field, and select POST as the method. Authorization type should remain none.

Paste the following code in to the webhook body field and replace YOUR_PUBLIC_API_KEY_HERE with your Klaviyo public API key. You can find your Klaviyo public API key by going to Klaviyo, clicking on your profile picture, selecting account, settings and then API keys.

{
    "token": "YOUR_PUBLIC_API_KEY_HERE",
    "event": "dt_products",
    "customer_properties": {
        "$email": "{{user_external_email}}",
        "source": "dialogtrail"
    },
    "properties": {
        "items": {{product_ids}}
    }
}

Now, complete a product guide (on your website or in a preview) where you enter your email address and receive a product recommendation. This needs to be done on order for Klaviyo to receive at least one dt_products event.

Email template

In Klaviyo, go to Email Templates and create a new template. Design your email template however you want. Create a text block and place it where you want the product recommendation to display. Select the text block, switch to source code and replace the content with the code below. Make sure to click the source code toggle again to save your changes.

<div>
<div class="container">{% for id in event.items %} {% catalog id %}
<div class="product"><img src="{{ catalog_item.featured_image.full.src }}" />
<p>{{ catalog_item.title }}</p>
<p>{% currency_format catalog_item.metadata|lookup:"price" %}</p>
<a href="{{ catalog_item.url }}" class="btn">Buy</a></div>
{% endcatalog %} {% endfor %}</div>
<style>
  .container {
    display: grid;
    grid-template-columns: repeat(2, minmax(auto, 1fr));
    gap: 8px;
  }
  a.btn {
    background: #197bbd;
    color: white;
    padding: 4px 8px;
    border-radius: 2px;
    width: fit-content;
    margin: 0 auto;
    text-decoration: none;
  }
  .product {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    gap: 8px;
  }
  .product p {
    padding: 0;
  }
  @media only screen and (max-width: 660px) {
    .container {
      grid-template-columns: minmax(auto, 1fr);
    }
  }
</style>
</div>

Flow

Go to flows, click on create flow and then create from scratch. After naming your flow, select metric as the trigger and then dt_products as the trigger action. Click on done, connect the email action to the newly created trigger and then click on configure content. Click on select template, then my templates and the choose the email template you just created. Configure the sender name, subject and sender email address. Click on done, then review and turn on to enable the flow.

Note: If you can’t select the dt_products event as the trigger action, make sure you’ve set up the webhook correctly and completed a guide at least once as described in Webhooks.