Solved

Using event properties in style block

  • 23 November 2022
  • 2 replies
  • 70 views

Badge +1

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!

icon

Best answer by Hoang 28 November 2022, 00:02

View original

2 replies

Userlevel 7
Badge +60

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

Badge +1

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