How can I use Javascript in my Help Center articles?

Answered

19 Comments

  • Tal Admon
    Comment actions Permalink

    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
    Comment actions Permalink

    Tal, this worked -- thank you!!

    1
  • Benedict Noel
    Comment actions Permalink

    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
    Comment actions Permalink

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

    0
  • Dan Ross
    Comment actions Permalink

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

    0
  • Keith @ Zendesk
    Comment actions Permalink

    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
    Comment actions Permalink

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

    0
  • Dan Ross
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    Glad to hear you got it working, Lars!

    0
  • Neil Carmichael
    Comment actions Permalink

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

     

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

    0
  • Bryan - Community Manager
    Comment actions Permalink

    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
    Comment actions Permalink

    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 - Community Manager
    Comment actions Permalink

    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
    Comment actions Permalink

    Hello. I get this on the initial link

     

    oops

    You're not authorized to access this page

    0
  • Jessie Schutz
    Comment actions Permalink

    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
  • Saul Goodman
    Comment actions Permalink

    Hi. I know this post is old, but the editor is still adding // <![CDATA[ when I add <script> tags. I've enabled "display unsafe content". is there any way to prevent this? Thanks!

    0
  • Devan
    Comment actions Permalink

    Hello Saul Goodman,

    This seems like some unexpected behavior, so I am going to open up a ticket on your behalf. You should receive an email shortly followed by a response from one of our specialists. 

    Best regards. 

    0

Please sign in to leave a comment.

Powered by Zendesk