How can I use Javascript in my Help Center articles?
BeantwortetHello,
I'm trying to use Javascript in my Help Center articles by adding it using the HTML editor, but the HTML editor is adding // <![CDATA[ just after the the <script> tag and // ]]> just before the </script> tag and the Javascript doesn't work.
The Javascript I want to add is collapsible headers, as explained in this artticle:
Can anyone offer help on how I can get Javascript to work in my articles?
-
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
-
Tal, this worked -- thank you!!
-
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?
-
Same here... "display unsafe content" checked but CDATA appears when clicking "Ok" after editing sourcecode. Any solution on this?
-
Even after checking the unsafe content option, I get the same issue as the others. Any solution available?
-
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. :)
-
I'm having the same problem here. Any solution?
-
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.
-
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.
-
Thanks for the answer, it turns out that it was my code was wrong and the JS is working fine now :)
-
Glad to hear you got it working, Lars!
-
Could we use something like the javascript library "prism" to make our code more readable?
-
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!
-
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> -
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> -
Hello. I get this on the initial link:
oops
You're not authorized to access this page
-
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. :)
-
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!
-
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.
-
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
Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.
20 Kommentare