Forums/Documentation/CSS cookbook (Zendesk Classic)

Customizing the Feedback Tab with CSS

Anton de Young
posted this on February 15, 2012 11:59

You customize the look of the Feedback Tab by adding CSS code to the tab via the Advanced Customizations tab (Settings > Channels > Feedback Tab > Advanced Customizations). You can change both the words that appear within the Feedback Tab and the colors and branding. Changing the words is described in Customizing the text in your Feedback Tabs.

For more information about getting started with CSS customization in Zendesk, see How to brand your Web portal.

Before

feedback_tab_default1.png

feedback_tab_default2.png

After

feedback_tab_new1.png

feedback_tab_new2.png

CSS code

These examples show you how to customize most of the elements in the Feedback Tab. In addition to these color changes you can also change font sizes and styles, element positioning, borders, and so on using the standard CSS properties.

The Feedback Tab CSS code needs to be added as an advanced customization setting in Settings > Channels > Feedback Tab > Advanced Customizations, not via a custom CSS widget.

/* Set the background color of the outermost container of the Feedback Tab window */
#wrapper {
	background-color: #6F7866; /* dark gray */
}

/* Set the background color of first container within the window */
#dropbox {
	background-color: #F1F2E8; /*light gray */
}

/* Set the background and border of the form container */
.view .body {
	background-color: #FFFFE1; /* pale yellow */ 
	border: 1px solid #F1F2E8; /*light gray */
}

/* Set the color of form title text */
	#dropbox > header h1 {
	color: #6F7866; /* dark gray */
}

/* Set the color and font-weight of the 'Would you like to...' heading text */
h2 {
	color: #6F7866; /* dark gray */
	font-weight: normal;
}

/* Set the background color of the container for the chat and ticket panels */
#chat_or_submit_ticket_prompt .options  {
	background-color: #FFFFE1; /* pale yellow */
}

/* Set the background, border, and text color of the chat and ticket panels */
#chat_or_submit_ticket_prompt .options a {
	color: #6F7866; /* dark gray */
	background-color: #FFCD72; /* pale orange */
	border: 2px solid #FF8800; /* orange */
}

/* Set the text color of the labels on the form */
label {
	color: #FF8800; /* orange */
}

/* Set the background and border colors of the input fields in the form */
input, select, textarea {
	background-color: #FFFFFF; /* white */
	border: 1px solid #DDD; /* default light gray */
}

/* Set the text color of the 'Powered by Zendesk' link */
.view footer .branding a, .view footer .branding a:visited {   
	color: #6F7866; /* dark gray */
} 

/* Set the background, border, and text color 
 * of the flash warning at the top of the form. 
 * This is used, for example, to inform users
 * that agents are unavailable to chat. */
.flash .warn {
	background: #FFCD72; /* pale orange */
	border-color: #FF8800;
	color: #6F7866; /* dark gray */
}

If you want to hide the 'Powered by Zendesk' link, which is in the footer, use this code:

/* Hide 'Powered by Zendesk' */
.view footer .branding {
display: none;
}
 

Comments

User photo
J.R. Miller
einstruction

Not sure if I'm doing something wrong, but when I attempt to hide the "Powered by Zendesk" text, it also hides the "None of these are helpful - get in touch" button.

This means that if my feedback tab finds any proposed solutions, but a customer wishes to speak with an agent, it's not possible. (However, if no solution is found in the forums, it redirects them to the Chat/Create Ticket split screen window.)

Is there a workaround for this?

March 22, 2012 14:57
User photo
Anton de Young
Zendesk

J.R.

Give this code a try: 

/* Hide 'Powered by Zendesk' */
.view footer .branding {
display: none;
}

March 22, 2012 15:29
User photo
J.R. Miller
einstruction

That did the trick - Thank you for the fast reply Anton!

March 23, 2012 07:28
User photo
Dushyant Thakar

how can i change the chat image & support request image? I found the image is displayed from https://assets.zendesk.com/external/zenbox/v2.0/chat.png?1334036545. Can any one help me to change this icon? 

April 10, 2012 02:49
User photo
Troy Skillen - BuzzNumbers
buzznumbers

I'm also wondering the same thing as Dushyant...  Currently the only icons I have that aren't correctly branded are the "chat" and "request" icons which remain their default green. As our branding palette is light blue/dark blue/white, this sticks out like a sore thumb... Any one able to assist us in changing these as I've found the instructions here really helpful and simple otherwise..

Cheers! 

July 16, 2012 09:46
User photo
Justin Graves
ensign

I agree.  I'd like to change the icons or at least coordinate the colors with my site.

