Set up a flow in Klaviyo's new editor to start sending review request emails to your customers.
Before you begin
If it isn't already, the Okendo and Klaviyo integration will need to be enabled in the Okendo admin - see here for instructions.
Set up a review request email flow using Klaviyo's new editor
Open Klaviyo and create a new flow with the trigger "Eligible for Okendo Review Request" at least once since starting this flow, and the flow filter "Ineligible for Okendo Review Request" at least zero times since starting this flow. This trigger refers to an order being fulfilled and paid for in full (no refunds or cancellations).
2. Drag and drop a new email into the flow, and click configure.
3. Drag and drop a table block into the email.
4. Go to Table Settings > Dynamic > Data Source and fill out the Row Collection and Alias. These variables are case-sensitive and must be entered as below.
event.Products
product
If you would like to limit the number of products to show, configure it as below. Inputting 3 will limit the number of products showing to 3.
event.Products|slice:'3'
product
6. Scroll down below the data source and configure the columns as shown.
7. Go to Content > Dynamic Rows > and select the image. Add a dynamic image and insert the following URL:
{{ product|lookup:'Image Url' }}
From there, insert the following alt text, link address, and max width.
{{ product.name }}
{{ product|lookup:'Review Url' }}
8. Next, click on the text button in column 2 > source > insert the code. Click the source button again to save.
<div>{% with backgroundColor='FFFFFF' starColor='000000' productNameColor='000000' questionColor='000000' %}</div>
<div class="mj-column-px-350 outlook-group-fix" style="vertical-align: middle; display: inline-block; direction: ltr; font-size: 13px; text-align: left; width: 100%;">
<table style="vertical-align: middle;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="word-break: break-word; font-size: 0px; padding: 10px 25px;" align="left">
<div style="cursor: auto; color: #{{ productnamecolor | lower }}; font-family: 'Helvetical Neue', Arial, sans-serif; font-size: 16px; font-weight: bold; line-height: 22px; text-align: center;">{{ product.Name }}</div>
</td>
</tr>
<tr>
<td style="word-break: break-word; font-size: 0px; padding: 10px 25px; padding-bottom: 0px;" align="left">
<div style="cursor: auto; color: #{{ questioncolor | lower }}; font-family: 'Helvetical Neue', Arial, sans-serif; font-size: 16px; line-height: 22px; text-align: center;">How many stars?</div>
<p> </p>
</td>
</tr>
<tr>
<td style="word-break: break-word; font-size: 0px; padding: 10px 25px;" align="left">
<div style="cursor: auto; color: #000000; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: normal; text-align: center;"><a aria-label="Vote 1 Star" href="{{ product|lookup:'Review Rating Urls'|lookup:'0'|lookup:'Url' }}"><img style="border: none; ;outline: none; text-decoration: none;" src="https://d3hw6dc1ow8pp2.cloudfront.net/emails/review/star-hollow-{{ starColor | lower }}-{{ backgroundColor | lower }}.png" alt="1 Star" width="20" height="18" /></a> <a aria-label="Vote 2 Star" href="{{ product|lookup:'Review Rating Urls'|lookup:'1'|lookup:'Url' }}"> <img style="border: none; ;outline: none; text-decoration: none;" src="https://d3hw6dc1ow8pp2.cloudfront.net/emails/review/star-hollow-{{ starColor | lower }}-{{ backgroundColor | lower }}.png" alt="2 Star" width="20" height="18" /></a> <a aria-label="Vote 3 Star" href="{{ product|lookup:'Review Rating Urls'|lookup:'2'|lookup:'Url' }}"> <img style="border: none; ;outline: none; text-decoration: none;" src="https://d3hw6dc1ow8pp2.cloudfront.net/emails/review/star-hollow-{{ starColor | lower }}-{{ backgroundColor | lower }}.png" alt="3 Star" width="20" height="18" /></a> <a aria-label="Vote 4 Star" href="{{ product|lookup:'Review Rating Urls'|lookup:'3'|lookup:'Url' }}"> <img style="border: none; ;outline: none; text-decoration: none;" src="https://d3hw6dc1ow8pp2.cloudfront.net/emails/review/star-hollow-{{ starColor | lower }}-{{ backgroundColor | lower }}.png" alt="4 Star" width="20" height="18" /></a> <a aria-label="Vote 5 Star" href="{{ product|lookup:'Review Rating Urls'|lookup:'4'|lookup:'Url' }}"> <img style="border: none; ;outline: none; text-decoration: none;" src="https://d3hw6dc1ow8pp2.cloudfront.net/emails/review/star-hollow-{{ starColor | lower }}-{{ backgroundColor | lower }}.png" alt="5 Star" width="20" height="18" /></a></div>
</td>
</tr>
</tbody>
</table>
</div>
<div>{% endwith %}</div>
9. Lastly, preview the changes in the top right button.
Change Star Color
Our standard star color is hex 000000. To change the star color, locate “starHex” in the code block and update your hex value accordingly.
Change the hex code in the first line to the color of your choosing (starColor='000000').
Replace the code in Rows > Dynamic > Column 2 (select source) with the code from above.
⚠️ Note: Not all hex values have been generated. If you have broken star images:
Go to the Okendo app > Mail > Email Templates.
Click on Review Request (this is important as selecting other template types will generate different types of stars) and select any template.
Click on styling and override styling.
Change the Star Color to the same color as the value you set previously in the template and wait for the preview to take place (no need to save).
Star Color should match the starColor in your code
Card Background Color should match the backgroundColor in your code (backgroundColor='FFFFFF')
After a few seconds, preview the email to see the updated stars.
To change the text color, simply change the hex values in the second line of code.
Write a Review Button
To show an additional CTA for the response form, insert a button and configure it as below.
{{ event.Products.0|lookup:'Review Url' }}
Start the Forward to Klaviyo sequence
The final step is to set the Klaviyo email to live.
From there, go to the Okendo app > Mail > New Sequence > Klaviyo.
Configure the recruit date and time delay, and click Start.
