Dynamic Buttons

[Anonymous]

We noticed that CTA buttons for two or three columns does not have the functionality to be dynamic. So we created and inserted a table inside the text element.

In preview and gmail, the buttons look great(see below image).

On the other hand, outlook strips the styling elements for the button(see below image).

Does anyone have a solution for this?

[Keith_Nyberg2]

Hey Albert,

I'm not aware of a solution to this as variables in 2.0 emails are not dynamic. Definitely a pain... Following this thread to see what others have to offer as a workaround here, best we have done is just loose the fancy button styling a stuck to basic hyperlinks in rich-text that can be made dynamic. Not as clean as a button, but better that outlook stripping the button formatting.

Couple ideas to resolve this issue that should be upvoted:

Sincerely,

Keith Nyberg

[Trevor_Parsell]

Hey Albert,

The button template below has worked really well for me in outlook and in other email clients. It basically shows one version of the button if viewed in Microsoft and another version when viewed in other email clients. Please note that you will need to update both versions when using this button. The bolded sections below are the link, button color, stroke color, and CTA text that would need to be updated for each new button.

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tbody>

<tr>

<td style="text-align: center;">

<div><!--[if mso]>

          <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" target="_blank" style="height:36px;v-text-anchor:middle;width:150px;" arcsize="5%" strokecolor="#f0ab00" fillcolor="#f0ab00">

            <w:anchorlock/>

            <center style="color:#ffffff;font-family:Helvetica, Arial,sans-serif;font-size:16px;">Read More</center>

          </v:roundrect>

        <![endif]--> <a target="_blank" href="#" style="background-color: #f0ab00; border: 1px solid #f0ab00; border-radius: 5px; color: #ffffff; display: inline-block; font-family: sans-serif; font-size: 16px; line-height: 44px; text-align: center; text-decoration: none; width: 150px; -webkit-text-size-adjust: none; mso-hide: all;">Read More</a></div>

</td>

</tr>

</tbody>

</table>

Thanks!

Trevor

[SanfordWhiteman]

Hmm, those buttons won't track in Outlook unless you do it like this: http://blog.teknkl.com/those-bulletproof-buttons-are-also-tracking-proof/

[Trevor_Parsell · Accepted solution]

Hey Sanford,

So I should replace my button template with something like this in order to track those who click it from outlook?

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tbody>

<tr>

<td style="text-align: center;">

<div><!--[if mso]>

  <a:roundrect

    xmlns:a="urn:schemas-microsoft-com:vml"

    xmlns:w="urn:schemas-microsoft-com:office:word"

    href="#"

    style="height:43px; v-text-anchor:middle; width:200px;"

    arcsize="8%"

    strokecolor="#4C4C93"

    fill="t">

    <a:fill type="solid" color="#4C4C93" />

    <w:anchorlock/>

    <center style="color:#ffffff;

      font-family:sans-serif;

      font-size:13px;

      font-weight:bold;">Read More</center>

  </a:roundrect>

<![endif]--><a href="#" style="background-color: #4c4c93; border: 1px solid #4C4C93; border-radius: 4px; color: #ffffff; display: inline-block; font-family: sans-serif; font-size: 13px; font-weight: bold; line-height: 43px; text-align: center; text-decoration: none; width: 200px; -webkit-text-size-adjust: none; mso-hide: all;">Read More</a></div>

</td>

</tr>

</tbody>

</table>

[SanfordWhiteman]

If you changed the <v:*> tags to <a:*>, then yes. (I can't really read the differences between code instantly, especially if not syntax-highlighted.)

[Trevor_Parsell]

ok, makes sense. Thanks for pointing this out as I did not know that the <v:*> tags were not tracked!

[Anonymous]

Hey Sanford!

I am trying to use the same code from above and now outlook doesn't re-direct when button is clicked?

When I tested it before, I was able to click through....

[Anonymous]

Nvm, I was able to find the issue!

Thank you again

[Anonymous]

Wow! This has been super helpful!
I was able to plug this into our 2.0 template and tested it. It's beautiful

Thank you guys!