Overview
If you create a quiz in Octane AI that has a dynamic number of products at the end, then the best way to insert those products into a Klaviyo email is by using a dynamic table.
Dynamic tables only require you to create a single template that will automatically fill up with all products that were seen in a customer's result when they receive the email.
One thought to consider about dynamic tables is that the only way to add a clickable button for email recipients is with HTML.
In this document, we'll provide code you can copy/paste into the dynamic table with instructions on how to make edits.
What you'll learn | How to add a button into Klaviyo's dynamic tables, allowing you to insert products dynamically with a CTA (call to action). |
Prerequisites | Klaviyo flows must be triggered by a metric (the quiz completed event) in order to create dynamic emails based on the quiz.
 |
HTML button code
Pasting the HTML code below into an email template will add a button that links to the default dynamic results page URL variable:
<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.