Skip to main content
All CollectionsOkendo ReviewsIntegrationsKlaviyo
Customize CTA Buttons in Klaviyo Review Requests
Customize CTA Buttons in Klaviyo Review Requests
Chris MaGill avatar
Written by Chris MaGill
Updated today

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 background-color: and change the hex code.

<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:&quot;Helvetica Neue&quot;, 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:&quot;Lato&quot;, 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:&quot;Helvetica Neue&quot;, 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:&quot;Helvetica Neue&quot;, 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 background-color: and change the hex code.

<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:&quot;Helvetica Neue&quot;, 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:&quot;Lato&quot;, 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:&quot;Helvetica Neue&quot;, 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:&quot;Helvetica Neue&quot;, 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>

Did this answer your question?