How can I use Javascript in my Help Center articles?

Answered

17 Comments

  • Tal Admon

    Hi Mollie,

    Please try to check the option "display unsafe content" under Security in the general help center settings:

    https://your_domain.zendesk.com/hc/admin/general_settings

    Update the settings page after you have checked this option and reload - you should get the script tag to work as expected.

    -Tal

    1
  • Mollie Swenson

    Tal, this worked -- thank you!!

    1
  • Benedict Noel

    Hi, I've checked "display unsafe content" and saved my settings but it's still wrapping my javascript in CDATA when I edit our articles. How can I get around this?

    0
  • Wolfgang Drechsel - Exactag GmbH

    Same here... "display unsafe content" checked but CDATA appears when clicking "Ok" after editing sourcecode. Any solution on this?

    0
  • Dan Ross

    Even after checking the unsafe content option, I get the same issue as the others. Any solution available?

    0
  • Keith @ Zendesk

    This question would require some deeper diving.  Hey Dan, would you mind if we took this to a Ticket and did some research?  Let us know when you can. :)

    0
  • Lars Klinggaard

    I'm having the same problem here. Any solution?

    0
  • Dan Ross

    I ended up having a ticket made and the conclusion was that the article editor doesn't properly support a lot of JS functionality (such as onClick). 

     

    We had to refactor our work to use jQuery. There was a lot of trial and error. I asked, but there is no actual documentation about which functions the Help Centre does or doesn't support, making future development tedious. 

    0
  • Nicole - Community Manager

    Thanks, Dan. I'm sorry it was a tedious process. I've sent a note to our docs team that this might be an area we should create more information around going forward. 

    0
  • Lars Klinggaard

    Thanks for the answer, it turns out that it was my code was wrong and the JS is working fine now :)

    0
  • Nicole - Community Manager

    Glad to hear you got it working, Lars!

    0
  • Neil Carmichael

    Could we use something like the javascript library "prism" to make our code more readable?

     

    https://prismjs.com/#features-full

    0
  • Bryan Flynn

    Hi Neil -- if you're talking about using Prism in your Help Center (HC) -- it's not supported by Zendesk, but you should be able to get it working. One way to try it out:

    1. Import your Prism files as assets into your HC theme

    2. Reference your prism files in your HC theme's document_head.hbs

    <link href="{{asset 'prism.css'}}" rel="stylesheet">
    <script src="{{asset 'prism.js'}}"></script>

    3. Hand modify your HC articles, surrounding them with the appropriate HTML tags as noted on the Prism site

    You'd probably have to contend with/reconcile competing CSS behavior that is part of your HC theme. If you get it working, let the community know!

     

    0
  • Neil Carmichael

    Great, thanks Bryan.

    So far on my own I have found the HTML5 tag "details" which gives you rollup text, next step prism!

     

    <details><summary>The name of your link</summary>
    <pre>
    Your code goes here
    </pre>
     
    </details>
    0
  • Bryan Flynn

    Thanks for the update Neil. As you found, the article would contain hand-written HTML modifications via the 'Source code' button in the article editor. Of course you can upload articles using Help Center APIs as well.

    Something like this for Prism:

    <pre><code class="language-javascript">
    var client = ZAFClient.init();
    client.invoke('resize', { width: '100%', height: '200px' });
    function buttonPress() {
      console.log("button pressed");
    }
    </code></pre>

     

    0
  • Niclas Kårlin

    Hello. I get this on the initial link

     

    oops

    You're not authorized to access this page

    0
  • Jessie Schutz

    Hi Niclas!

    That post has been archived! It's referring to the functionality in the older version of our knowledge base product which was deprecated several years ago. I would recommend following the suggestions other users have made in the comments of this post. :)

    0

Please sign in to leave a comment.

Powered by Zendesk