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

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>&nbsp;</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:
1. Go to the Okendo app > Mail > Email Templates.
2. Click on Review Request (this is important as selecting other template types will generate different types of stars) and select any template.
3. Click on styling and override styling.
4. 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).
  1. Star Color should match the starColor in your code
  2. Card Background Color should match the backgroundColor in your code (backgroundColor='FFFFFF')
5. 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.

Start the "Forward to Klaviyo" sequence

The final step is to set the Klaviyo email to manual or live.

From there, go to the Okendo app > Mail > New Sequence > Klaviyo.

Configure the recruit date and time delay, and click Start.