SOLVED

Dynamic Button on guided landing page

Go to solution
Highlighted

Dynamic Button on guided landing page

On my guided landing page, I have created an element which has an image and a button (CTA).

I would like to have the button dynamic, so I should be able to define the button text as dynamic content, and the button URL as dynamic content.

The button (CTA) links to a whitepaper download pdf, but the URL is different for every language version ( Dutch - English - French - German )

Both button label and button URL do not appear in the dynamic content section.

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Level 7

Re: Dynamic Button on guided landing page

I would suggest you change the code to this:

<div id="cta1" class="mktoText" mktoName="CTA1"><a href="mylink"><button class="btn btn-lg btn-blue mt"> BUTTON </button></a></div>

That way the whole button and link could be dynamic.

View solution in original post

7 REPLIES 7
Highlighted
Level 7

Re: Dynamic Button on guided landing page

Is your CTA editable in the elements section?

Screen Shot 2018-10-05 at 11.23.40.png

Have you can example url?

Highlighted

Re: Dynamic Button on guided landing page

No it isn't. What do I need to do?

Highlighted
Level 7

Re: Dynamic Button on guided landing page

So it looks like your button is controlled in the variable section, you can't make that bit dynamic. To fix this you need to wrap an editable region around the CTA:

<div id="cta1" class="mktoText" mktoName="CTA1">BUTTON</div>

This is done at the template level, please note, if you wrap this div around the CTA, it may brake the variable from working, so it might be worth adding this as a new feature.

Highlighted

Re: Dynamic Button on guided landing page

Ok,

I changed :

<button class="btn btn-lg btn-blue mt">${showCentralTextImageButtonLabel}</button>

in the following :

<button class="btn btn-lg btn-blue mt"><div id="cta1" class="mktoText" mktoName="CTA1">BUTTON</div></button></a>

By doing that the text on the button will be modifiable within a segment.

But, the url also needs to be different for the items in my segment. ( the cta is linking to a whitepaper, but depending on the language in my segment, it needs to link to another url, because the whitepaper has been translated.

So the code is structured like this :


<
a href="mylink">

     <button class="btn btn-lg btn-blue mt">

          <div id="cta1" class="mktoText" mktoName="CTA1">BUTTON</div>

     </button>

</a>

What should I do to have the url 'mylink' also dynamic?

Regards

Highlighted
Level 7

Re: Dynamic Button on guided landing page

I would suggest you change the code to this:

<div id="cta1" class="mktoText" mktoName="CTA1"><a href="mylink"><button class="btn btn-lg btn-blue mt"> BUTTON </button></a></div>

That way the whole button and link could be dynamic.

View solution in original post

Highlighted

Re: Dynamic Button on guided landing page

Thanks,

that solved my problem!

Highlighted
Level 1

Re: Dynamic Button on guided landing page

Hi Frank, do you know if this code could be used for a situation like this: I'd like to offer a different CTA to a page visitor who has clicked on the default CTA already. We'd like to use the LP for content that would have previously been on a PDF (say a checklist)- we'd like to have a CTA within or at the end of the content leading to another asset that could help them move down the funnel. But if they've already seen, ABC Whitepaper, I'd like to offer DEF Whitepaper. Thoughts?