SOLVED

CTAs rendering in Outlook App

Go to solution
Tom_Hemy
Level 1

CTAs rendering in Outlook App

Hi everyone,

I'm having a bit of trouble getting my CTAs to render properly in the Outlook desktop app, here's the code/CSS I'm using:

<p style="text-align: center;"><span><a href="####" target="_blank" style="font-family: Helvetica, Arial, sans-serif; display: inline-block; background-color: #0a4977; border: 10px solid #0A4977; color: #ffffff; text-decoration: none; font-size: 18px; font-weight: bold; text-transform: uppercase; border-radius: 5px; margin: 0; text-align: center; width: fit-content; white-space: nowrap; padding: 3px 20px;">Watch now</a></span></p>

 

screenshotAtUploadCC_1586246761372.pngThis is what it should look like, and does everywhere except the Outlook desktop app.

 

Watch now CTA.png This is what it looks like on the Outlook desktop app.

 

Any help/advice is appreciated!

1 ACCEPTED SOLUTION

Accepted Solutions
Prashanth_K
Level 2

Re: CTAs rendering in Outlook App

Hi Tom, 

I have faced this issue where the email looks good in the outlook web version but not in the desktop app. Outlook accepts a table layout, Whatever code you write, try putting them inside a table so, that they will be rendered properly in the outlook desktop version. For instance please use the following code in your email to render the CTA perfectly in the outlook app. 

 

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center">
<div>
<!--[if mso]>
<a:rect xmlns:a="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:40px;v-text-anchor:middle;width:250px;" stroke="f" fillcolor="#0a4977" >
<w:anchorlock/>
<center>
<![endif]-->
<a id="cta-button" href="#" style="background-color: #0a4977; color: #ffffff; display: inline-block; font-family: sans-serif; font-size: 13px; font-weight: bold; line-height: 40px; text-align: center; text-decoration: none; width: 250px; -webkit-text-size-adjust: none;"
target="_blank">WATCH VIDEO</a>
<!--[if mso]>
</center>
</a:rect>
<![endif]-->
</div>
</td>
</tr>
</tbody>
</table>

 

 
This code allows you to control your CTA for both web and application version. The section <!--[if mso]>// <![endif]--> has the outlook code.  
I hope the above is useful to you. Let me know if you need any help. 

Thanks, 
Prashanth
 

View solution in original post

5 REPLIES 5
Prashanth_K
Level 2

Re: CTAs rendering in Outlook App

Hi Tom, 

I have faced this issue where the email looks good in the outlook web version but not in the desktop app. Outlook accepts a table layout, Whatever code you write, try putting them inside a table so, that they will be rendered properly in the outlook desktop version. For instance please use the following code in your email to render the CTA perfectly in the outlook app. 

 

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center">
<div>
<!--[if mso]>
<a:rect xmlns:a="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:40px;v-text-anchor:middle;width:250px;" stroke="f" fillcolor="#0a4977" >
<w:anchorlock/>
<center>
<![endif]-->
<a id="cta-button" href="#" style="background-color: #0a4977; color: #ffffff; display: inline-block; font-family: sans-serif; font-size: 13px; font-weight: bold; line-height: 40px; text-align: center; text-decoration: none; width: 250px; -webkit-text-size-adjust: none;"
target="_blank">WATCH VIDEO</a>
<!--[if mso]>
</center>
</a:rect>
<![endif]-->
</div>
</td>
</tr>
</tbody>
</table>

 

 
This code allows you to control your CTA for both web and application version. The section <!--[if mso]>// <![endif]--> has the outlook code.  
I hope the above is useful to you. Let me know if you need any help. 

Thanks, 
Prashanth
 
Tom_Hemy
Level 1

Re: CTAs rendering in Outlook App

Hi Prasanth,

 

Thank you very much! I put the code into my email, and it works perfectly like you said! 

 

Thanks again for the help!

Tom

Prashanth_K
Level 2

Re: CTAs rendering in Outlook App

Hi Tom, 

That's nice to hear. I request you to mark this as a solution so that it stands resolved. 

 

Regards, 

Prashanth

Chris_Francis1
Level 1

Re: CTAs rendering in Outlook App

Hi,

 

I am having the same issue. I am wondering where you inserted this in your code?

Jo_Pitts1
Level 10 - Community Advisor

Re: CTAs rendering in Outlook App

@Chris_Francis1,

coding HTML for emails is an incredibly nuanced PITA!  I'd suggest doing a LOT of googling (It's what I did in my early days).  A great place to start is to google "bullet proof cta button"

 

Cheers

Jo