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.
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>
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
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.