Forums/Community/Community tips & tricks

Widgets (Zendesk Classic)

Mick Staugaard
posted this on November 25, 2008 02:15

Zendesk widgets are small customizable pieces of content you can include in your help desk. This could be simple text guiding the users of your help desk or more advanced widgets that integrate with other web services. Widgets are displayed in the sky blue boxes on the right side of your help desk screen.

Note: You cannot add widgets to the agent interface in the new version of Zendesk. You'll need create apps instead. You can learn more about apps here: http://developer.zendesk.com/documentation/apps/

Zendesk provides a number of ready made widgets that can easily be added to your help desk, as well a custom widgets for more advanced users.

When configuring a widget you can specify who the widget will be available to. You have the option to specify "anyone", "agents" and "logged in end-users". Use this feature to restrict the access to your widgets.

Placing Widgets in Your Pages

Once you have configured a widget, you need to navigate to the page where you want the widget to appear and click the "Edit widgets on this page" link below the sky blue widget boxes on the right:

There are two exceptions to this; The CSS widget and JavaScript widget. These two widget types are placed on all pages if the user has access to the widget according to the widgets availability.

Display Information in Widgets

The simplest form of widget is a widget with static plain text. To create this form of widget, simple add a custom widget and enter some plain text into the content area.

Zendesk also provides a Text widget that can be used to fade between different texts in the widget.

Modifying Colors

If you want to modify the colors or layout of your help desk you can use the CSS widget type. With this you can insert any CSS. If you wanted to change the color of headings, you cold create a CSS widget with this content:

h1, h2, h3 {
   background-color: #FF0000;
}

Modifying Content

You can also change the content of your help desk by creating a JavaScript widget that modifies the HTML document. If you wanted to add a tab to the tab bar with a link to google, you could create a JavaScript widget with the content:

Event.observe(window, 'load', function() {
   $$('#top-menu #green')[0].insert('<li class="main"><a class="tab" href="http://google.com">Google</a></li>');
});

If you wanted to change the name of your help desk in the header, you could create a JavaScript widget with the content:

Event.observe(window, 'load', function() {
   $('table_header').down('a').update('Our Fantastic Help Desk')
});

Advanced Widgets

If you have not been scared away by the above JavaScript widget, you probably want to check out our Widget API Documentation for more information on creating advanced widgets. 

 

Comments

User photo
Mike Kasper

In regards to the section 'Modifying Content', how it talks about adding a tab to the tab bar...

Looking at the example code they have given in this example, it looks like it would be possible to not only create a "parent tab" but to also have "child tabs" below it.

Has anyone done something like this or know if this is even possible? If so, would you offer the code that we could drop into the widget?

Thanks in advance.

August 12, 2009 11:26
User photo
Rob Shaw

I'm not sure what you're after Mike, but if it's a drop-down list similar to hovering over "Home" or "Manage" or "Account", the following works for me.

i.e hovering over "Home" shows a drop-down list with options for Personal Information, Change Password etc.

Event.observe(window, 'load', function() {
   $$('#top-menu #green')[0].insert('<li class="main"><a class="tab">Useful Websites</a><ul class="menu-drop"><li><a href="http://yahoo.com" target="_blank">Yahoo!</a></li><li><a href="http://google.com" target="_new">Google</a></li></ul></li>');
});

 

Dropping that code into a javascript widget will add a new tab/panel option called "Usefull websites" which appears next to ACCOUNT.

Hovering over it will present a drop-down list containing links to Yahoo and Google (which open in a new window/tab of your browser).

No double you could add an additional <ul> group to create sub-groups.

August 15, 2009 08:36
User photo
Mike Kasper

Rob, This is exactly what I was looking for!  Thanks for your quick reply and great solution!

August 17, 2009 10:22
User photo
Jeff Solomon

Anyone knows how to remove a specific tab? and how can i change the link of certain tab?

thank

November 25, 2009 14:04
User photo
Samuel Brazier
operitel

I would also like an answer to Jeff's question above. More specifically, I would like to edit the name of the organization tab to say "Check all existing requests for [organization]"

January 18, 2010 10:09
User photo
Forest
Zendesk for iPad Beta

@Jeff What tab would you like to remove?

