Add a link to your ScreenSteps Live site in the main Zendesk menu

Zendesk gives you some standard navigation along the top. We want our ScreenSteps Live documentation to be on the same level as the forums so we are going to add a new tab that points to our documentation.

To do this we are going to add a Javascript widget.

Login to your Zendesk account and select Settings > Extensions.

Here is the code you will want to insert:

==================

jQuery("div#top-menu ul#green li.tab_forums").after('<li class="main tab_documentation"><a class="tab" href="http://help.screensteps.com">Documentation</a></li>');



if (jQuery("div#top-menu ul#green li.tab_forums.active").length) {
  jQuery("div#top-menu ul#green li.first").removeClass("first");
  jQuery("div#top-menu ul#green li.tab_documentation").addClass("first")
}

==================

IMPORTANT: Replace "http://help.screensteps.com" with the URL to your ScreenSteps Live site.

You can change "Documentation" to be whatever you would like (Help Files, Tutorials, etc.)

NOTE: If you want to know how this script works we will explain it at the end of this lesson.

Make the widget available to everyone and then select Create widget.

The script uses jQuery. The navigation along the top in Zendesk is just an unordered list (<ul>). All we are doing is using jQuery to insert a new list item (<li>).

1. This targets the list item we want our new menu item to appear after (the Forums tab).
2. This is the HTML that we are inserting after that list item.

This next part is necessary to make things look right when the Forums tab is selected. We only need to do this when the Forum tab is active.

1. This line checks to see if the Forums tab is active ('active' is a CSS class that Zendesk adds to the currently selected tab).

2. The next two lines remove the "first" class from the tab that has this class. Zendesk adds this to the tab that comes directly after the active tab (normally the "Submit a Request" tab). Since we are inserting a tab at this location we want to remove that class. We then add the "first" class to the tab we just created.