The Zendesk Feedback Tab is essentially a small and portable version of the Help Center or Web portal that you can embed in any website hosted by a basic web hosting provider. You can even embed it into your own 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: Chat, although configured as a separate channel, is hosted within the Feedback Tab. Configuring 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.
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.
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.
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).
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).
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.
Select the Enable Screencasts check box to allow end-users to record a screencast and link it to tickets created from the Feedback tab.
Select the text, copy it, and if you're adding the Feedback Tab to an external website, save it for later use.
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:
Make your changes and then click Preview & grab code snippet to save your changes.
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 eitherrightorleft. 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).
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:
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.
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.
Click Edit Theme to open the Theme editor.
Select the Footer template from the HTML menu in the Theme editor.
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.
Click Save at the top of the sidebar to save your changes.
Cick Publish changes at the top of the sidebar.
Adding the Feedback Tab to the Web portal
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
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:
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.
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:
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
Click the Admin icon () in the sidebar, then select Channels > Feedback Tab.
Zendesk Classic: Select the Setting menu, then select Channels > Feedback Tab > Edit.
Select the Advanced Customization tab.
Enter the text that you want displayed in the Feedback Tab.
Click Preview and grab the code snippet to save your changes.
Note: Dynamic content placeholders are not currently supported in the Feedback Tab.
Also located on the Advanced Customization tab is the option 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.
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 (the day this version was released). To use your own custom graphic in version 2.5 Feedback Tabs, you use a Global CSS widget and a small amount of CSS code.
The first step is to 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.
To create a custom graphic Global CSS widget
Click the Admin icon () in the sidebar, then select Extensions.
Zendesk Classic: Select the Settings menu, then select Extensions
Select the Widget tab and then click Add widget.
Select the Global CSS widget.
Enter a title for the widget (for example: Feedback Tab graphic).
Select the availability option (the types of users who see your Feedback Tab). This should match the option you used when adding your Feedback Tab to your Zendesk (see Adding a Feedback Tab to your Zendesk above.
Paste the following CSS code into Content. Be sure to change the image URL to the location of your own graphic.
Click Submit to activate the widget. Your custom graphic should now be displayed. If you don't see it immediately, refresh your browser.
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.