Custom Branding Settings

The "Custom Branding" settings allow you to "rebrand" the system access points for your customers.

This way, your customers will only ever see your brand.  The access points are account creation, login, and SMTP/API access.

Login

There are two ways to provide custom branded browser based access points. The first way uses a CNAME record to whitelabel the URL of the login screen and allows you to set your own logo.  This video shows you how:

 

The second way to offer access via the browser is by rendering the entire User Interface on your own website.  If you have a hosted domain with a website, using a few lines of Javascript and HTML, you can easily render the UI on your own /account page.  This video shows you how:

 

The obvious benefit to this approach, is that you can easily build your own menu and footer around the container div.  Here are the scripts used in the video:


<!DOCTYPE html>
<html>
<head>

    <!-- Web Page Title -->
    <title>Your Awesome Mail Account</title>

    <!-- Dependencies -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js" integrity="sha256-JklDYODbg0X+8sPiKkcFURb5z7RvlNMIaE3RA2z97vw=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" type="text/css" />
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <link rel="stylesheet" href="https://emailinterface.s3.amazonaws.com/1.0/emailinterface.css" type="text/css" />
    <script type="text/javascript" src="https://emailinterface.s3.amazonaws.com/1.0/emailinterface.js"></script>
</head>

<body style="padding:20px;">

    <!-- Your Logo -->
    <img src="http://awesomemail.email/awesomemail_logo.png" style="margin:auto;display:block;" />
    <br /><br />

    <!-- UI Container / This is where the UI will render -->
    <div id="mycontainer"></div>

    <!-- Javascript To Render UI -->
    <script type="text/javascript">
        ee.init("mycontainer", true);
        ee.api.path = "https://api.elasticemail.com";
    </script>

</body>
</html>

Account Creation

Your customer's accounts are also known as "sub accounts".  And there are two ways to create sub accounts.   In your main account, go to your Sub Account Management Screen and manually create a sub account the sub account.

This guide goes into more detail on sub accounts and how to create and manage them from within the UI.

Using Sub Accounts

The second method for creating sub accounts is by using the "create sub account" API call /account/addsubaccount

https://api.elasticemail.com/public/help#Account_AddSubAccount

This method is more advanced and will require a custom integration on your own website.  However, it will allow you to automate the account creation process for your customers.

SMTP/API

Whitelabeling the SMTP/API access points is fairly easy.  Just create two new CNAME records in your domain's DNS.  We recommend using the 'smtp' and 'smtp25' and point them at smtp.elasticemail.com and smtp25.elasticemail.com respectively.  This video will show you how:

 

Additionally, there are a couple of ways for customers to be redirected back to your website once they have access and are logged in. If your website offers a payment gateway or support portal, then you can whitelabel certain links within the UI.