July 17, 2012 01:01
User photo
Ben
Zendesk

All,

I really like the idea of customizing the icons as well. Unfortunately it's not a current feature or CSS customizable option right now. Sorry about that! However, we are updating the functionality of the Feedback Tab all the time and are specifically looking into these kinds of options in the future. I recommend posting this as an idea on our Feature Request forums so we can formally track the demand as well as specify a location for roadmap updates as they occur:

https://support.zendesk.com/forums/1848

Thanks in advance for the feedback!

Ben

July 23, 2012 12:04
User photo
Peter Jerling
Salesachiever

Is it possible yet to change those green images to a different colour?

September 19, 2012 13:26
User photo
Eugene PanRudkevich

Is there a way to make the tab into a form on the website so it's always visible?

October 02, 2012 09:12
User photo
Adam L.
Zendesk

@Peter, Not yet, apologies for the delay in response, and for any inconvenience that might cause you.

@Eugene - Yes you can! This is explained here: https://support.zendesk.com/entries/20990726-setting-up-your-feedba...

 

October 02, 2012 09:22
User photo
Joseph Ruvel
realwinelists

Can you reorder the items on the feedback tab using CSS?  I know you can order custom fields but we really want to put a custom field at or near the top above the detail box. Don't want them writing a bunch of information that they already answered in a dropdown.

 

Thanks,

Joe

October 04, 2012 09:57
User photo
Justin Seymour
Zendesk

Hey Joe: 

To my knowledge, it is not possible to reorder those items via CSS. Sorry! 

October 08, 2012 06:47
User photo
thobu

is there a css recipe to shrink the window to say 460px width if someone on an iPhone clicks the tab?

October 21, 2012 03:35
User photo
Justin Seymour
Zendesk

Not that I know of, Thomas. I'm also not sure if it's possible to resize the tab in that manner. Maybe somebody else has some input! 

October 22, 2012 08:04
User photo
thobu

Hmm, I can shrink the width with the inspector directly in the browser. But if I add the class to the advanced css it's not accepted. Maybe I'm using the wrong classes and IDs

October 22, 2012 09:01
User photo
Johan Nordanfors
dicentia

I am trying to figure out the same thing. How to resize the popup feedback form so that it looks nice on a mobile device?

November 14, 2012 03:37
User photo
Justin Seymour
Zendesk

Hey folks: 

I've created a ticket for your questions; stand-by for an update! 

November 19, 2012 05:34
User photo
James Dietrich
Zendesk

@thobu: I suspect that the changes you're making aren't taking effect because unlike the CSS in the instructions - which just applies to changes within the Feedback iframe - you actually need to apply CSS changes to divs wrapping the #zenbox_body iframe in a Global CSS widget (if you're launching the Feedback window from a Zendesk web portal) or directly to the webpage from which you're launching the window.

@Jordan: You'll likely need to change the #zenbox_container, #zenbox_body, and #zendesk_header divs to shrink the size of the container surrounding iframe - again either in a Global CSS widget or on the page on which you've inserted the feedback tab. Once you've adjusted the divs wrapping the iframe, you can change the appearance of the elements within the iframe via Settings > Channels > Feedback Tab > Advanced Customizations as suggested in the instructions above.



November 19, 2012 15:40
User photo
Zendesk
intelligencebankhelp

Regarding the CSS part that hides the Powered by Zendesk element on the popup. It wasn't working when I added it at the end of my css, but when I moved it to the start of the other code provided, it worked fine for some reason. Just an FYI in case other users had the same issue.

November 26, 2012 16:07
User photo
Billy Willis

How might I go about changing the text on the "Submit" button of the Feedback Tab Form?

March 08, 2013 08:05
User photo
Jennifer Rowe
Zendesk

Hi Billy,

sorry for the delay. One of our agents followed up with you in a ticket. But for others, here's some info.

This article may help, if you want to re-name the 'submit' button itself:

https://support.zendesk.com/entries/20990726-setting-up-your-feedback-tab-channel#topic_mpw_tkf_ff

April 12, 2013 08:33
User photo
Killit

Is it possible to change colour button "Submit" and text "Submit" to a different colour?

August 07, 2013 05:23
User photo
Dr. J
Zendesk

@Killit You bet! - The great Link Jennifer Posted Above also has information on how to change the color, and text of the Submit button.

The easiest way is to create a graphic you’d like to use in place, and follow the directions here to place it in the feedback tab. :)

August 13, 2013 15:59
User photo
Vans
splashtop2

Is it possible to hide "Submit a support request" option in feedback tab?

