How can I make a link in an email template editable?

[Anonymous]

In order to implement functional cross-platform buttons without using images, I have developed and tested a block of HTML. I would like to add that HTML to my email template, so that users can edit the url and text of the link without altering the other HTML, because any alteration to the HTML breaks it in some clients.

If I make the link itself editable using mktEditable, it only makes the text of the link editable. If I make the wrapper editable, the wysiwyg editor alters the HTML of the link, breaking it.

[Anonymous]

Hey Elias, did you wrap the link & text in div tags, or did you add the class mktEditable to the a href & text?

And are you performing this edit IN the design studio or writing the code, putting it into a template, and then creating an email from that template and testing the action. The design studio tends to insert more formatting when actions are performed from within the email editor, rather than from an HTML template inserted into the templates.

[Anonymous]

Thanks for responding. Here is the HTML snippet I'm using. I edited the HTML in a text editor then pasted my HTML into the email template. I need my other users to be able to easily edit only the url and text of the button since they are not developers.

<table cellspacing="3" cellpadding="0" border="0">

 <tr>

   <td height="38" style="font-family:'Myriad Pro',Calibri,sans-serif;padding-top:2px;background-color:#00AFD8;-webkit-border-radius:6px;border-radius:6px;font-size:16px;line-height:1.4;font-weight:bold;text-align:center;white-space:nowrap;">

       <a href="http://www.crashplan.com/" target="_blank" style="cursor:pointer;text-decoration:none;padding:.5em 2em; color:#FFF;" class="mktEditable" id="main_button">

         <!--[if gte mso 9]>&nbsp;&nbsp;&nbsp;<![endif]-->

         Learn More&nbsp;&gt;

         <!--[if gte mso 9]>&nbsp;&nbsp;&nbsp;<![endif]-->

       </a>

   </td>

 </tr>

</table>

I also tried putting the mktEditable class on the surrounding td element, but in that case when using the editor in design studio, some of the neccessary components are lost.

[Anonymous]

And this instead?


<table cellspacing="3" cellpadding="0" border="0">

 <tr>

   <td height="38" style="font-family:'Myriad Pro',Calibri,sans-serif;padding-top:2px;background-color:#00AFD8;-webkit-border-radius:6px;border-radius:6px;font-size:16px;line-height:1.4;font-weight:bold;text-align:center;white-space:nowrap;">

       <div class="mktEditable" id="buttonlink"> <a href="http://www.crashplan.com/" target="_blank" style="cursor:pointer;text-decoration:none;padding:.5em 2em; color:#FFF;">

         <!--[if gte mso 9]>&nbsp;&nbsp;&nbsp;<![endif]-->

         Learn More&nbsp;&gt;

         <!--[if gte mso 9]>&nbsp;&nbsp;&nbsp;<![endif]-->

       </a></div>

   </td>

 </tr>

</table>

[Anonymous]

PS - you're using a browser dependent borderradius definition. You're specifying for just WebKit browsers apply a rounded corner. You could setup -ms, -o, -moz.. but I think if you just remove the -webkit- you're better off..


border-radius:6px;

[Anonymous · Accepted solution]

Thanks for the suggestion. Looks like it's the same effect as making the containing td editable, which makes sense. Further, it looks like that will meet our needs, though it's not ideal. Unfortunately, the template editor seems to strip the conditional comments, but I have a work around for that. Thanks.