How to add a custom footer to CustomerHub

I’ve new to CustomerHub and it’s fairly restrictive, but they do allow you to customize the CSS and Javascript for the site.  There’s no way to change the footer, except using some javascript to re-write the footer.  To prevent the page from initially showing “Powered by CustomerHub”, I added some CSS to the footer class to hide it, then Javascript sets the footer to display:inline so it appears with your footer.

Go to Settings > Themes  then click the “stylesheet” tab.  Find the footer class and change it to this:

#footer {
text-align: center;
font-size:11px;
display: none;
}

Next, click on the “javascript” tab and add this code

onload=function()
{
var txt=document.getElementById(“footer”)
txt.innerHTML=”© Copyright 2013 My Company  All rights reserved.”;
txt.style.display = “inline”;
}

If you want to add HTML to the innerHTML you need to use the back slash to escape any double quotes.  Like this:

txt.innerHTML=”&copy; Copyright 2013 <span style=\”font-weight:bold;color:#000;\”>My Company</span> All rights reserved.”;

Notice the double quotes are escaped with the backslash to  \”

After you make these changes, click the green Save button at the bottom of the page.  Now your footer will dynamically be written to your CustomerHub page

You can call an external footer with dynamic text using an iframe like this:

onload=function()
{
var txt=document.getElementById(“footer”)
txt.innerHTML=”<iframe src=\”http://www.mydomain.com/footer.php\” width=\”100%\” height=\”170\” frameborder=\”0\” scrolling=\”no\” target=\”_blank\”></iframe>”;
txt.style.display = “inline”;
}

This will call the page http://www.mydomain.com/footer.php and load the contents into the iframe.  Now you can keep your footer up to date in the external file on your own web site and CustomerHub will call it for each page load.