The New Feedback Tab: an intro to CSS widgets Follow


Welcome to my very first Zendesk Tip of the Week! We launched a new more customizable Feedback Tab (v2.5) last week so I want to take this opportunity to show you some of the new things you can do with custom CSS. I will show you how to use the Inspector in your browser to find and test CSS on a website as well as how to change the position, dimensions, rotation, behavior, and other properties of the Feedback Tab with your own CSS. In the process I will show you how to optimize your Feedback Tab for more convenient viewing on mobile browsers with an absolute position declaration. If you've never done anything like this before don't worry, this is meant to be a friendly foray into new territory.

To be clear, this will not cover editing the appearance of the window that opens up, just the actual Tab itself, since we already have a great article on customizing the form here: Customizing the Feedback Tab with CSS .

If you haven't set up a v2.5 Feedback Tab yet, I recommend you have a look at our great Setting Up Your Feedback Tab Channel guide first. Once you have one installed on Zendesk Support or an external site you're ready to customize it, so come on back.

Note: If you do not know which version your Feedback Tab is it is probably NOT v2.5, please follow the linked instructions to install the latest version. Some of the CSS in this article will conflict with older versions.


There are three different places to set different settings for the Feedback Tab. For clarity, here is a quick overview:

General Settings

When you were setting up your Feedback Tab you were given a few options, a number of which directly impact the appearance of the Tab. The first page of options are the General Settings which includes whether the Tab should appear on the left or right of the screen, the background color of it, and the wording.

Advanced Settings/Custom CSS

You also had the option to click the Advanced Settings tab to select a custom image for the wording and include some custom CSS to style the content of the Feedback Tab iframe (reminder: instructions on that CSS are here ).

Even-More-Advanced Settings/Global CSS Widgets

That is all well and good, but what if you want to change something about the Feedback Tab itself? Maybe you want to move it down, or hide it a little. Maybe you think it is too tall. Maybe you use your Feedback Tab on a mobile site and want to make it stay put instead of staying fixed to the screen. Maybe you're just a control freak like me and you want to have the power to do whatever you want. I'm here to help.

So what is CSS anyway?

Many of you may recall copying and pasting some of it into a random field on your MySpace page to add flashy fonts and rad background pictures. As much as we may all want to forget that, it serves a great illustrative purpose: CSS is a very powerful tool for changing the look of a website. In fact, CSS (which stands for Cascading Style Sheets, more later) is responsible for almost all visual styling on websites today. It is a language that is used to add fonts, colors, dimensions, shapes, positions, gradients, images, behaviors, animations and more to HTML websites. It is very powerful and can be both incredibly valuable and incredibly destructive.

Before you start sticking your code in places it doesn't belong, let's learn a little!

Where is it?

Well, let's have a look! We're going to look INSIDE the website with what I like to call the Inspector Gadget ( Inspector Gadget Short ).

Note : I'm using Google Chrome for this but you can use recent versions of Safari as well, the gadget is the same. Firefox has similar if not more functionality with the Firebug plug-in if that is more your thing.

Navigate to the webpage with your Feedback Tab, right-click the tab itself, and click Inspect Element (pictured below).


Down the rabbit hole we go...


Take a look at the main window in the Inspector (pictured above). This is the source code. The first thing you should notice is this element:

<div id="zenbox_tab" href="#" style="display: block; background-color: black; border-color: black; left: -50px; " title="Support" class="ZenboxTabLeft" classname="ZenboxTabLeft">

<div id="feedback_tab_text">Support</div>


This is the Tab itself; it gets added to the page by the code snippet you added and... it has some CSS defined right inside it! Here is the CSS pulled out:

display: block;
background-color: black;†
left: -50px;

This is called an inline style or inline rule because it is right in the line of HTML that it styles, and thus it is the most specific of the three main types: inline, internal, and external. It only applies to this one element and will override any internal or external CSS rules already styling this element.

