SOLVED

Changing button color dynamically

Go to solution
Sreeja06
Level 2

Changing button color dynamically

Hey all, is there any way to change color of the CTA button dynamically in landing pages.

1 ACCEPTED SOLUTION

Accepted Solutions
Darshil_Shah1
Level 10 - Community Advisor

Re: Changing button color dynamically

If it's Marketo LP - and you wanna leverage cookied record's data/Marketo's inferred data e.g., location for customizing the button color you can define various possible buttons styles within the dynamic snippet for each segment, which will help you get away from the custom JS. πŸ™‚ 

Just as an FYI: Dynamic snippets are tied to a database segmentation and will show different content to visitors based on which segment they belong to.

View solution in original post

6 REPLIES 6
SanfordWhiteman
Level 10 - Community Moderator

Re: Changing button color dynamically

Of course! A Marketo LP is just an HTML + CSS + JS page.

 

If you structure your HTML so that a CSS class determines the button color, you can switch the CSS class using JS, or output it using a {{my.token}} or ${variable}, or... so many things.

 

But your description is pretty vague. β€œDynamically” according to what factors?

Sreeja06
Level 2

Re: Changing button color dynamically

Sreeja06_0-1645687771461.png

I want color of this button to change dynamically according to the segmentations defined.

SanfordWhiteman
Level 10 - Community Moderator

Re: Changing button color dynamically

Put different variations of a <style> tag in a segmented Rich Text area.

Darshil_Shah1
Level 10 - Community Advisor

Re: Changing button color dynamically

If it's Marketo LP - and you wanna leverage cookied record's data/Marketo's inferred data e.g., location for customizing the button color you can define various possible buttons styles within the dynamic snippet for each segment, which will help you get away from the custom JS. πŸ™‚ 

Just as an FYI: Dynamic snippets are tied to a database segmentation and will show different content to visitors based on which segment they belong to.

Sreeja06
Level 2

Re: Changing button color dynamically

Sorry, but I'am new to Marketo can you please tell how to use segments for color variables

SanfordWhiteman
Level 10 - Community Moderator

Re: Changing button color dynamically

I mean you create a mktoText block and then make it dynamic.

 

One segment might have

<style>
  .some-button {
     background-color: orange;
  }
</style>

and another has

<style>
  .some-button {
     background-color: green;
  }
</style>

 

But it seems like you need to familiarize yourself with Marketo features by reading the docs and experimentation. You need to be fluent in the different options (Darshil mentions using a Snippet, which is another way) to make the best choice for each project.