August 14, 2013 20:35
User photo
Dr. J
Zendesk

@Vans - That’s a very interesting question. You could hide the submit portion with CSS, but I’m struggling to see your use case.

The feedback tab is essentially a quick way to connect your customers to you via tickets, chat, or deflect requests via the web portal. By hiding that portion, you’re going end up with a big blob of open space.

If you’d just like to link the chat portion, I’d recommend using the information from this article that describes Using a hyperlink instead of a tab, and linking directly to the chat portion.

August 15, 2013 08:08
User photo
Nicolas Grunfeld

any update on how to resize the popup feedback form so that it looks nice on a mobile device?

September 05, 2013 08:17
User photo
Bob Novak
Zendesk

Hi Nicolas,

Did you see James' post earlier in this thread? He describes in general the CSS changes that should make this work. Your other option is instead of modifying the Feedback Tab in Zendesk you can build your own and completely customize it to your needs, then connect this custom form to Zendesk through the API. You can learn more about this process here: https://support.zendesk.com/entries/21562288-creating-a-custom-html...

September 05, 2013 13:45
User photo
Bill Cameron

Hi Bob,

I would like to make the feedback tab and form look good on a mobile device, but James has referred to a solution which no longer exists - widgets. The alternative solution you gave is way over my head.

Is there another way we can do this?

Would zendesk just consider having "enable mobile feedback tab and popup" as an option us users can select? I think nearly every single user of the feedback tab and form would be most grateful.

 

September 22, 2013 20:27
User photo
Avi Warner
Zendesk

@Bill, we're working on better ways to integrate the Feedback Tab into Help Center, and even now, you can modify the Feedback Tab code and throw it into your HC template to accomplish James' solution. As far as a new method all together, that's not a bad idea, would you consider posting it in our Product Feedback forum (https://support.zendesk.com/forums/1848-Product-Feedback)?

October 08, 2013 15:35
User photo
Giselle Montaño
intersel

Need help! I created a feedback tab for my website, and decide to show customized fields to users, it means that it takes the fields that I aleready have done, BUUTT when i test it, it doesn´t validate the field "serial number", even do the field was ruled to accept all characters... does anyone know what the problems seems to be?

October 23, 2013 10:54
User photo
Emily
Zendesk

Hi Giselle,

I've created a support ticket for you so that we can look at your setup to troubleshoot further. I'll see you in that ticket shortly!

October 23, 2013 12:33
User photo
Huxley Dias

Olá, como faço para customizar a tela do atendimento via Chat ?

November 14, 2013 12:15
User photo
Alais Elena
Zendesk

Olá Huxley,

Se não me engano respondi um ticket sua sobre este mesmo assunto hoje. Vamos continuar nosso atendimento por lá e assim posso esclarecer suas dúvidas.

 

 

 

November 15, 2013 09:58
User photo
Andrew J
BizStudio NZ

I am wanting to add a radius to the border of the tab (this tutorial seems to focus on the popup box)

Can anyone offer some ideas here?  If I add this code... no result

#zenbox_tab {
border-radius: border-radius33px 2px 2px 33px;
}
November 19, 2013 14:16
User photo
Roger Wheatley
rogerwheatley

Can anyone tell me why no custom CSS whatsoever is being reflected in my Zendesk tab?

When I navigate to: Channels/Feedback Tabs

then select "Advanced Customization".

When I input the following example CSS code to change the web portal tab element:

 

#feedback_tab_text {
display: none;
}
#zenbox_tab {
background-image: url(http://myurl.com/feedbackimage.png);
background-color: transparent !important;
background-position: left !important;

(Note: I substitute the correct image URL in the above example).

Nothing happens and the code is not included when I click the "Preview and Grab code snippet" button.

I might add, that button does not provide a preview either.

Can anyone guide me?

I've tried this resources, to no avail:

https://support.zendesk.com/entries/20990726-setting-up-your-feedback-tab-channel#topic_mpw_tkf_ff

Thank you.

January 04, 2014 10:19
User photo
Ben Schutz
fairfaxomg

With new laws in Australia, we now need to deliver a privacy statement on the form. I can't figure out a way to do this yet. I have been trying to use custom css to select and insert content as needed but it's not being picked up. What I'm adding to the custom css is:

.privacy_policy:before{
    content:"We use your data for such and such. Read our full ";
}

and what that should do is:

Is there any other way to acheive this result?

March 24, 2014 17:45
User photo
Ben Schutz
fairfaxomg

OK, the image I pasted in the comment didn't display, so you'll have to imagine what it looks like.

March 24, 2014 17:46