How can I use Javascript in my Help Center articles?

Beantwortet

20 Kommentare

  • 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
  • Same here... "display unsafe content" checked but CDATA appears when clicking "Ok" after editing sourcecode. Any solution on this?

    0
  • Dan Ross
    Community Moderator

    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
    Community Moderator

    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 S.
    Zendesk Community Team

    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 S.
    Zendesk Community Team

    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 - Community Manager
    Zendesk Developer Support

    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 - Community Manager
    Zendesk Developer Support

    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
    Zendesk team member

    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

    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 - Community Manager
    Zendesk Community Team

    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
  • Romain Miroux

    Hi Devan,

    I'm having the same issue. I can share my javascript with you if you want to investigate why the editor is adding the // <![CDATA[ when I add <script> tags.

    Please let me know asap how to fix this.

    Thank you.
    Romain

    0

Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.

Powered by Zendesk