Customizing the Feedback Tab dialog boxes with CSS

You can use CSS to customize the look of the dialog boxes that appear after users click the Feedback Tab or choose to submit a ticket. Watch this short video.

Designing the Feedback Tab (01:37)

To customize the tab element itself (the tab that users click to open the dialog box), see Customizing the tab element (Web portal).

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

Before

After

CSS code

These examples show you how to customize most of the elements in the Feedback Tab dialog boxes. 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.

Add the CSS in the Custom CSS box in Admin > Channels > Feedback Tab > Advanced Customizations.

/* 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 {   
	display: none;
} 
Have more questions? Submit a request

Comments

  • Avatar
    J.R. Miller

    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?

  • Avatar
    Anton de Young

    J.R.

    Give this code a try: 

    /* Hide 'Powered by Zendesk' */

    .view footer .branding {

    display: none;

    }

  • Avatar
    J.R. Miller

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

  • Avatar
    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? 

  • Avatar
    Troy Skillen - 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! 

  • Avatar
    Justin Graves

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

  • Avatar
    Ben

    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

  • Avatar
    Peter Jerling

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

  • Avatar
    Eugene PanRudkevich

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

  • Avatar
    Adam L.

    @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-feedback-tab-channel#topic\_rkz\_ykf\_ff

     

  • Avatar
    Joseph Ruvel

    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

  • Avatar
    Justin

    Hey Joe: 

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

  • Avatar
    thobu

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

  • Avatar
    Justin

    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! 

  • Avatar
    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

  • Avatar
    Johan Nordanfors

    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?

  • Avatar
    Justin

    Hey folks: 

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

  • Avatar
    James Dietrich

    @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.

  • Avatar
    Zendesk

    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.

  • Avatar
    Billy Willis

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

  • Avatar
    Jennifer Rowe

    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](20990726-setting-up-your-feedback-tab-channel#topic_mpw_tkf_ff)

  • Avatar
    Killit

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

  • Avatar
    Dr. J

    @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. :)

  • Avatar
    Vans

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

  • Avatar
    Dr. J

    @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.

  • Avatar
    Nicolas Grunfeld

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

  • Avatar
    Bob Novak

    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-form-for-ticket-submission

  • Avatar
    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.

     

  • Avatar
    Avi Warner

    @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)?

  • Avatar
    Giselle Montaño

    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?

Please sign in to leave a comment.