February 05, 2010 09:48
User photo
Joe
Event.observe(window, 'load', function() { $$('#top-menu #green .tab_new .tab')[0].update('Ask a Question'); }); This would be how you change the Submit a request tab, easiest way is to pull up the source code, see what the class of that button is, change ".tab_new" to that class, and then change "Ask a Question" to that text. I hope that doesn't sound too confusing, let me know if you need more clerification
February 17, 2010 10:35
User photo
Samuel Brazier
operitel
@Joe Do you know if there is a way to add some text to the Organization button to check all requests. I would like to change it to "Check all requests for ORGANIZATION"
February 17, 2010 10:42
User photo
Joe
Should be able to, which page are you trying to change it on? the user setup? The way I figured this out was, if you follow the steps in the ids and classes and list enough to uniquely identify them where the "#top-menu #green .tab_new .tab" is, then change the text, it will update the button. Just depends on where the text is. If you tell me what page you're on, or even give me a link to it, I'll biuld it for you real fast and show you what I mean
February 17, 2010 11:01
User photo
Samuel Brazier
operitel
From the end-user login, it is the fourth button from the left, that just has the name of the organization on it. It goes to: [helpdesk]/requests/organization/index
February 17, 2010 11:13
User photo
Joe
Jeff, These examples are done with the Manage tab, but you can change which tab by changing the class to the tab that it applies too To remove: Event.observe(window, 'load', function() { $$('#top-menu #green .tab_manage') 0].update(''); }); To change link/text: Event.observe(window, 'load', function() { $$('#top-menu #green .tab_manage') 0].update('New Text'); }); Hope this helps This same method can be used to edit most of the text on page, you make it take specific by tracking the id's and methods, can use this for the title tags as well.
February 17, 2010 11:20
User photo
Joe

Sorry decided to repost and try to make it more readable.

Jeff,

These examples are done with the Manage tab, but you can change which tab by changing the class to the tab that it applies too

To remove:
Event.observe(window, 'load', function() { $$('#top-menu #green .tab_manage') 0].update(''); });

