Skip to main content
All CollectionsRecover
Customizing the Recover Email Template
Customizing the Recover Email Template

Brand the emails with your own HTML and add a call to action button!

Baremetrics avatar
Written by Baremetrics
Updated over a week ago

The styling of the emails that go out are fully customizable! If you already have a stylized email in Intercom or another email tool you can likely reuse the same HTML with very few modifications. Just ensure that you include the {Content} parameter somewhere in the email!

➡Simply click here and follow along!⬅

📢 Adding a call to action button:

The simplest way to get up and running is to include the {BillingLink} in each individual email template, which will give you something like this.

To get a call to action button, remove the {BillingLink} attribute from the individual templates and instead use the {BillingURL} attribute as part of an image or button link. Like so.

<a href="{BillingURL}" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 2; color: #FFFFFF; text-align: center; border-radius: 5px; display: inline-block; cursor: pointer; font-weight: normal; text-decoration: none; background: #4A90E2; padding-left: 15px; padding-right: 15px; border-color: #4A90E2; border-style: solid; border-width: 4px 0; letter-spacing: 0px;" target="_blank">Update Now</a>

💻 All the Code!

Here's the code to use.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width">
<meta name="format-detection" content="telephone=no">



<style type="text/css" data-premailer="ignore">
#outlook a{
padding: 0;
}
body{
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
font-weight: 400;
margin: 0;
padding: 0;
}

img {
border: 0;
max-width: 100%;
height: auto;
outline: none;
display: inline-block;
margin: 0;
padding: 0;
text-decoration: none;
line-height: 100%;
}
#backgroundTable{
height: 100% !important;
margin: 0;
padding: 0;
width: 100% !important;
}
</style>




<style type="text/css">
/**
* Generic
*/

.main {
font-family: Helvetica, Arial, sans-serif;
letter-spacing: 0;
}

.main .main-td {
padding: 40px 60px;
border: 1px solid #dddddd;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
border-radius: 2px;
}

table {
border-spacing: 0;
border-collapse: separate;
table-layout: fixed;
}

td {
font-size: 16px;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
}

a {
border: none;
outline: none !important;
}


/**
* Header
*/

.header td img {
padding: 15px 0 30px;
text-align: left;
}

.header .logo {
text-align: left;
}

/**
* Content
*/

.content-td {
font-size: 15px;
line-height: 22px;
padding: 0;
color: #525252;
}

.content-td > :first-child {
margin-top: 0;
}

.content-td h1 {
font-size: 26px;
line-height: 33px;
color: #282F33;
margin-bottom: 7px;
margin-top: 30px;
font-weight: normal;
}

.content-td h2 {
font-size: 18px;
font-weight: bold;
color: #282F33;
margin-top: 30px;
margin-bottom: 7px;
}

.content-td h1 + h2 {
margin-top: 0px !important;
}

.content-td h2 + h1 {
margin-top: 0px !important;
}

.content-td h3 ,
.content-td h4 ,
.content-td h5 {
font-size: 16px;
font-weight: bold;
margin-bottom: 5px;
}

.content-td p {
margin: 0 0 17px 0;
line-height: 1.5;
}


.content-td p.intro {
font-size: 20px;
line-height: 30px;
}

.content-td img {
max-width: 100%;
margin: 17px 0;
}

.content-td hr {
border: none;
border-top: 1px solid #DDD;
margin: 50px 30% 50px 30%;
}

.content-td table {
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 20px;
}

.content-td td,
.content-td th {
padding: 5px 7px;
border: 1px solid #DADADA;
text-align: left;
vertical-align: top;
}

.content-td th {
font-weight: bold;
background: #F6F6F6;
}

.content-td a {
color: #1251BA;
}
</style>


</head>

<body style="margin: 0px; padding: 20px; background-color: #f9f9f9;" bgcolor="f9f9f9">

<table cellspacing="0" border="0" cellpadding="0" align="center" width="595" bgcolor="white" class="main">
<tr>
<td class="main-td">



<table width="100%" class="header">
<tr>
<td class="logo">

<img src="https://uploads.intercom-mail-200.com/i/o/16934682/6ede50ed7955ed6cb4c5cf3b/File1485367305026" width="165" height="34" class="featured">

</td>
</tr>
</table>



<table width="100%" class="content">
<tr>
<td class="content-td">

{Content}
<br>
<a href="{BillingURL}" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 2; color: #FFFFFF; text-align: center; border-radius: 5px; display: inline-block; cursor: pointer; font-weight: normal; text-decoration: none; background: #4A90E2; padding-left: 15px; padding-right: 15px; border-color: #4A90E2; border-style: solid; border-width: 4px 0; letter-spacing: 0px;" target="_blank">Update Now</a>
</p>

<p>Thanks so much!</p>

<p>Kaegan Donnelly<br>Customer Happiness at Baremetrics</p>

</td>
</tr>
</table>

</td>
</tr>
</table>


</html>
Did this answer your question?