Add the ScreenSteps Admin Bar to the Zendesk Help Center

Updated on

Requirements: You must have "Allow Unsafe HTML" checked in your Help Center so that Zendesk won't strip out the data attributes that are used to generate the admin bar links.

The Goal

We want to add a bar along the top that will give you quick access to your ScreenSteps editor from within Zendesk. This bar will only appear for your agents and managers.

The Goal

Add Javascript

Add the following javascript to your Zendesk Help Center.

You need to make sure that you insert this code right after the line: $(document).ready(function() {

See these Zendesk instructions to see how to add custom CSS and Javascript to your Help Center.


Annie Stefano

If the default users that see the SS editor options, can you change it to a different user segment (ie smaller group of agents/managers who edit documentation)?

Trevor DeVore

@Annie - This snippet uses the HelpCenter.user.role JavaScript object to present add the ScreenSteps admin bar. Zendesk has an article on this that also mentions the HelpCenter.user.groups JavaScript object. You can probably customize the code to use groups using the Zendesk example:

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Previous Article Add ScreenSteps Styles, Foldable Sections, Checklist, and Workflow features to Zendesk HC
Next Article How to add a lightbox to images in Zendesk Help Center
Still Need Help? Contact Us