This looks familiar...

The background-color declaration takes on the color you specified in General Settings when you created the tab. This (and all the other inline style declarations) can only be changed by editing the Feedback Tab settings (instructions here: Editing your Feedback Tab ).

You should also take note of id="zenbox_tab" and class="ZenboxTabLeft" . Class and ID are used as selectors to help us apply CSS rules to bits of HTML; they are a lot like the numbers in a paint-by-number. Classes can apply to multiple elements though, while IDs can apply to just one. Types and states of elements can also be used as selectors. Often you must use combinations of selectors to style a specific element, particularly if it does not have a unique ID.

Now, have a look at the right side of the Inspector Gadget. Click 'Styles' to see the CSS rules that apply to the selected element (the zenbox_tab div).

You should see something like this:


The style rules are listed from top to bottom in order of specificity, with the inline styles at the top represented by the selector, followed by a rule applied only to elements with the ID zenbox_tab and the class ZenboxTabLeft with the selector #zenbox_tab.ZenboxTabLeft , the rule applied to the ID zenbox_tab with the selector #zenbox_tab , and the global rule that is applied to all elements with the selector * . Note that any declarations with a strikethrough have been invalidated for one reason or another. Typically they are overwritten by a more specific rule (as in the case of the global margin and padding rules at the bottom) or invalidated because the browser does not accept the syntax (as in the case of the -moz-transform rule, which is unique to Mozilla browsers).

