Forums/Community/Support tips & notes

Adding custom buttons to your web portal home page

Max McCal
posted this on August 10, 2012 11:47

Your Zendesk home page is the first thing everyone sees when they come looking for support. Out of the box, there’s almost nothing here: a simple knowledge base search bar, some menu items, and a bit of default welcome text. It’s not the most welcoming site, but it can definitely be improved upon.

One question I’ve been asked before is how to add some custom buttons to the home page. Obviously using our CSS Cookbook, you’re able to add a lot of customization to your page, matching the style of your own website, but without the ability to create new HTML, you can’t really match your home page’s buttons. Certainly some Javascript customizations can help with that, but this tutorial will show you a simpler way.

There are three things we’ll need to do here. First, we’re going to activate an option in your menus, then create a little bit of HTML, then add a CSS widget (if necessary).

First, if you take a look at the Settings > Channels > Web Portal menu, you will see the option Introductory text on portal home page. This is the simple step. Just make sure that’s checked, as in the image.

Intro_Text.png

Next up, return to your home page. You’ve probably already seen the intro text, but if you haven’t, it’s one of the topmost sections. It will either be directly below your menu bar (the one that says Home, Forums, Manage, and Settings) or below your agent dashboard if you’ve enabled that feature.

Notice that in the top right corner of the widget, it says Edit in green text. Click that link to open up your text box. Here’s what makes this text box so powerful: you can add HTML, and it will read any of it. That means you can format text, create inline links, and, which is what we’re talking about now, create some formatted buttons.

Here’s the code I created (I’m not an HTML master, but it gets the result I was looking for):

HTML.png

You’ll notice a few things. First, I did it using tables. This was an easy way to break up the sections into individual units. That will become important when we look at the CSS. Second, there are some “id” values added in here. I’m also going to use those as selectors when I create the CSS widget, allowing me to style these buttons without worrying about interfering with the rest of the page. Lastly, notice that I removed the title from this. It makes the buttons stand out more in the final version, but if you want a title, you can add one in. The title field doesn't accept HTML, however, so you have to customize the styles for that page separately.

CSS.png

And that’s the CSS widget. Note how the styling hangs on the “button” ID. The table comes into play because it allowed me to create separate borders around each link, creating the appearance of real buttons (especially when combined with the shadows). These buttons now offer a series of links back to my company’s web site, allowing me to present some useful, stylized content, right on the home page.

Final_buttons.png

For further customization, it’s really easy to add images using CSS and turn those into buttons. You can bring in your company’s existing images this way, and literally use the same button icons as your own site.

So, I hope this offers you some new ideas to break out of the basic home page, and maybe integrate your Zendesk and your home page even further.