CODEWITHSUNDEEP
htmlemailmailgun
Gesar
Gesar

Reputation: 399

How do I get links in mailgun templates working?

Sorry for the really stupid basic question. Mailgun aren't responding to me.

I am using a mailgun template. Specifically their "action" template. I am using it exactly as provided, I made no changes. I send the email to myself, and the link inside (to http://www.mailgun.com) is not clickable.

I have tried gmail + microsoft clients.

The HTML is also peppered with =3D which I don't understand but I assume is fine.

Link tracking is already off.

The full html of their email is:

<!DOCTYPE html>
<html style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Actionable emails e.g. reset password</title>


<style type="text/css">
img {
max-width: 100%;
}
body {
-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; line-height: 1.6em;
}
body {
background-color: #f6f6f6;
}
@media only screen and (max-width: 640px) {
  body {
    padding: 0 !important;
  }
  h1 {
    font-weight: 800 !important; margin: 20px 0 5px !important;
  }
  h2 {
    font-weight: 800 !important; margin: 20px 0 5px !important;
  }
  h3 {
    font-weight: 800 !important; margin: 20px 0 5px !important;
  }
  h4 {
    font-weight: 800 !important; margin: 20px 0 5px !important;
  }
  h1 {
    font-size: 22px !important;
  }
  h2 {
    font-size: 18px !important;
  }
  h3 {
    font-size: 16px !important;
  }
  .container {
    padding: 0 !important; width: 100% !important;
  }
  .content {
    padding: 0 !important;
  }
  .content-wrap {
    padding: 10px !important;
  }
  .invoice {
    width: 100% !important;
  }
}
</style>
</head>

<body itemscope itemtype="http://schema.org/EmailMessage" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; line-height: 1.6em; background-color: #f6f6f6; margin: 0;" bgcolor="#f6f6f6">

<table class="body-wrap" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; width: 100%; background-color: #f6f6f6; margin: 0;" bgcolor="#f6f6f6"><tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;"><td style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0;" valign="top"></td>
    <td class="container" width="600" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; display: block !important; max-width: 600px !important; clear: both !important; margin: 0 auto;" valign="top">
      <div class="content" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; max-width: 600px; display: block; margin: 0 auto; padding: 20px;">
        <table class="main" width="100%" cellpadding="0" cellspacing="0" itemprop="action" itemscope itemtype="http://schema.org/ConfirmAction" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; border-radius: 3px; background-color: #fff; margin: 0; border: 1px solid #e9e9e9;" bgcolor="#fff"><tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;"><td class="content-wrap" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 20px;" valign="top">
              <meta itemprop="name" content="Confirm Email" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;" /><table width="100%" cellpadding="0" cellspacing="0" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;"><tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;"><td class="content-block" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0 0 20px;" valign="top">
                    Please confirm your email address by clicking the link below.
                  </td>
                </tr><tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;"><td class="content-block" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0 0 20px;" valign="top">
                    We may need to send you critical information about our service and it is important that we have an accurate email address.
                  </td>
                </tr><tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;"><td class="content-block" itemprop="handler" itemscope itemtype="http://schema.org/HttpActionHandler" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0 0 20px;" valign="top">
                    <a href="http://www.mailgun.com" class="btn-primary" itemprop="url" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; color: #FFF; text-decoration: none; line-height: 2em; font-weight: bold; text-align: center; cursor: pointer; display: inline-block; border-radius: 5px; text-transform: capitalize; background-color: #348eda; margin: 0; border-color: #348eda; border-style: solid; border-width: 10px 20px;">Confirm email address</a>
                  </td>
                </tr><tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;"><td class="content-block" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0 0 20px;" valign="top">
                    &mdash; The Mailgunners
                  </td>
                </tr></table></td>
          </tr></table><div class="footer" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; width: 100%; clear: both; color: #999; margin: 0; padding: 20px;">
          <table width="100%" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;"><tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;"><td class="aligncenter content-block" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 12px; vertical-align: top; color: #999; text-align: center; margin: 0; padding: 0 0 20px;" align="center" valign="top">Follow <a href="http://twitter.com/mail_gun" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 12px; color: #999; text-decoration: underline; margin: 0;">@Mail_Gun</a> on Twitter.</td>
            </tr></table></div></div>
    </td>
    <td style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0;" valign="top"></td>
  </tr></table></body>
</html>

Honestly it looks fine to me but I am far from an expert. I'd appreciate any advice.

EDIT:

This is the HTML as it appears inside my email client when I click "show original":

<!DOCTYPE html>
<html style=3D"font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;=
 box-sizing: border-box; font-size: 14px; margin: 0;">
<head>
<meta name=3D"viewport" content=3D"width=3Ddevice-width" />
<meta http-equiv=3D"Content-Type" content=3D"text/html; charset=3DUTF-8" />
<title>Actionable emails e.g. reset password</title>


<style type=3D"text/css">
img {
max-width: 100%;
}
body {
-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width:=
 100% !important; height: 100%; line-height: 1.6em;
}
body {
background-color: #f6f6f6;
}
@media only screen and (max-width: 640px) {
  body {
    padding: 0 !important;
  }
  h1 {
    font-weight: 800 !important; margin: 20px 0 5px !important;
  }
  h2 {
    font-weight: 800 !important; margin: 20px 0 5px !important;
  }
  h3 {
    font-weight: 800 !important; margin: 20px 0 5px !important;
  }
  h4 {
    font-weight: 800 !important; margin: 20px 0 5px !important;
  }
  h1 {
    font-size: 22px !important;
  }
  h2 {
    font-size: 18px !important;
  }
  h3 {
    font-size: 16px !important;
  }
  .container {
    padding: 0 !important; width: 100% !important;
  }
  .content {
    padding: 0 !important;
  }
  .content-wrap {
    padding: 10px !important;
  }
  .invoice {
    width: 100% !important;
  }
}
</style>
</head>

<body itemscope itemtype=3D"http://schema.org/EmailMessage" style=3D"font-f=
amily: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box;=
 font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-ad=
just: none; width: 100% !important; height: 100%; line-height: 1.6em; backg=
round-color: #f6f6f6; margin: 0;" bgcolor=3D"#f6f6f6">

<table class=3D"body-wrap" style=3D"font-family: 'Helvetica Neue',Helvetica=
,Arial,sans-serif; box-sizing: border-box; font-size: 14px; width: 100%; ba=
ckground-color: #f6f6f6; margin: 0;" bgcolor=3D"#f6f6f6"><tr style=3D"font-=
family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box=
; font-size: 14px; margin: 0;"><td style=3D"font-family: 'Helvetica Neue',H=
elvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertica=
l-align: top; margin: 0;" valign=3D"top"></td>
    <td class=3D"container" width=3D"600" style=3D"font-family: 'Helvetica =
Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; =
vertical-align: top; display: block !important; max-width: 600px !important=
; clear: both !important; margin: 0 auto;" valign=3D"top">
      <div class=3D"content" style=3D"font-family: 'Helvetica Neue',Helveti=
ca,Arial,sans-serif; box-sizing: border-box; font-size: 14px; max-width: 60=
0px; display: block; margin: 0 auto; padding: 20px;">
        <table class=3D"main" width=3D"100%" cellpadding=3D"0" cellspacing=
=3D"0" itemprop=3D"action" itemscope itemtype=3D"http://schema.org/ConfirmA=
ction" style=3D"font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; b=
ox-sizing: border-box; font-size: 14px; border-radius: 3px; background-colo=
r: #fff; margin: 0; border: 1px solid #e9e9e9;" bgcolor=3D"#fff"><tr style=
=3D"font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: b=
order-box; font-size: 14px; margin: 0;"><td class=3D"content-wrap" style=3D=
"font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: bord=
er-box; font-size: 14px; vertical-align: top; margin: 0; padding: 20px;" va=
lign=3D"top">
              <meta itemprop=3D"name" content=3D"Confirm Email" style=3D"fo=
nt-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-=
box; font-size: 14px; margin: 0;" /><table width=3D"100%" cellpadding=3D"0"=
 cellspacing=3D"0" style=3D"font-family: 'Helvetica Neue',Helvetica,Arial,s=
ans-serif; box-sizing: border-box; font-size: 14px; margin: 0;"><tr style=
=3D"font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: b=
order-box; font-size: 14px; margin: 0;"><td class=3D"content-block" style=
=3D"font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: b=
order-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0 0 20=
px;" valign=3D"top">
                    Please confirm your email address by clicking the link =
below.
                  </td>
                </tr><tr style=3D"font-family: 'Helvetica Neue',Helvetica,A=
rial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;"><td c=
lass=3D"content-block" style=3D"font-family: 'Helvetica Neue',Helvetica,Ari=
al,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top=
; margin: 0; padding: 0 0 20px;" valign=3D"top">
                    We may need to send you critical information about our =
service and it is important that we have an accurate email address.
                  </td>
                </tr><tr style=3D"font-family: 'Helvetica Neue',Helvetica,A=
rial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;"><td c=
lass=3D"content-block" itemprop=3D"handler" itemscope itemtype=3D"http://sc=
hema.org/HttpActionHandler" style=3D"font-family: 'Helvetica Neue',Helvetic=
a,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align=
: top; margin: 0; padding: 0 0 20px;" valign=3D"top">
                    <a href=3D"http://www.mailgun.com" class=3D"btn-primary=
" itemprop=3D"url" style=3D"font-family: 'Helvetica Neue',Helvetica,Arial,s=
ans-serif; box-sizing: border-box; font-size: 14px; color: #FFF; text-decor=
ation: none; line-height: 2em; font-weight: bold; text-align: center; curso=
r: pointer; display: inline-block; border-radius: 5px; text-transform: capi=
talize; background-color: #348eda; margin: 0; border-color: #348eda; border=
-style: solid; border-width: 10px 20px;">Confirm email address</a>
                  </td>
                </tr><tr style=3D"font-family: 'Helvetica Neue',Helvetica,A=
rial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;"><td c=
lass=3D"content-block" style=3D"font-family: 'Helvetica Neue',Helvetica,Ari=
al,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top=
; margin: 0; padding: 0 0 20px;" valign=3D"top">
                    &mdash; The Mailgunners
                  </td>
                </tr></table></td>
          </tr></table><div class=3D"footer" style=3D"font-family: 'Helveti=
ca Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14p=
x; width: 100%; clear: both; color: #999; margin: 0; padding: 20px;">
          <table width=3D"100%" style=3D"font-family: 'Helvetica Neue',Helv=
etica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;=
"><tr style=3D"font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; bo=
x-sizing: border-box; font-size: 14px; margin: 0;"><td class=3D"aligncenter=
 content-block" style=3D"font-family: 'Helvetica Neue',Helvetica,Arial,sans=
-serif; box-sizing: border-box; font-size: 12px; vertical-align: top; color=
: #999; text-align: center; margin: 0; padding: 0 0 20px;" align=3D"center"=
 valign=3D"top">Follow <a href=3D"http://twitter.com/mail_gun" style=3D"fon=
t-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-b=
ox; font-size: 12px; color: #999; text-decoration: underline; margin: 0;">@=
Mail_Gun</a> on Twitter.</td>
            </tr></table></div></div>
    </td>
    <td style=3D"font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; =
box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0;" v=
align=3D"top"></td>
  </tr></table></body>
</html>

Upvotes: 0

Views: 763

Answers (1)

Gesar
Gesar

Reputation: 399

All mail clients I was testing were stripping the links from the email due to the suspicious sandbox email address.

Upvotes: 2

Related Questions