10

Widgets (Zendesk Classic)

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. 

53 comments

Please sign in to leave a comment.