Each rule follows the same simple syntax:
selector {
property: value;
property: value;
property: value;

Customize It!

Now let's have a little fun. Double click on the value for background-color , start typing the name of a color and it should auto-suggest available named colors for you to choose from. You can also enter hex or even RGB values here using syntax like rgb(255,255,255). Uncheck a box to invalidate a line and see what happens. Everything you do here is completely safe because it is not changing the actual code, just toying with it. Hit refresh on your browser to reload the actual code.

If you click after the last declaration in a rule you can even add a new declaration entirely.

This is one of the great powers of the Inspector: you can test and play all you like and see real time changes on ANY website. I encourage anyone who wants to learn more about CSS to spend some time inspecting and editing other people's sites like we are now.

Next on the list are two rules from the stylesheet zenbox.css: number one defining the height, width, position, and more, and number 24 setting the alignment to the left side and rotating the Tab accordingly (remember class="ZenboxTabLeft" as set in the General Settings?).

Try changing the font... find 'font-family' and click on the names of the fonts to delete them and add your own. Try something common like Times, Georgia or monospace and watch the tab change.

Screen_Shot_2012-07-26_at_10.18.41_AM.png Screen_Shot_2012-07-26_at_10.19.01_AM.png

Try changing the border by modifying the three specified properties: solid 2px and white.

Screen_Shot_2012-07-26_at_10.27.35_AM.png Screen_Shot_2012-07-26_at_10.26.10_AM.png

Try changing the position: fixed; declaration to position: absolute; and watch the Tab stay planted to the page when you scroll instead of being fixed to the window. 'Fixed' positions the element relative to the browser window; 'absolute' positions the element relative to the page. ( Note : if you have many mobile/tablet visitors to your page this will prevent the Tab from staying fixed to the window and blocking other elements when they zoom in, as on iOS 5+.)

Try changing the top: 23%; value and watch the Tab move up and down. Instead of percent (which changes the position based on the window size) you can also specify pixel dimensions by using a fixed value like 50px .

Try changing the height and width, but notice that they seem to be backwards. This is because the Tab is created horizontal and then rotated -90 degrees to be vertical. Keep this in mind when you are changing dimensions and position because it can affect your values quite a bit.

Screen_Shot_2012-07-26_at_10.41.10_AM.png Screen_Shot_2012-07-26_at_10.42.25_AM.png

Try changing the rotation in the #zenbox_tab.ZenboxTabLeft rule. To see what happens you only need to modify the one declaration that is not crossed off (invalidated): if you are using Chrome or Safari this will be the -webkit declaration but if you are using Firefox it will be -moz . When you actually want to make changes you will need to override each declaration individually with your own declaration or else it will appear different to users on different browsers. The simple transform declaration is for HTML5 compatibility. Unfortunately most browsers aren't fully up to speed so they need their own special declarations.

Screen_Shot_2012-07-26_at_10.47.54_AM.png Screen_Shot_2012-07-26_at_10.48.17_AM.png

Note : In this example I also changed the inline left: -50px declaration to left: 0px to prevent it from getting pushed off the page now that it is much wider.

Try changing the font size, weight, and color. First you'll need to select the <div id="feedback_tab_text">Support</div> element and find the #zenbox_tab #feedback_tab_text rule. Note that the font-size is declared in em (Wikipedia link), but you can declare it in px (pixels) or pt (points) as well.

Screen_Shot_2012-07-26_at_11.10.58_AM.png Screen_Shot_2012-07-26_at_11.12.51_AM.png

Digging Deeper: Zenbox.css

Now, click the zenbox.css:1 link (pictured above) in the Inspector to see the entire zenbox.css stylesheet. This will take you from the Elements to the Resources tab of the Inspector.


This one stylesheet defines all of the default styles for the Feedback Tab itself, including the window that opens when you click the tab and the transparency that covers the page in the background.

You cannot edit it here but it is extremely useful for understanding the selectors and syntax so we can write our own custom CSS to cascade over it (overrule it). You can even copy and paste it into a simple text editor as a template for your Global CSS widget. You'll just need to change the rules you want to change and delete the rules you want to leave alone before adding it to your site.

Click the Feedback Tab to open the window and Inspect that to try styling the other elements with rules in the zenbox.css stylesheet like the dimensions on #zenbox_body and the opacity of #zenbox_scrim .

!Important: C is for Cascade

You can create new rules that don't already exist without any issue this way, but any rules that do exist already will need to be forcibly overruled. This is because our CSS widget comes before the zenbox.css file in the order of loading, so the CSS widget says one thing and then the zenbox.css file cascades over it. This isn't a problem when testing in the Inspector because your CSS is at the end of the cascade but it won't work if you past the same code into a widget. But never fear, the !important declaration is here! By simply appending !important you can make your declarations launch a little cascade coup d'etat and topple the default styles.

position: absolute !important;
top: 10% !important;

Saving Changes

Once you've played around in the inspector and figured out some changes you want to make, you need to write them into CSS rules. Use a simple text editor that can save without formatting, like TextEdit on Mac or Notepad on Windows. If you are using the zenbox.css sheet as a template, be sure to delete any rules you don't want to change.

Now nothing stands in your way! When you are done, open your Zendesk and click Settings > Extensions > Add widget > Global CSS . Copy and paste your CSS into the widget, and select 'Anyone...' from the drop-down before saving.

On an external site you should paste it between <style></style> tags in the header, or in the primary CSS file. If you are using a CMS like Joomla or Wordpress this may be one of your template CSS files.


Congratulations! You can now successfully write CSS code. As a little reward I wanted to share the sample CSS code I wrote with you so you can see a working example. This is my Zendesk Support test account:

Note that the tab is pushed off to the left until you hover over it causing it to pop out to its normal position. Can you figure out how I did that and make something similar? Also note that it stays in place as I scroll, this is thanks to position: absolute.

/* this is a CSS comment */

#zenbox_tab #feedback_tab_text {
font-size: 1.8em !important;
margin: 15px auto !important;
color: mediumseagreen !important;

/* this rotates the tab 180 degrees from its default rotation of -90 */
#zenbox_tab.ZenboxTabLeft {
-webkit-transform: rotate(90deg) !important;
-moz-transform: rotate(90deg) !important;
-o-transform: rotate(90deg) !important;
-ms-transform: rotate(90deg) !important;
transform: rotate(90deg) !important;

/* this changes the border and positioning of the Tab */
#zenbox_tab {
border: solid 4px #B4F0B6 !important;
position: absolute !important;
top: 80% !important;
left: -60px !important;

/* the secret sauce */
#zenbox_tab:hover {
left:-40px !important;

Happy coding!

Updated 8/21/2012

Custom Background Image

The ability to add a custom background image to the Feedback Tab has been removed. I developed this bit of CSS so you can still set one if you'd like.

To use a custom image with the new Feedback Tab, first, you'll need to make an image that is 130px x 60px and upload it somewhere publicly accessible. This may be your website or an image or file-sharing service that lets you copy public links to the file itself.

Then add the following code to a global CSS widget ('Settings' > 'Extensions' > 'Add Widget' > 'CSS Widget') to hide the text, apply your image, and rotate it properly (replace with your URL):

#feedback_tab_text {
display: none;
#zenbox_tab {
background-image: url(;
background-color: transparent !important;
background-position: left !important;

That should do the trick!

Have more questions? Submit a request


  • 0

    Thanks, but the default feedback tab css layout doesn't work fine in IE7 and IE8.

  • 0

    I have the same probrem in IE8.
    How should I fix this?


  • 0

    can we and a contact form to a webpage and not use the tab?

  • 0

    Hey Matthew: 

    The Feedback tab is completely optional. You can absolutely build your own contact form, but you'll need to either email the entry results directly to Zendesk or use the API to send that data and populate specific ticket fields based on form entry selections.

  • 0

    Hi Zendesk,

    We want to apply different CSS to our homepage than the rest of the pages on our Zendesk for customization purposes. How would we go about this, since the Global CSS widget is applied site-wide? Is there a widget I'm missing?

    Thanks much in advance.


  • 0

    Hey Ryan: 

    I'm afraid we don't have any official documentation or guidelines for this. The CSS widgets you'll create will apply to your entire web portal. You can style various elements separately, though most of the main ones are shared across all pages. We'll be making a lot of changes in the new help center, which is currently in development.

  • 0

    Thanks for your fast reply Justin.

    If this is the case, are the following Zendesk sites using a combination of CSS and Java to achieve their custom homepages?


  • 0

    Yes, and I should have mentioned that. You can accomplish quite a bit with JavaScript, though it's difficult for us to support customizations to that level. Here are some more cool examples of custom Zendesk portals:

  • 0

    Hi Justin,

    Thanks again for the fast response. Is there a timeline for any of the "new help center" functionalities? Or some idea of what those functionalities will be? I understand that's touchy territory and a question you likely can't answer, but we'd like to avoid spending a ton of money on a custom Java/CSS customization if there's going to be brand new custom functionalities on the horizon.

    Would you be able to email me offline of this forum topic? I'd love to message with you more about this. Thanks a lot again.



  • 0

    Hey Ryan: 

    I don't have any groundbreaking specifics to share at the moment, as the new help center is still very new and still very in development. You'll have a bit more control over styling and we've made the process easier, as lots of CSS/JavaScript widgets get confusing and cumbersome to manage. If you're interested in participating in the beta, you can read a bit more about the new portal and sign-up here:

  • 0

    Hello, in the example you change left:-50px; to 0px, but in reality it doesn't work. {

    1. display: block;
    2. background-color: rgb(243, 243, 243);
    3. left: -45px;


    In IE10 left:-45px for some reason doesn't work. Can you suggest how to change that left from -45px to 0?

  • 0


    Is there a way to shoe this feedback tab and pop-up window in different languages, not only the default one?


  • 0

    I've been trying to change the style of the Support tab on an external website and have added some css in the style tags on the page e.g.

    #zenbox_tab {

            background-color: blueviolet;

            height: 50px;

            right: -70px;


    but my css always gets overridden by the inline styles or by zenbox.css. Can anyone help?

  • 0

    Sylvain - Each Feedback Tab is restricted to one language, but you can create multiple Feedback Tabs in all the languages you like. The idea is that you can hide/show them depending on the language the user is viewing (e.g. a German tab on the German page, an Italian tab on an Italian page, etc.)

    James - It looks to me like you just need to add the !important declaration. Try it like this:

    #zenbox_tab {

            background-color: blueviolet !important;

            height: 50px !important;

            right: -70px !important;


    That will make your code jump to the front of the line :)

  • 0

    I have been working on customizing the Feedback tab for my site, more so the window that pops up once the tab is clicked.  It appears to have some opacity set or something and my top navigation links seem to show through.  If I hover over the top of the window then it activates the drop-down menus of my navigation!  How might I go about resolving this? 

  • 0

    Hi all,

    Can anybody let me know the css code to add Under Advanced customization in order to adjust the width of the help tab and/or change the position of the text (I'd like to move the text closed to the left side of the tab).

    I tried to add CSS but it has no effect at all on my help tab...

    Thanks in advance,

  • 0

    Hi Jeremie,

    To change the width of the tab or change the position of the text you will actually need to use a Global CSS widget, **not **the Advanced customization section. There is instruction above on how to change the width, just make sure you put your changes in a widget as described under the 'Saving Changes' title.

    I hope that helps!

  • 0

    Hi Joe,

    Thanks but how to access this Global CSS widget / where to find it?

    Sorry if I missed something....


  • 0


    To add a global CSS widget, click the Manage (gear) icon in the sidebar, then scroll down and click Extensions. Click Add Widget (you might need to scroll right to see it), then click Global CSS.

    If you're using Zendesk Classic, select Settings > Extensions, then Add Widget, then Global CSS.


    Can you offer any advice to Billy above?

  • 0


    This sounds like something we'll need to troubleshoot on an individual basis with your site. Could you send a ticket in to so a member of our team can help you directly? Please include the URL of the site your Tab is installed on so we can have a look.


  • 0

    got it! thanks much

  • 0

    Hi there, bit of a newbie here, could you please give the css code to move the widget to the bottom of the screen instead of the side? So i guess it would need to be rotated and moved to the bottom instead of right. Thanks in advance.

  • 0

    Hey Iain,

    You could try asking in our CSS Cookbook forum, you might be able to catch an experienced coder there who could write this up for you quickly! You can find the CSS Cookbook forum here:

  • 0

    Hi Everyone,

    Love the Feedback Tab, but currently it is asking for name and email on requests. We currently use SSO for our Zendesk people, so it would be really helpful to be able to use this tab with SSO.

    Any ideas on how to make that work?



  • 0


    Unfortunately, this is not presently possible.  This is always subject to change, but nothing is firmly planned for this, as of now.  I'll pass this feedback along, though - thanks!  Apologies for any inconvenience this might cause. 

  • 0

    @adam Thanks for the feedback. It would be a really great feature, as I believe many folks would love to use this along with SSO functionality. There are some hackerish ways to do it (auto fill the name and email fields and hide the blanks with javascript) but that seems like overkill :)

    I will probably just go ahead and make my own tab/popup that hits the API. Once I get it stable, I will try to share that with the community.  Let me know if you guys end up officially supporting a tab that does this!


  • 0

    I want to hide the tab on print media, I am trying 

    #zenbox_tab {

    display: none;


    on Print media css but it seems like #zenbox_tab has inline css which is overriding it. is there any other solution you have for this case. 


  • 0

    @Abhishek - We're following up via ticket - We'll be in touch shortly. 

  • 0

    This is important to us, too.  Please let us know when you have a fix in place.

  • 0

    @Jpriebe - in my print my print media css I am doing 

    #zenbox_tab {

        border: solid 0px;

        cursor: pointer;

        position: fixed;

        top: 23%;

        z-index: 1;

        opacity: 0;



    Hope this helps.


Powered by Zendesk