Add button in email body

0
Hi i have used email functionality to send mail from mendix. I want to add a button in email body which redirect to specific link. I know how to add links in an email but i want similar button which is there in image attached. does anyone has idea on this ??       
asked
2 answers
4

Hi Shaan,

Try this code in your email template pass the page URL in the {%pageurl%} token. I have attached the screenshot for your reference.  I hope this is useful for you.

/Code begins…../

<table align="center" border="0" cellpadding="0" cellspacing="0" style="margin:auto">

                                        <tbody>

                                            <tr>

                                                <td style="background-color:#48248f; text-align:center"><a href="{%pageurl%}" style="background: #48248f; border: 15px solid #48248f; font-family: tahoma; font-weight: 10; letter-spacing: 2px;  mso-height-rule: exactly; line-height: 10px; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: 10; ">&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ffffff">Click Here</span>&nbsp;&nbsp;&nbsp;&nbsp; </a></td>

                                            </tr>

                                        </tbody>

                                    </table>

/Code ends…../

 

answered
2

Well, this is a difficult area apparently. There are tons of email-rendering programs and not all stick to the standards.

Never tried this yet but since you can add html-code in the body, you probably can add :

<a href="https://forum.mendix.com/link/questions/108297">
  <button>View post/button>
</a>

Tried this and in Roundcube webmail it shows up as a button. Hm, not in outlook. Email does not parse this. Here are the results, the top one in RoundCube, the bottom one in Outlook

Tag <button> is not supported in email. Next try:

<input type="button" onclick="window.location.href='https://www.freecodecamp.org/';" value="freeCodeCamp" />

Nope, fine in Roundcube, see this screenshot

but does not render in Outlook to a button either…

 

Ah: Working Solution using this test from codepen (https://codepen.io/rkimberlyc/pen/MJjYar), works in both Roundcube an outlook:

<!--Button-->
 <table align="center" cellspacing="0" cellpadding="0" width="100%">
   <tr>
     <td align="center">
       <table border="0" class="mobile-button" cellspacing="0" cellpadding="0">
         <tr>
           <td align="center" bgcolor="#2b3138" style="background-color: #2b3138; margin: auto; max-width: 600px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 15px 20px; " width="100%">
           <!--[if mso]>&nbsp;<![endif]-->
               <a href="#" target="_blank" style="16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; font-weight:normal; text-align:center; background-color: #2b3138; text-decoration: none; border: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; display: inline-block;">
                   <span style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; font-weight:normal; line-height:1.5em; text-align:center;">Click Here</span>
             </a>
           <!--[if mso]>&nbsp;<![endif]-->
           </td>
         </tr>
       </table>
     </td>
   </tr>
 </table>

outlook does have a problem with rounded corners. But that is a minor thing. See the result in RoundCube and in Outlook:

answered