Dynamic tables can be used in Klaviyo to create product blocks for quiz results. However, formatting these can be a bit of a manual process.
This article will give you code that you can copy and paste into your tables to create a button CTA. This will work in any email's HTML.
💡 What you'll learn
How to add a button to an email with HTML
💡 Prerequisites
Octane AI data can be added dynamically into Klaviyo emails with the Klaviyo integration.
In order to add product data to emails, the Octane Plus plan is required.
Why is an HTML button needed?
One of the ways you can insert quiz content into an email dynamically is by using a dynamic table in Klaviyo.
Dynamic tables can be made of text & image blocks, which means adding in blocks like a button block isn't possible.
This means buttons will need to be added in with HTML code.
HTML code for a button in emails
Below is a template for a button that includes a link back to the results page.
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<table cellspacing="0" cellpadding="0">
<tr>
<td style="border-radius: 2px;" bgcolor="#262941">
<a href="{{ event|lookup:'quiz results URL'|default:'' }}" target="_blank" style="padding: 8px 12px; border: 1px solid #262941;border-radius: 2px;font-family: Helvetica, Arial, sans-serif;font-size: 14px; color: #ffffff;text-decoration: none;font-weight:bold;display: inline-block;">
Click
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
The code inside of a href="{{ event|lookup:'quiz results URL'|default:'' }}" represents where the button will click to. This code uses a Klaviyo dynamic variable but it can also be replaced with any URL (using the full https:// format).
Check out the Editing the button code section for details on changing this code.
If you've changed the name of your quiz completed event in your quiz editor settings, the variable will as well. You can check this by opening Octane AI's quiz editor and going to:
Connect > Klaviyo
Adding HTML to a dynamic table
Once you've created a metric-triggered flow in Klaviyo that enters people into the flow when Octane AI's quiz completed event fires, Octane AI data can be inserted into dynamic tables.
HTML can be added to any text box in Klaviyo by selecting the </> or Source code icon.
Your HTML code can be added there. If you've added other content to the text box, there may be pre-existing HTML code.
You can past the code anywhere you'd like to insert the button.
Editing the button code
You can use the copied code as-is or as a template to make further changes with. Changes like color, or button link are easy to make even without any HTML knowledge.
Here are the important parts of the code to know.
The results page variable
The button code's redirect URL is placed here:
a href="{{ event|lookup:'quiz results URL'|default:'' }}"
{{ event|lookup:'quiz results URL'|default:'' }} is a dynamic variable that's unique to Klaviyo. This variable will automatically be replaced with a link back to the results page that the email recipient last viewed as long as the email flow is being triggered by the quiz completed event.
If you've changed the name of your quiz completed event in the quiz editor's Connect settings, your event variable will have a different label.
To replace this variable, change the text inside of the " ". This can also be a URL, such as:
a href="https://www.google.com"
Changing the button colors
The button has a color for the body as well as the border of the button that can be set separately.
The button body color can be changed here:
<td style="border-radius: 2px;" bgcolor="#262941">
The border & text colors can be changed here:
style="padding: 8px 12px; border: 1px solid #262941;border-radius: 2px;font-family: Helvetica, Arial, sans-serif;font-size: 14px; color: #ffffff;text-decoration: none;font-weight:bold;display: inline-block;"
The colors of the border & body are represented by #262941, which is a hex color code for a shade of blue. The color of the text is represented by #ffffff which represents white.
You can replace these with hex color codes of your own. This is a great resource that you can use to select colors or translate other color formats to a hex code.
Changing button font & text
The font used in the button is listed here:
style="padding: 8px 12px; border: 1px solid #262941;border-radius: 2px;font-family: Helvetica, Arial, sans-serif;font-size: 14px; color: #ffffff;text-decoration: none;font-weight:bold;display: inline-block;"
To change the font of the button text, replace the text that comes after font-family: with your desired font family.
The text displayed in the button comes after the code snippet above, which is:
Click
Replace Click with your desired text. The button size should adjust to fit.
Here's Klaviyo's guide on managing fonts including custom fonts.
The button code here is designed to be compatible with all email clients. Some code features aren't available in certain clients, so we recommend making larger changes only if you're savvy with email development.