Skip to main content

Hi, we want to send event properties that manipulates my styles. Of course injecting {{ event.blah }} into inline styles of HTML components would be fine, but we were wondering if it is possible to do something like this in the <style> block of the template, since it will drastically reduce the amount of duplication in the template.

...

<style>
.style-class {
color: {{ event.pretty_colour }}
}
</style>

...

<a class="style-class" />

As it stands, if we apply the above, the .style-class will not even appear in the final email, and no effect will be applied.

Thanks in advance!

Hello @Hoang,

Welcome to the Klaviyo Community!

Depending on what your event property’s value is, I don’t see why you wouldn’t be able to do this! If it’s something like color you’re trying to pass, you should be able to within a css or a span class. 

Two reasons why I can think this isn’t working:

  1. You’re previewing as an individual whose event data does not match the event property
  2. You’re using the code in a flow that’s not triggered by the corresponding event/metric

I hope this helps!

David


Hi David,

Thank you for your reply. We brought this up with the internal support channel, and the solution is to use the event properties in inline styles. So this would not work (we double checked our event data and flow triggers)

...
<style>
.style-class {
color: {{ event.pretty_colour }}
}
</style>
...
<a class="style-class" />

but this would be possible

<a style="color:{{ event.pretty_colour }}" />

It would do for us for now, but we would love it if it was possible to specify CSS in HTML <style> block, as it would make HTML templating much more powerful and less repetitive.

Best regards,
Hoang Phung


Reply