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>