Get a Demo

ScreenSteps Articles

Zendesk Help Center Javascript Tricks

Greg DeVore - Oct 17, 2014 5:26:00 PM

In this article we are going to talk about a few javascript/css tricks you can use in the Zendesk Help Center. We had a situation where we want to display some quick navigation links along the top of the help center for ScreenSteps/Zendesk integration, but we only wanted to display these links if the current user was a Zendesk agent or admin.

The screenshot below shows the same help center screen when an agent is logged in and when a standard end user is viewing the page. Notice that the black bar along the top only displays for the agent. 

 

29b8feb7-f613-4e25-a473-7a2c0da1f6c7-1

 

To accomplish this we are going to do the following:

  1. Add some custom HTML to the header of the page
  2. Add some custom CSS
  3. Add some custom javascript to show or hide the top bar based on who is logged in.

Add the HTML

1.1 Select "Customize design"

Go to your Help Center and select Customize design

 

select--customize-design--2

 

1.2 Select "Edit Theme"

 

select--edit-theme--1

 

1.3 Edit the Header

 

edit-the-header-1

 

We are going to add some HTML right above the header.

 

6cb9511c-50ec-4baa-aaea-51f41ea09abb-2

 

1.4 Insert HTML

Here is the HTML I am adding. It can really be whatever you want. 

<div class="agent-links">  
  <div class="header-inner">
    <ul>      
      <li><a href="http://example.com">Backend admin</a></li>      
      <li><a href="http://example2.com">Project management app</a></li>    
    </ul>  
  </div>
</div>

insert-html-1

 

2. Add CSS

Now we are going to add some CSS for our .agent-links div.

2.1 Switch to CSS tab

 

switch-to-css-tab-1

 

2.2 Add CSS

Insert some custom CSS at the top of your CSS file. You can modify this however you would like.

div.agent-links {
  background-color:#333;
  padding-top: 15px;
  padding-bottom: 15px;
}
div.agent-links .header-inner {   height: auto; }
div.agent-links li {   list-style: none;   float: left;   margin-right: 15px; }
div.agent-links li a {   color:yellow; }

add-css-1

 

2.3 Preview your changes

Select Preview. You should see something like the screenshot below.

 

preview-your-changes-1

 

3. Add Javascript

Finally, we are going to add the necessary javascript. But before we do that we need to add one last bit of CSS. We want to hide the .agent-links div by default.

3.1 Hide the div by default

Add display: none; to the div.agent-links CSS.

 

hide-the-div-by-default-1

 

3.2 Switch to JS tab and insert the javascript

Select the JS tab and insert the following javascript right after the line $(document).ready(function() { 

if (HelpCenter && HelpCenter.user) {
   var role;
   role =  HelpCenter.user.role;
   if (role == 'manager' || role == 'agent') {
     $('div.agent-links').show();
   }
}

switch-to-js-tab-and-insert-the-javascript-1

Let me explain the javascript a bit. The HelpCenter object is a javascript object that Zendesk provides to you. Using this object you can find out the following about the current user:

  • Organization
  • Tags
  • Role
  • Groups
  • Email
  • Avatar url
  • Current locale

There is more in there too. If you want to explore it, open up the javascript console in your browser and type HelpCenter while in your Help Center. You will see all of the attributes you can access.

So, in this code we are checking to see if the object is there and if a user object is attached. We then checking to see if the current user has a role of 'manager' or 'agent'. If they do then we show the .agent-links div.

4. Preview changes

4.1 Preview as End-user

Select End-user from the preview options. You shouldn't see the links along the top.

 

preview-as-end-user-1

 

4.2 Preview as Agent

Now switch to Agent. You should see the links.

 

preview-as-agent-1

 

5. Publish

5.1 Select Save

 

select-save-1

 

5.2 Select Publish changes

 

select-publish-changes-1

 

That's it. Hopefully that gives you a good idea about how you can add user-specific information to your Zendesk Help Center. 

Let us know in the comments what custom information you might add to your Help Center by using this approach.

 

Get FREE Zendesk tips  

Topics: Zendesk

Greg DeVore

Greg DeVore

CEO of ScreenSteps

Previous Post

How to auto assign a ticket to a specific agent in Zendesk

Next Post

Using the Zendesk HelpCenter Javascript Object in your Customizations

Image_13.jpg

Free Download - 10 Effective Sales Management Skils

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy.

Learn More

0 Comments

Blog Updates

Subscribe

Improve your onboarding, training, and support, with articles delivered right to your inbox

Subscribe to Email Updates

100% Privacy. No Spam.

Recent Posts