Once review request emails have been configured in Klaviyo, one common customization is to change the star rating button into a CTA, such as "Leave a Review". The two options below walk through how to implement this.
Option 1
To change the Okendo CTA from stars to a button that shows under "How many stars?" you'll need to replace the code in column 2 of the Okendo block. You can do this by clicking on the Okendo block in the email > rows > column 2 > source > remove all code and replace with the below code. The email will appear like the screenshot to the right. To change the background color of the button locate the |
|
<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 border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:middle;" width="100%">
<tbody>
<tr>
<td align="center" style="word-break:break-word;font-size:0px;padding:10px;">
<div style="cursor:auto;color:#1d2236;font-family:Helvetical Neue, Arial, sans-serif;font-size:16px;font-weight:bold;line-height:22px;text-align:center;">{{ product.Name }}</div>
</td>
</tr>
</tbody>
</table>
</div>
<table border="0" cellpadding="0" cellspacing="0" class="kmButtonBlock" style="border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0; table-layout:fixed; width:100%" width="100%">
<tbody class="kmButtonBlockOuter">
<tr>
<td align="center" class="kmButtonBlockInner" style="border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0; table-layout:fixed; min-width:60px; padding:9px 18px; padding-top:9; padding-bottom:9; padding-left:18; padding-right:18" valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="kmButtonContentContainer" style="border-collapse:separate; mso-table-lspace:0; mso-table-rspace:0; table-layout:fixed; background-color:#8757B1; border-bottom-left-radius:5px; border-bottom-right-radius:5px; border-top-left-radius:5px; border-top-right-radius:5px; border-radius:5px" width="">
<tbody>
<tr><!--[if !mso]><!-->
<td align="center" class="kmButtonContent" style="border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0; table-layout:fixed; color:#FFF; font-family:"Helvetica Neue", Arial; font-size:16px; letter-spacing:0; font-weight:bold" valign="middle"><a class="kmButton" href="{{ product|lookup:'Review Url' }}" style="max-width:100%; color:#FFF; font-family:"Lato", Arial; font-size:16px; font-weight:bold; line-height:100%; text-align:center; text-decoration:none; word-wrap:break-word; display:inline-block; padding-top:15px; padding-bottom:15px; letter-spacing:0; padding-left:15px; padding-right:15px" target="_blank" title="">Leave a Review</a></td>
<!--<![endif]--><!--[if mso]>
<td align="center" valign="middle" class="kmButtonContent"
style="padding:15px; padding-top:15px;padding-bottom:15px;font-size:16px;color:#FFFFFF;letter-spacing:0px;font-weight:bold;padding-left:15px;padding-right:15px;font-family:"Helvetica Neue", Arial;">
<a class="kmButton" title="" href="{{ product|lookup:'Review Url' }}" target="_self" style="text-decoration:none;padding-top:15px;padding-bottom:15px;font-size:16px;color:#FFFFFF;letter-spacing:0px;font-weight:bold;padding-left:15px;padding-right:15px;font-family:"Helvetica Neue", Arial;; margin-top:-15px;margin-bottom:-15px;margin-left:-15px;margin-right:-15px;">Write a Review</a>
</td>
<![endif]-->
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Option 2
To add a single CTA button outside of the Okendo block you'll need to (1) drag and drop a new table to your email that has only one column. (2) click "rows" > "static" > "source" and (3) paste in the below code. Note: this single button will only link to the review capture form for the first product in the email. To change the background color of the button locate the |
|
<table border="0" cellpadding="0" cellspacing="0" class="kmButtonBlock" style="border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0; table-layout:fixed; width:100%" width="100%">
<tbody class="kmButtonBlockOuter">
<tr>
<td align="center" class="kmButtonBlockInner" style="border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0; table-layout:fixed; min-width:60px; padding:9px 18px; padding-top:9; padding-bottom:9; padding-left:18; padding-right:18" valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="kmButtonContentContainer" style="border-collapse:separate; mso-table-lspace:0; mso-table-rspace:0; table-layout:fixed; background-color:#FD9476; border-bottom-left-radius:5px; border-bottom-right-radius:5px; border-top-left-radius:5px; border-top-right-radius:5px; border-radius:5px" width="">
<tbody>
<tr><!--[if !mso]><!-->
<td align="center" class="kmButtonContent" style="border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0; table-layout:fixed; color:#FFF; font-family:"Helvetica Neue", Arial; font-size:16px; letter-spacing:0; font-weight:bold" valign="middle"><span style="font-family:helvetica,sans-serifhelvetica neue;"><a class="kmButton" href="{{ event.Products.0|lookup:'Review Url' }}" style="max-width:100%; color:#FFF; font-family:"Lato", Arial; font-size:16px; font-weight:bold; line-height:100%; text-align:center; text-decoration:none; word-wrap:break-word; display:inline-block; padding-top:15px; padding-bottom:15px; letter-spacing:0; padding-left:15px; padding-right:15px" target="_blank" title="">LEAVE A REVIEW</a></span></td>
<!--<![endif]--><!--[if mso]>
<td align="center" valign="middle" class="kmButtonContent"
style="padding:15px; padding-top:15px;padding-bottom:15px;font-size:16px;color:#FFFFFF;letter-spacing:0px;font-weight:bold;padding-left:15px;padding-right:15px;font-family:"Helvetica Neue", Arial;">
<a class="kmButton" title="" href="{{ event.Products.0|lookup:'Review Url' }}" target="_self" style="text-decoration:none;padding-top:15px;padding-bottom:15px;font-size:16px;color:#FFFFFF;letter-spacing:0px;font-weight:bold;padding-left:15px;padding-right:15px;font-family:"Helvetica Neue", Arial;; margin-top:-15px;margin-bottom:-15px;margin-left:-15px;margin-right:-15px;">Write a Review</a>
</td>
<![endif]-->
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>