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.

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

Comments

  • 0

    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?

  • 0

    J.R.

    Give this code a try: 

    /* Hide 'Powered by Zendesk' */

    .view footer .branding {

    display: none;

    }

  • 0

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

  • 0

    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? 

  • 0

    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! 

  • 0

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

  • 0

    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

  • 0

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

  • 0

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

  • 0

    @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

     

  • 0

    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

  • 0

    Hey Joe: 

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

  • 0

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

  • 0

    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! 

  • 0

    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

  • 0

    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?

  • 0

    Hey folks: 

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

  • 0

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

  • 0

    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.

  • 0

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

  • 0

    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

  • 0

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

  • 0

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

  • 0

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

  • 0

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

  • 0

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

  • 0

    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

  • 0

    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.

     

  • 0

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

  • 0

    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?

Powered by Zendesk