To change link/text:
Event.observe(window, 'load', function() { $$('#top-menu #green .tab_manage') 0].update('<a href="http://www.newlink.com" class="tab">New Text</a>); });

Hope this helps This same method can be used to edit most of the text on page, you make it take specific by tracking the id's and methods, can use this for the title tags as well.

February 17, 2010 11:26
User photo
Tim Turner

Since the SEARCH is pushed WAY DOWN on the page because we have so many forums....

I want a SEARCH widget... it is just like the forums widget except without listing the forums... can we create such a widget on our own?

If not, ZENDESK just offer a check box option on the forums widget to not display a list of forums... just show the search box.

ALternatively, COPY the forums widget and remove it and create one called "Search Widget".   We could then add that to our zendesk to make it 100% more useful... customers come to our zendesk and SEE NO WAY TO SEARCH.  Only a few scroll down and find it hiding in bottom right of the page.

March 11, 2010 08:59
User photo
Colin Murphy

Tim, this is possible.  You should see this post:

https://support.zendesk.com/entries/26903-stand-alone-forum-search-...

March 11, 2010 09:04
User photo
Tim Turner

Yes I figured it out with a custom widget.... Thanks

March 11, 2010 13:22
User photo
Matt Aven

Working from this page, I was able to combine Open Requests and Closed Requests into one tab, which I thought was pretty useful. here it is:

 

Event.observe(window, 'load', function() {
   $('#top-menu #green .tab_requests')[0].update('<a class="tab">REQUESTS</a><ul class="menu-drop"><li><a href="http://megagro.zendesk.com/requests">CHECK YOUR EXISTING REQUESTS</a></li><li><a href="http://megagro.zendesk.com/requests?filter=solved">REVIEW YOUR SOLVED REQUESTS</a></li></ul></li>');
});

Event.observe(window, 'load', function() {   $('#top-menu #green .tab_requests')[0].update('<a class="tab">REQUESTS</a><ul class="menu-drop"><li><a href="http://**.zendesk.com/requests">CHECK YOUR EXISTING REQUESTS</a></li><li><a href="http://**.zendesk.com/requests?filter=solved">REVIEW YOUR SOLVED REQUESTS</a></li></ul></li>');});

 

 

June 18, 2010 22:09
User photo
Mark

How do I replace "Check your existing requests" with Rob's "Useful Websites" drop-down? Thank you.

July 03, 2010 18:15
User photo
Mark

Also, I replaced "Submit a Request" with "Contact Support", but the header of the page remains "Submit a Request". Is there a way to change the header to "Contact Support"? Thank you.

July 03, 2010 18:19
User photo
Forest
Zendesk for iPad Beta

Hi Mark,

 

The info below should help:

 

  • To remove "Check your existing requests" you can create a JavaScript widget with the following snippet:

 

Event.observe(window, 'load', function() {

if ($$('#top-menu #green .tab_requests')[0]){

   $$('#top-menu #green .tab_requests')[0].hide('<a href="/requests" class="tab">Ask A Question</a>');

}});

 

  • To add a tab for Rob's Useful Websites you can create a JavaScript Widget with the following snippet (The example of lists 4 websites but you can add more to the list):

Event.observe(window, 'load', function() {   $('#top-menu #green')[0].insert('<li class="main"><a class="tab">Rob's Useful Websites</a><ul class="menu-drop"><li><a href="USEFUL WEBSITE #1" target="_blank">NAME OF USEFUL WEBSITE #1</a></li><li><a href="USEFUL WEBSITE #2" target="_new">NAME OF USEFUL WEBSITE #2</a></li><li><a href="USEFUL WEBSITE #3" target="_blank">NAME OF USEFUL WEBSITE #3</a></li><li><a href="USEFUL WEBSITE #4" target="_blank">NAME OF USEFUL WEBSITE #4</a></li></ul></li>');});

 

  • You can change the header on the Submit A Request" by createing a JavaScript widget with the following snippet:

 

Event.observe(window, 'load', function() {

if ($$('#container #ticketform h2')[0]){

   $$('#container #ticketform h2')[0].update('<id="ticketform">Contact Support</a>');

}});

 

Let me know if this works for you or if you have any questions.

Thanks,

Forest Anderson

July 05, 2010 06:44
User photo
Mark

Hi Forest,

thank you very much for your help. It worked great for me.

However, I tried to use the header change script to change the header of the search box on the home page (id #search_box), but it didn't work.

The code I tried to use was

 

Event.observe(window, 'load', function() {
if ($$('#container #search_box h2')[0]){
   $$('#container #search_box h2')[0].update('<id="search_box">Type your question here</a>');
}});

 

Am I doing something wrong?

 

Also, how can I change the background color of the search box?

 

Thanks a lot again

July 06, 2010 05:16
User photo
Forest
Zendesk for iPad Beta

Hi Mark,

 

Glad I could help. Try the snippet below to change the header above the search box:

 

Event.observe(window, 'load', function() {
if ($('#solution_suggestion h2')[0]){
   $('#solution_suggestion h2')[0].update('<id="search_box">The Giant Search Box</a>');
}});

Event.observe(window, 'load', function() {if ($('#solution_suggestion h2')[0]){   $('#solution_suggestion h2')[0].update('<id="search_box">ENTER TEXT HERE</a>');}});

 

To change the color of the search box create a CSS widget with the following:

 

.content_green,.green_box_top,.green_box_bottom {

  background-color: #ENTER HEX VALUE FOR COLOR HERE;

}

Cheers,

 

Forest Anderson

 

 

July 06, 2010 06:17
User photo
Mark

Thanks again, Forest.

July 06, 2010 14:03
User photo
Forest
Zendesk for iPad Beta

Mark,

Glad I could help.

Cheers,

Forest Anderson

July 06, 2010 14:13
User photo
Matt

How can I delete a widget from my right rail?

August 30, 2010 12:50
User photo
Skip Moore
Zendesk

Some widgets are fixed widgets and can not be removed without effecting other fixed widgets. What is the widget you are talking about?

August 30, 2010 13:44
User photo
Matt

We have created an oggchat widget. While trying to re-order the widgets on the right rail we ended  up adding an extra chat widget. Now I am unsure how to remove the extra one.

August 31, 2010 08:13
User photo
Michael
techtorium47

Hi Guys I'm Michael a web designer, I'm not a good coder like a script from widget of zen desk and can anyone help me or advice what to do on this issue that would be very great... by the way this is the zendesk that I skin a while ago http://support.thesafecig.com/home and the issue that i want an answer is this

I manage to add a nav above like Home | Shop | Blog | FAQs | My Account ->now my client wants to take off the login and singup because all of that will be done on the other cms that i skin its magento cms. so can anyone help me what is the best script code for that to add just to take off the Login and Signup? 
September 09, 2010 01:03
User photo
Michael
techtorium47

I try this but doesn't working

Event.observe(window, 'load', function() {
   $('#top-right').down('<a href="/login">login</a> | <a href="/registration">sign up</a>').update('<a href="http://www.thesafecig.com/cart/">Home</a> | <a href="http://www.thesafecig.com/cart/index.php/shop?___store=default"> Shop</a> | <a href="http://www.thesafecig.com/blog"> Blog</a> | <a href="http://support.thesafecig.com"> FAQs</a>  | <a href="http://www.thesafecig.com/cart/index.php/customer/account"> My Account</a>')
});

September 09, 2010 01:04
User photo
Henrique Vlcek

i'm trying to put a new tab but in IE8 i got an error

Message: '0' is null or not an object

other browsers it works

 

Anyone know what might be happening?

September 29, 2010 12:18
User photo
Henrique Vlcek

fixed

September 30, 2010 12:10
User photo
Isobel Lee

I have two categories in our knowledge base tab.  Would it be possible to split this page into two, so I have one knowledge base with one category and and add another tab to be the 2nd knowledge base with the other category?

May 05, 2011 03:29
User photo
Sabrina Devett Nielsen
onfone

I want to make a CSS widget only available for a speciel group in my helpdesk - is that possible in some way? The group contains only agents, but it's not all agents in my helpdesk that should have the new CSS.

March 07, 2012 05:50
User photo
Roland Monsegu

How to make a image widget clickable?

May 14, 2012 11:42
User photo
Paul Fennell

I also want to make a CSS widget only available for a speciel group in my helpdesk - is that possible in some way? The group contains only agents, but it's not all agents in my helpdesk that should have the new CSS.

June 22, 2012 07:40
User photo
Avi Warner
Zendesk

@Sabrina & @Paul - Unfortunately, you wouldn't be able to do this out of the box, but you might be able to do this using a Javascript widget that checks against the current user's group ID. You can take a look at our API Widget resource for more information: http://www.zendesk.com/support/api/widgets

@Roland - Image widgets can't be made clickable (the image portion at least). I would suggest using a 'Custom Widget' instead. You'll be able to display and link the image with HTML.

June 22, 2012 11:36
User photo
Justin Graves
ensign

Is there a way to make a "Custom" HTML widget show up on all pages?  We have a widget with the help desk contact info, but we are having to add it to each page individually.  Any thoughts on how to make this happen for us would be appreciated.

October 24, 2012 15:29
User photo
Jennifer Rowe
Zendesk

Hey Justin,

As far as I know...you have to do it manually. (Maybe someone else out there will have a workaround...)

Thanks! Jennifer

October 24, 2012 15:43
User photo
Ryan Mariotti

Can widgets be used in the "new" Zendesk?  I have been using the "try the new Zendesk" version (link at top of page) but the widget that shows on my "old" Zendesk ticket screen doesn't show for the new screen AND I don't see any link to add widget on the new screen.

Let me know if I can add widgets to this new page!  Thanks,

October 24, 2012 16:18
User photo
Justin Seymour
Zendesk

Hey Ryan: 

From the FAQ: 

What about my widgets?  Will they automatically move over?

In the new version of Zendesk, Widgets are now called Apps. You can navigate to them by going to Settings (the cog icon) in the left hand sidebar and clicking on Apps; this will be where you’ll find not only Public Apps (formerly known as Native Widgets), but also the Private Apps you create specifically for your account.

Note that any end-user-facing Widgets on your customer portal should be unaffected by moving to the new agent interface.

At launch, most of the integrations you’ve come to know like Salesforce, Harvest, Freshbooks, etc., will be available to install in the new agent interface.  To see all of the Apps that are available, please visit our new Apps page, or log into your account, and click on Settings (the cog icon in the bottom left corner).

If Zendesk or a (Zendesk partner) has created agent-facing Widgets for you, however, these will need to be migrated to the new Apps framework.  Please reach out to your Account Manager, who can provide assistance, or stay tuned for more details specific to your agent-facing Widgets.

If you have created custom Widgets of your own that are agent-facing, they cannot be automatically migrated to the new agent interface.  These widgets will require modification in order to work with the new App framework.  We’ve created documentation to explain how to modify your Widgets to work as Apps in the new agent interface, and we’re also holding a series of webinars with office hours where you can ask specific questions about the new framework.  And of course, you can always contact our Customer Advocate team for help.

October 25, 2012 07:23
User photo
Karen Berthiaume

Justin (zendesk)...

3 questions...We created 4 widgets so basic customer information was present as you were looking at tickets , a listing of acceptable tags, critical contact info and helpful email shortcuts.

1. 2 of these widgets were intended to be viewed as you worked ticket ...like cheat sheets/ constant reminders.  Now they will be buried.  You have to click around  so no one see them without them actively seeking them out.  Did I read this right?  Big down grade for concept of what widgets could be used for if this is true.

2. I read your post of 10/25...and looked at documentation link.  I created these widgets without all the programming skills now required to convert them.  Is there a more user friendly way to get this done?  My widgets are not complicated and were created before with no programming skills..just some copy paste..change display words

3.  I'm reviewing widgets we have  - since so hard to convert ..only want to do what is needed.  How can I show which pages they were viewed on?  I see...viewable on 1 page/ 2/pages etc but which pages?

October 26, 2012 13:19
User photo
Justin Seymour
Zendesk

Hey Karen: 

I've created a ticket for you to discuss further! 

October 30, 2012 06:22
User photo
Ivan Andreyev

How do I add Facebook social plugin widget?

November 19, 2012 00:30
User photo
Justin Seymour
Zendesk

Hey Ivan: 

Are you talking about adding a Like or Send button to the portal? You could drop the code in to a custom widget, though it won't be specific to anything in Zendesk. You can enable the Social Sharing option from Settings > Channels > Web Portal. This will place a few common social buttons at the top of your forum posts. 

November 19, 2012 06:44
User photo
Matthieu Gross

Hello,

Is there a way, using Widgets, to create a new page hosted into my zendesk site ? I would like to have for example the following layout :

Home | Forums | Submit a request | Check your existing request | my new internal page

I then want to fill the "my new internal page" with html widgets using the same layout than the default Welcome message (the one that contains "stay updated with announcements, gets...").

I tried to create an HTML widget and then link it in the tab bar (using "/widgets/20637221/") but I didn't manage to make it works...

Any sugestion ?

November 26, 2012 08:53
User photo
Justin Seymour
Zendesk

Hey Gross: 

It's not possible to create an internal page within Zendesk. You could create that page externally and host it on your own domain and then link to it from within Zendesk, but the HTML widgets don't function like you're expecting. 

November 27, 2012 07:35
User photo
Matthieu Gross

hi Justin,

Actually I manage to do what I wanted, see attached file. This is a js widget that create a new tab bar and when you click on it, it will replace the page by a custom HTLM code embedded in the same js widget (html="xxxx").

Please see attached .jpg file to see how it looks like.

November 28, 2012 01:06
User photo
Justin Seymour
Zendesk

Ah, I see what you did! Thanks for sharing! 

November 28, 2012 05:19
User photo
Kevin Lewis

I am not seeing the custom widgets we created in the old interface when I search App in the new ZD interface.  Can you tell me how I can go about enabling these widgets or tracking them down?  

March 07, 2013 08:54
User photo
Brandon K.
Zendesk

Hey Kevin,

Widgets created in the old interface will not transfer over to the new Zendesk interface. You will need to recreate them as apps for them to be compatible  You can find out more about the conversion process here: http://developer.zendesk.com/documentation/apps/migration/introduct...

March 07, 2013 12:10
User photo
Sergio
efaqt

Hi there,

I'm trying to add a new widget to a ticket page. However, I can't find any link there for adding a widget as per the instructions above...

Help?

March 19, 2013 07:37
User photo
Jennifer Rowe
Zendesk

Hi Sergio,

Are you using our new agent interface (not Classic)? If so, you cannot add widgets to the ticket page. You'll need create an app instead.

You can learn more here: http://developer.zendesk.com/documentation/apps/

If you're using Zendesk Classic, select Settings > Extensions, then Add Widget, then Global CSS.

March 19, 2013 10:46
User photo
Mhairi Bell

We've got a Screencast widget that we want to embed on the Create a Ticket page on the classic version of Zendesk. It appears on the Create a Ticket page when logged in:
https://gecko.zendesk.com/tickets/new

But you get a different page when not logged in:
https://gecko.zendesk.com/anonymous_requests/new

Of course I also don't see the "Manage widget" button on that page because I'm not logged in so have no way to add or manage my widgets.

I also noticed for the first time on https://gecko.zendesk.com/home (when using it as an un-logged-in user ) that I see a widget that says "Custom Widget Sample. Hi Anonymous user!" - which is not a widget that we've created or added to that page.

How do I stop this happening?

June 26, 2013 03:57
User photo
Anthony Roman
Zendesk

Hi Mhairi,

You can assume an anonymous user by going to manage > people. On the right side you will see a widget that says:

 

Assume

You can temporarily log in as another user by clicking assume. This enables you to view your Zendesk from a specific user's perspective.

You can also assume an anonymous user

 

Click on "anonymous user". After this, you can go to the page https://gecko.zendesk.com/anonymous_requests/new and the link that says "edit widgets on this page" will now be shown.

Regarding the "Custom widget sample", you can go to  https://gecko.zendesk.com/home then click on "edit widgets on this page" then remove this widget in the home page.

Thanks!

 

June 26, 2013 18:32