Add ScreenSteps Styles, Foldable Sections, and Workflow features to Zendesk HC

Updated Mar 23, 2020

In order for all articles authored in ScreenSteps to look and function correctly in Zendesk you will need to add some CSS and JavaScript to your Zendesk Help Center template. For example, styled paragraphs, Foldable Sections, and Workflow articles all require additional CSS and JavaScript to work properly.

Examples

This is an example of a text style. It makes certain text stand out from the rest--helpful for warnings, tips, alerts, information, or introductions.

This is an example of a foldable section

You can include additional content under a foldable section.

Updating your Zendesk template

Add ScreenSteps Javascript and CSS to Your Site

Important: The method for inserting ScreenSteps Javascript and CSS has changed. You will now reference the ScreenSteps CSS and Javascript from the <head> section of your Zendesk template.

Insert the following code into the document_head.hbs section of your Zendesk template.

<link href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet">
<link href="//assets.screensteps.com/assets/external-services/v1/article.css" rel="stylesheet">
<script src="//assets.screensteps.com/assets/external-services/v1/zendesk-helpcenter.js"></script>

Do you already have ScreenSteps javascript in Zendesk?

If you've previously been using ScreenSteps with Zendesk, you may have already added javascript to Zendesk (to get foldable sections functioning). If that's the case, you'll need to do an additional step.

Comment out the old ScreenSteps Javascript if you have it installed

You will need to find the old ScreenSteps javascript which will be in your script.js file.

On the line after the line that says:

// BEGIN SCREENSTEPS 

Insert the following:

/*

On the line BEFORE the line that says:

// END SCREENSTEPS

Insert the following:

*/

This will prevent javascript conflicts from happening.

Allow unsafe HTML in Zendesk articles

The ScreenSteps workflow articles make use of data attributes which are not allowed by default in Zendesk articles. You need to select Display Unsafe Content in your Zendesk Guide settings. See here for instructions from Zendesk:

https://support.zendesk.com/hc/en-us/articles/115015895948-Allowing-unsafe-HTML-in-articles

Congratulations, you are done!

6 Comments

Reagan Helms

Can I add or edit the javascript so that we can link customers directly to a foldable section, and have it open for them?

Greg DeVore

@Reagan - You don't need to add javascript. If you create an anchor for the section in ScreenSteps and then add that anchor to the end of the URL you share the foldable section will automatically open up.

Tony

Hi Greg, I could use a little help with the styling of the foldable section titles. I see the selectors you provided above, but I'm not sure where to place them or what designators to add. I want Heading 1 to be 28px, Heading 2 to be 24px, Heading 3 to be 20px, and Heading 4 to be 16px. Can you suggest how to insert this into the CSS?

Trevor DeVore

@Tony - I just added an example of the CSS that changes the foldable section font size. You would just add this CSS to the area in Zendesk where you add other CSS.

Lisa

Hi. I'm not familiar with html, CSS or Java but am trying to teach myself. The instructions here say "Add the javascript below to Zendesk to make foldable sections work inside of Zendesk." Where would I add these? Must I do Step 1 before I do this? If so, where do I add that code?
Thank you.

Trevor DeVore

@Lisa - If you look in the text block with the green background you will se a link to the Zendesk instructions that show where you add javascript and css in Zendesk.

Add your comment

E-Mail me when someone replies to this comment
Previous Article Set up your Zendesk integration
Next Article Add the ScreenSteps Admin Bar to the Zendesk Help Center

Still Need Help?

Contact Us