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.
You can include additional content under a foldable section.
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="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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
Can I add or edit the javascript so that we can link customers directly to a foldable section, and have it open for them?