Customizing Header Content & Links - How To

I wrestled with a way to customize the content, not just the formatting, of the Support page header so customers could get back to my main web site. I could not find an existing topic on this, so I thought I'd share what I ended up with.

/* This gets the first row from the Table Header div section where your logo and Support link are by default */
var firstRow=document.getElementById("table_header").rows[0];

/* This specifies the position of the new cell in the current row. 1 will put your item after the logo. The value of -1 can also be used; which results in that the new cell will be inserted at the last position.*/
var firstCell=firstRow.insertCell(1);
firstCell.innerHTML="<a href=\" [ http://www.denvog.com/about\">About</a>";](http://www.denvog.com/about/%22%3EAbout%3C/a%3E%22;)

/* The ZenDesk divider lines are images in their own cell */
var secondCell=firstRow.insertCell(2);
secondCell.innerHTML="<img alt=\"\" id=\"logo-delimiter\" src=\" [ http://assets.zendesk.com/images/logo-delimiter.png?1341357546\">";](http://assets.zendesk.com/images/logo-delimiter.png?1341357546\%22%3E%22;)

This is working for me when viewed on Mac OS X using Safari, and on my iOS devices. Haven't tested on anything else yet.

PS - Don't forget to escape inline quotes you have in URL by putting a back slash in front of them. \"

1 comment

Please sign in to leave a comment.
Help them find what they're looking for
Create an online destination for 24/7 support with Zendesk