Setting up your Feedback Tab channel

Important: The Feedback Tab has been replaced by the Web Widget. See Using the Web Widget to embed customer service in your website.

The Feedback Tab is essentially a small and portable version of the Help Center or Web portal that you can embed in a website hosted by a basic web hosting provider or in your Zendesk.

The following topics are covered in this article:

You can also watch this short video.

Setting Up the Feedback Tab (02:01)

About the Feedback Tab channel

You can add a Feedback Tab to your website or your Zendesk. It can be configured to allow your end-users to search your knowledge base, submit a support request, or live chat with your agents.

Note: Zendesk Chat, although configured as a separate channel, is hosted within the Feedback Tab. You can't add Zopim Chat to your feedback tab. Configuring Zendesk Chat is described in Setting up your Chat channel.

When your end-users choose to submit a support request, they see the submit request form just as they would in your Help Center or Web portal.

The tab part of the Feedback Tab is what your end-users click to display what's shown above. It's a small tab that can be aligned to either the right or left side of the Web browser.

The tab (both words and color) can be customized and branded, as can the Feedback Tab form. You change the text strings in the user interface (see Customizing the text in your Feedback tabs and apply CSS code to change colors and layout (see Customizing the Feedback Tab with CSS in the CSS Cookbook).

You can create as many Feedback Tabs as you need. For example, you might create a Feedback Tab for each region or country you support or if you support multiple brands and products you can create one for each. Feedback Tabs can be tagged so that when you receive new support requests, you'll know their origin and can create a workflow based on those tags. Feedback Tabs also can be set to specific languages and the language is also available as a property in incoming support requests, which you can use to route those tickets.

Each Feedback Tab that you configure generates a snippet of JavaScript code. You use this code to add the Feedback Tab to your Zendesk. For instructions, see Adding a Feedback Tab to your Zendesk. To embed the Feedback Tab into any other website, you import the JavaScript into your site, as described in Adding a Feedback tab to an external website.

Creating a Feedback Tab

As noted above, you can create as many Feedback Tabs as you need and place them wherever you want to offer your customers quick access to support.

To create a Feedback Tab

  1. Click the Admin icon () in the sidebar, then select Channels > Feedback Tab.
    Zendesk Classic: Select the Setting menu, then select Channels > Feedback Tab > Edit.
  2. Follow the instructions below for configuring your Feedback Tab.
  3. Click Preview and grab code snippet. You use this code to add the Feedback Tab to web pages, as described in Adding a Feedback Tab to your Zendesk and Adding a Feedback tab to an external website below.

All of the settings in the General Settings tab are described in the following table. The Advanced Customization settings, which allow you to change the text that is displayed in the Feedback Tab, are described in Customizing the text in your Feedback Tabs.

SettingDescription
Language Choose one of the over 40 languages that Zendesk supports. Selecting a language means that the text strings in the Feedback Tab will be displayed in that language. Your language selection is also included as a property in the tickets that are submitted via the Feedback Tab. You can use the language setting in your business rules (see Using a requester's language in your business rules).

If you support multiple languages, you'll need to create a Feedback Tab for each language. For more information, see Creating a Feedback Tab in a different language.

Tab title You can select from the following tab titles:
  • Support
  • Feedback
  • Help
  • Service
  • Questions
  • Comments
  • Ask Us

These tab titles are graphics. If you'd like to use a word that is not included in this list, you can create a custom tab title graphic instead (see Using a custom graphic for the Feedback Tab).

Tab position The tab can be positioned on either the right or left side of the browser. You can also use CSS to control the positioning of your tab (see Controlling the tab offset below).
Tab color This is the background color of the tab. You can use simple named colors such as 'blue' or Hex numbers for the background color. The tab title text is white; therefore you should use a darker background. For more control over the design of the tab, create a custom tab graphic (see Using a custom graphic for the Feedback Tab).
Feedback Tab Tag You have the option of adding tags to the Feedback Tab (separate tags with a space). You might do this as a way to route incoming tickets. For example, you could add a unique tag for each Feedback Tab you create and then use that tag to automatically assign tickets from specific Feedback Tabs to specific groups or agents. Or, you might use the tags to create views or reports that show you from which Feedback Tab the tickets originated.
Display custom fields to end-users? If you use custom ticket fields and want to include them on the support request form in the Feedback Tab, select this option. Only those custom fields that are marked visible to end-users will be added to the form.

If you don't need to make any customizations to the Feedback Tab, you can generate the JavaScript code for this Feedback Tab by clicking Preview & grab code snippet. On the next page you'll see a preview of your Feedback Tab, which will be located on either the right or left side of the browser, depending on the setting you selected.

Most importantly, the settings you selected generated a snippet of JavaScript code. You'll use that code to add the Feedback Tab to either your Zendesk or any other website you'd like.

Select the text, copy it, and if you're adding the Feedback Tab to an external website, save it for later use.

The code snippet provides a style block (<style type="text/css">...</style>) that you can use to add CSS code to customize the look of your Feedback Tab. For more information, see Customizing the Feedback Tab with CSS in the CSS Cookbook.

 

Editing your Feedback Tab

You can generate any number of Feedback Tabs by using the simple process described above. However, there currently is not a user interface option (menu) for editing the Feedback Tabs you've created. You can edit them by using the Feedback Tab ID (referred to in the code as the dropboxID) in a URL, as in the following example:

https://myaccount.zendesk.com/account/dropboxes/2830039812/edit

Using this URL displays the edit page for the Feedback Tab, which is the same page you used to originally select the Feedback Tab settings and generate the JavaScript code.

Make your changes and then click Preview & grab code snippet to save your changes.

When you update your Feedback Tab settings, you do not need redeploy the JavaScript code snippet, unless you made changes to the tab title, its color, or its position. As you can see in the example JavaScript code above, these are the settings that are contained in the init function in the JavaScript code. However, you can also edit this manually without changing the Feedback Tab settings in Zendesk and regenerating the code. For example, if you simply wanted to move your Feedback Tab to the right side of the browser, just edit that property in the init function, as shown here:

Zenbox.init({
      dropboxID:   "2830039812",
      url:         "https://myaccount.zendesk.com",
      tabID:       "support",
      tabColor:    "black",
      tabPosition: "Right",

You can also change the tab title and color manually. The tab title property values are: support, feedback, help, service, questions, comments, ask_us. These of course correspond to the standard tab titles that you can set when creating or editing a Feedback Tab. The color property supports simple color names and Hex color codes.

The tab position can be set to either right or left. If you want more control over the position of the tab, you'll need to do so using CSS code (see Controlling the tab offset below).

The init function can also be used to pre-populate the Feedback Tab with data. See Pre-populating data in the Feedback Tab.

All of the other Feedback Tab settings are stored in your Zendesk account and referenced via the tab ID. This is why you don't need to redeploy or edit the code if you make changes to the settings that are not contained in the init function.

Using a hyperlink instead of a tab

If you'd like, your users can launch the Feedback Tab via a hyperlink rather than by using the tab. To do this, you create a URL that references the Feedback Tab ID, as shown here:

<a href="http://myaccount.zendesk.com/account/dropboxes/2830039812" onClick="script: Zenbox.show(); return false;">Open Feedback Tab</a>

You also need to edit the init function in the Feedback Tab JavaScript code to prevent the tab from being displayed. Add the line of code as shown below in bold.

Zenbox.init({
      dropboxID:   "2830039812",
      url:         "https://myaccount.zendesk.com",
      tabID:       "support",
      tabColor:    "black",
      tabPosition: "Right",
      hide_tab:   true,

This code hides the tab that opens the Feedback Tab form. When your users click the hyperlink, the Feedback Tab form is displayed.

Adding a Feedback Tab to your Zendesk

You can add the Feedback Tab to your knowledge base in Zendesk. The steps differ depending on whether you have the Help Center or the Web portal. If you're not sure which one you have, see About the different versions of Zendesk.

Topics covered in this section:

For information about adding a Feedback Tab to an external website, see Adding a Feedback Tab to an external website below.

Adding the Feedback Tab to the Help Center

You must be signed in as a Help Center manager to make these changes.

  1. Create the Feedback Tab and select and copy the code (as described above in Creating a Feedback Tab).

    Be sure to copy the entire code snippet.

  2. Go to your Help Center and click Customization design in the tools panel on the lower-right side of the page.

    The Help Center switches to Setup mode.

  3. Click Edit Theme to open the Theme editor.
  4. Select the Footer template from the HTML menu in the Theme editor.

  5. Paste the code snippet for the Feedback Tab at the bottom of the file.

    Tip: You can add the Feedback Tab to specific pages in the knowledge base. For example, if you only want the Feedback Tab to appear on your Home page, paste the code snippet at the bottom of the Home page template.

  6. Click Save at the top of the sidebar to save your changes.
  7. Click Publish changes at the top of the sidebar.

Adding the Feedback Tab to the Web portal

To add a Feedback Tab to your Zendesk, you need to create a Global JavaScript widget and add your Feedback Tab code to it.

To add a Feedback Tab to your Zendesk

  1. Create the Feedback Tab and select and copy the code (as described above in Creating a Feedback Tab).

    Be sure to copy the entire code snippet.

  2. Click the Admin icon () in the sidebar, then select Extensions.
    Zendesk Classic: Select the Settings menu, then select Extensions.
  3. Select the Widget tab and then click Add widget.
  4. Select the Global JavaScript widget.
  5. Enter a title for the widget (for example: Feedback Tab).
  6. Select the types of users who will see the Feedback Tab. For example, if you want everyone who visits your Zendesk to see it, select Anyone, including people who have not logged in.
  7. Paste the Feedback Tab JavaScript code into Content.

    To make this code work in your Zendesk, you need to make one minor change. Add a terminated script tag to the beginning of your code, as shown in this example in bold:

    </script>
    <script type="text/JavaScript" src="//asset0.zendesk.com/external/zenbox/v2.4/zenbox.js"></script>
    <style type="text/css" media="screen, projection">
      @import url(//asset0.zendesk.com/external/zenbox/v2.4/zenbox.css);
    ...
    
  8. Click Submit to activate the widget. The Feedback Tab should now be displayed in the browser. If you don't see it immediately, refresh your browser.

Adding a Feedback Tab to an external website

By adding a Feedback Tab to a website, you're giving your end-users quick access to your Zendesk. You just need to include the Feedback Tab JavaScript code you generated by following the steps in Creating a Feedback Tab to your site.

Typically this is done by saving the code into a separate JavaScript file (for example, feedback_tab.js) and then referring to that file from somewhere within your site.

Once you've got the code loaded into your site, the tab will appear in your browser and when your users click it open they will see the Feedback Tab as they would if you had added it to your Zendesk.

Controlling the tab offset

By default, the tab is placed along the edge of the Web browser window and offset about 20% from the top. You can change this by overriding this default setting using CSS. For example, to place the tab 50% from the top of the Web browser window, use CSS code like this:

#zenbox_tab {
   top: 50%;
}

You add this CSS to the style sheet used by your external website, not to the CSS code contained in the Advanced Customization settings page.

Embedding a Feedback Tab into a page in your website

You can also embed the Feedback Tab form into a page in your website. You just need to add an iframe that includes the URL to your Feedback Tab.

<iframe src="http://myaccount.zendesk.com/account/dropboxes/2830039812" width="100%" height="100%"></iframe>

Size the iframe as needed to fit into your website layout.

Note: How iframes behave in some web browsers can be unpredictable. Therefore, embedding a Feedback Tab using an iframe may not work properly. In other words, we cannot guarantee that this will work for you. You'll need to experiment with the web browsers you support.

Pre-populating data in the Feedback Tab

Some of the data in the Feedback Tab tab can be pre-populated so that your users don't have to enter it themselves. For example, if you know who the user is (because they are logged in to your site), you can grab their name and email address and enter into the form when the user clicks open the Feedback Tab.

You can pre-populate the data in the following fields:

  • requester_name
  • requester_email
  • request_subject
  • request_description

All of these are set in the init function in your Feedback Tab JavaScript code.

<script type="text/javascript">
  if (typeof(Zenbox) !== "undefined") {
    Zenbox.init({
      dropboxID:   "2830039812",
      url:         "https://myaccount.zendesk.com",
      tabID:       "support",
      tabColor:    "black",
      tabPosition: "Left",
      requester_name: "var_name",
      requester_email: "var_email",
      request_subject: "var_subject",
      request_description: "var_desc",
    });
  }
</script>

The values assigned to these fields would of course be the JavaScript variables you created to hold this data.

Customizing the text in your Feedback Tabs

Both the words displayed in and the color of the elements within the Feedback Tab can be customized. Changing the color and branding of the Feedback Tab is described in the CSS Cookbook in Customizing the Feedback Tab with CSS.

Most of the words that are displayed in the Feedback Tab can be changed, as in this example:

The title was changed as were the subject and description titles and the input prompts.

To change the text strings in your Feedback Tab

  1. Click the Admin icon () in the sidebar, then select Channels > Feedback Tab.
    Zendesk Classic: Select the Setting menu, then select Channels > Feedback Tab > Edit.
  2. Select the Advanced Customization tab.

  3. Enter the text that you want displayed in the Feedback Tab.
  4. Click Preview and grab the code snippet to save your changes.
Note: Dynamic content placeholders are not currently supported in the Feedback Tab.

You can also use CSS to customize the text of your Feedback Tab. For more information, see Customizing the Feedback Tab with CSS in the CSS Cookbook.

Customizing the tab element (Web portal)

Users launch the Feedback Tab by clicking a small tab that is placed along the edge of their Web browser.

You can customize how this standard tab looks using CSS or you can replace it with your own custom graphic. This section applies only if you have the Web portal, not the Help Center. If you're not sure which one you have, see About the different versions of Zendesk.

For a detailed explanation of how to customize the standard Feedback Tab using CSS, see The New Feedback Tab: an intro to CSS widgets. The following instructions explain how to replace the standard tab with your own custom graphic.

Using a custom graphic in version 2.5 Feedback Tabs

Version 2.5 Feedback Tabs are any Feedback Tabs created after July 20th, 2012.

To use a custom graphic in your 2.5 Feedback Tab

  1. Create your custom graphic and upload it to a publicly accessible location on the internet.

    The graphic must be 130 pixels wide by 60 pixels high. You create a graphic in a horizontal orientation and when it's added to your Zendesk it's shown in the default vertical orientation.

  2. Create your Feedback Tab, if you haven't already (see Creating a Feedback Tab).
  3. In the code for your Feedback Tab, find the following variable:
    tabImageURL
  4. Replace the image URL for tabImageURL with the location of your graphic.
  5. Save your changes.

Using a custom graphic in legacy Feedback Tabs

Legacy Feedback Tabs are those created before version 2.5 was released (version 2.4 and older). These Feedback Tabs are still supported.

On the Advanced Customization tab of the Feedback Tab settings page, you can replace the standard tab with your own custom graphic. You can update the settings of a Feedback tab that you've already created by following the instructions in Editing your Feedback Tab above.

Create a graphic that is 45 pixels wide and 108 pixels tall in a vertical orientation. Upload the image to a location on the internet and then add the URL to the custom image option, as shown here:

The supported image formats are PNG, GIF, and JPG.

Click Preview & grab code snippet to save this new setting.

Have more questions? Submit a request

Comments

  • Avatar
    Chris Sallemi

    Is there any way to update the default success message after submitting form?

  • Avatar
    Danny

    Any way to create a click to chat icon, that when a agent is online will display "online" or if offline will display "offline" like most of the other standard chat clients. This would eliminate me from using a third party chat service! And keep everything in the Zendesk.

  • Avatar
    Sylvia Nutley

    Danny did you ever get an answer to  "Any way to create a click to chat icon, that when a agent is online will display "online" or if offline will display "offline" like most of the other standard chat clients. This would eliminate me from using a third party chat service! And keep everything in the Zendesk

  • Avatar
    Greg Martin

    Is there a way to scope the knowledge base results to specific forum?  It would be great to be able to control which knowledge base articles appear depending on what page or host the user is on.

  • Avatar
    Mdriess

    When I try to add it as a link as described above with the hide_tab option, the link doesn't work. However, when hide tab is removed, the link works fine..help?

  • Avatar
    Luu Duong

    I created a feature request for the feedback tab to be tied to a specific forum so that users are directed to the knowledge base for the particular product or service they need help with. If you think this is a good idea then please vote it up... https://support.zendesk.com/entries/21442037-feedback-tabs-can-specify-which-forum-will-be-searched

  • Avatar
    Sergei Shablovsky

    I hope on that point of Zendesk popularity are great to take advanced attention to:

    1. Feedback Tab image customization (different sizes, positio on page or iframe)
    2. Advanced data filtering in fields, used in Feedback Tab
    3. Ability to redirect to specified forum, based on controls in Feedback Tab which setup by user

     

  • Avatar
    Luu Duong

    Greg Martin and Sergei Shablovsky, and everyone else if you also want this feature then vote for it here in the feature request list https://support.zendesk.com/entries/21442037-feedback-tabs-can-specify-which-forum-will-be-searched . Only feature requests that get a lot of votes will be implemented by Zendesk.

  • Avatar
    Sarah Crane Newman

    Hello,

    I'd like for the question and subject field placeholders to be blank, but when I enter just a space there, it ignores it and uses the default placeholders. Is there any way for me to replace the default placeholder with nothing/with whitespace?

    Thanks!

    Sarah

  • Avatar
    Sarah Crane Newman

    Sorry, I meant *description* and subject fields; the question field defaults to empty already.

  • Avatar
    Anton de Young

    Sarah, 

    As it currently works, those fields are expecting some text. If you don't add anything then the default text is used. 

  • Avatar
    Dallas Clark

    I'm receiving a "Failed to load resource" error when trying to add the Feedback tab to our website for the following files file://assets.zendesk.com/external/zenbox/v2.4/zenbox.js & file://assets.zendesk.com/external/zenbox/v2.4/zenbox.css.

    Any ideas?

  • Avatar
    Mauricio dos Santos Lopes

    Não consigo incluir a Tab Feedback , alguem pode me ajudar?

  • Avatar
    Anton de Young

    Dallas,

    Please submit a ticket and our Support team will help you. 

  • Avatar
    Anton de Young

    Mauricio, 

    Sim, nós podemos ajudá-lo. Por favor, envie um ticket. 

  • Avatar
    Dallas Clark

    Thanks Anton,

    I discovered the issue doesn't occur when you're running the application from a web service, it only occurs when you're trying to add the Feedback tab in a flat HTML file.

  • Avatar
    Dan

    Finally implemented a feedback tab as a link on our top navigation and support page.  Moving forward, we'd very much like to: 

    1. Implement multiple, context-specific feedback forms throughout our retail site, e.g. - Contact, Price Match & Quote Request, forms.  I recall reading about this somewhere in the forums - probably above!

    2. Is there a way to mask or hide specific ticket fields from appearing in one form and not another?  

    3. Is there a way to reorder and control the width of ticket fields? By default, Zendesk stacks ticket fields which creates an overly long form. We'd ideally like to keep the form above the fold.

    4. We're using a third party Magento Product Questions extension to e-mail questions to Zendesk.  The workflow is as follows: question asked > email sender [faq@mysite.com] emails [faq@account.zendesk.com] > ticket created > requester set to [faq@mysite.com].  Is there a way to programmatically switch [faq@mysite.com] to [customer@domain.com]? Otherwise, support agents must manually edit the Reply To: address.  Hopefully this makes sense.

    Any and all help greatly appreciated.  Thanks!

  • Avatar
    John Boyer

    Adding the tab as a hyperlink doesn’t work as prescribed. I’m using Safari 5.1.7. Any suggestions? Thanks.

  • Avatar
    Dan

    @John Keep fighting the good fight, it can be done!  If your webmaster and/or web developer can't get it done, now would be a good time to let him/her go - seriously!

    It  blows my mind to discover how rigid and inflexible this feedback tab is.  This is an SMB feature hiding in an Enterprise-level product version.  Unfortunately, I do not have months/years to wait for seemingly basic functionality to reach production anytime soon.  

    "

    Thanks for reaching out. 1,2 & 3... Unfortunately there isn't a way to do any of the first 3 things with the existing feedback tab. This is because all of these things would require javascript and there's no functionality to plug that into the feedback tab.

    The only way you could get this to work would be if you were to create your own custom forms that utilised our REST API. For more information on using our API have a look at this link:

    http://developer.zendesk.com/introduction.html

    However, a fair bit of coding knowhow would be required. If you weren't keen on writing the code yourself another option would be to have a chat to one of our partners who may be able to work with you to create a solution. For a list of our partners have a look at this link:

    http://www.zendesk.com/support/partners

    One last thing you might consider is to post a feature request at https://support.zendesk.com/forums/1848/entries asking for more functionality with the feedback tab. Requests in these forums are important because it allows the community to support new requirements and helps highlight areas needing change and improvement. Our team frequently visits this forum to consider functionality changes and feature requests from our online community.

    Sorry I could not be the bearer of better news.

    In regards to setting the from address from within a form in Magento I'll have to pass your request on to our Level 2 support team who are looking into this for you; someone will be getting back with you as soon as possible. We appreciate your patience.

    "

  • Avatar
    Marci

    Is there a way to change the text shown on hover? Our tab title is "Questions" but when you hover with the mouse, the tooltip shows "Support" and that's not a message I want to send in this case. Thanks!

  • Avatar
    Anton de Young

    Marci,

    That's a bug that's being fixed. I'll let you know when it's fixed. 

  • Avatar
    Marci

    Great thanks!

  • Avatar
    Jerome

    Note that Zenbox.init() doesn't call encodeURIComponent for the request* parameters so it's worth doing this yourself. I noticed this because including newlines \n in the description wasn't working for me.

  • Avatar
    Maarten Siersema

    Hi,

    Is there a way to add attachments to the support request like the original post ticket form?

    regards,

    Maarten

  • Avatar
    Вадим Ljutov

    Hello, is there any chance to change those writings in feedback tab? https://skitch.com/ravolar/ecn63/setting-up-your-feedback-tab-channel-zendesk-support

    Thanks in advance

  • Avatar
    Justin Graves

    Need a little help with "JavaScript variables".  I find the last line of this article pretty funny, seeing as how setting "JavaScript variables" was mention no where else in this article and there is no link to any info on how to do this.

    " The values assigned to these fields would of course be the JavaScript variables you created to hold this data."

    Anyway, if anyone can help me figure out how to set the variables equal to the placeholders like I have below, that would be awesome.  It would be even awesomer if ZD could make the placeholders work instead of having to mess with setting "JavaScript variables.

     

    requester_name: "var_name" = {{current_user.name}}

    requester_email: "var_email", =  {{current_user.email}}

    Any help is appreciated.  :)

  • Avatar
    Jerome

    Hi Justin,

    It looks like the placeholders you mention are ZenDesk placeholders used in widgets. This feedback tab is meant to be placed on a separate website, outside the context of of ZenDesk, and therefore those placeholders aren't of any use. It sounds like you might need to consider if the feedback tab is appropriate for your requirement and / or get a developer involved.

    Sorry I can't be of more help.

    Jerome

  • Avatar
    Justin Graves

    Per the first line of this forum post:

    The Zendesk Feedback Tab is essentially a small and portable version of the Web portal that you can embed in any web site, including your Zendesk.

  • Avatar
    Jerome

    Oh yeah, sorry. I just couldn't immediately think why you'd want to do it, sounded a bit too meta. Anyway, I guess this might work then:

    <script type="text/javascript">
    if (typeof(Zenbox) !== "undefined") {
    Zenbox.init({
    dropboxID: "2830039812",
    url: " https://myaccount.zendesk.com",
    tabID: "support",
    tabColor: "black",
    tabPosition: "Left",
    requester_name: "{{current_user.name}}",
    requester_email: "{{current_user.email}}",
    request_subject: "Feedback",
    request_description: "Some feedback"
    });
    }
    </script>

     

    That stands a chance, at least, but I've never put together a widget.

  • Avatar
    Justin Graves

    It would be great it that worked but it does not.

Please sign in to leave a comment.