››

Add a Documentation Tab in Zendesk

This feature is only available in the Zendesk Classic Web Portal. Click here to understand the differences.

You can add a "Documentation" tab in Zendesk's navigation that points to your ProProfs documentation. This makes it easy for your end users to access your documentation when they are in Zendesk. You can also customize ProProfs's header to match Zendesk for a seamless experience.

ï»¿Step 1 - Enable Zendesk in ProProfs

The first step is to copy a small piece of code from ProProfs.

Log in to your ProProfs account (as an administrator).
Click Settings in the toolbar.
Click Zendesk Integration.
Check Turn on Zendesk Integration to enable Zendesk Integration.
The click on the link to go into the old Zendesk.
Select all text in the Documentation Tab box, then right-click and select Copy.

ï»¿Step 2 - Add the Widget in Zendesk

After you copy the code from ProProfs, log in to your Zendesk account.

Log in to your Zendesk account, and select Settings > Extensions.
Select add widget in the right-hand corner.
From the list of available widgets, select Global JavaScript.
Enter the widget information.

For the Title enter "ProProfs Tab".
For Available for select who you want to be able to see the documentation tab.
In the Content text field, paste the code you copied from ProProfs.
Select Create Widget and then Submit.

Make sure you change the drop-down menu selection from "Preview widget" to "Create widget."

ï»¿How the Code Works

The system will provide you with the exact code script you need so you don't have to worry about changing anything. However, we have provided an explaination of the script below, just in case you want to tweak something.

// URL to your helpIQ site
var helpiq_URL = document.location.protocol + "//docs.helpdocsonline.com";
//This sets the tab to appear after the forum tab.
//You can change this to whatever order you want tab_home, tab_forums, tab_new, tab_requests
jQuery("div#top-menu ul#green li.tab_forums").after('<li class="main tab_documentation">
//You can change "Documentation" to whatever you want
<a class="tab" href="'+helpiq_URL+'">Documentation</a></li>');
//Makes everything look right when the forum tab is selected. Do not alter.
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");
}

Show/Hide Based on User Tags

In Zendesk you can tag users and organizations.
Lets say you have developer guides in ProProfs and you want to add a tab in Zendesk linking to it.
However, you only want the tab to appear for Zendesk users that are tagged "developer" or "premium"
You can accomplish by wrapping the below code arround the documentation code. Change the tags 'premium' and 'developer' to whatever tags you want the tab to appear for.

(function() {
if (currentUser.tags.indexOf('premium','developer') >= 0 ) {
//paste documentation tab code here
}}
());

Looks like this:

Was this information helpful?

Thank you Your feedback helps us to continually improve our content.