Setting up Zendesk to use Workflow Articles

Updated Nov 07, 2019

Complete the following steps so that workflow articles function in Zendesk.

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!

Still Need Help?

Contact Us