ScreenSteps

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

Updated on

Workflows are not supported in your browser.
Please use a recent version of Chrome, Edge, Firefox or Safari to display this page.

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, Checklists, 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="//assets.screensteps.com/assets/external-services/v1/article.css" rel="stylesheet">
<script src="//assets.screensteps.com/assets/external-services/v1/zendesk-helpcenter.js"></script>
Click to copy
Zendesk template

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 and CSS which will be in your script.js and style.css files. Search for the references to "screensteps" in these files and remove any sections with JavaScript or CSS specific to ScreenSteps.

If you have made your own customizations for ScreenSteps content then you will want to keep those changes around, but you should start by removing them and then adding them back in once you have confirmed that the JavaScript and CSS file references are working.

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

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

Previous Article Set up your Zendesk integration
Next Article Add the ScreenSteps Admin Bar to the Zendesk Help Center
Still Need Help? Contact Us