Question
How can I use the Source code () option in the help center article editor toolbar to format the text of my article?
Answer
You can use the help center article editor toolbar to format your articles. The Source code feature lets you apply HTML tags to enrich the formatting of your text.
Find below a list of HTML tags you can use in your articles.
| Blockquotes | <blockquote>block quote text here</blockquote> |
| Pre-formatted text | <pre>pre-formatted text here</pre> |
| Headings | <h1>header text here</h1> (h1 biggest, h6 smallest) |
| Superscript | <sup>superscript text here</sup> |
| Subscript | <sub>subscript text here</sub> |
| Strikethrough | <strike>strikethrough text</strike> |
| Indentation | <p style="padding-left: 30px;">Indented text here</p> (modify the # of pixels (e.g., 35px) to change the indentation amount) |
| In-line code | <code>snippet here</code> |
| Highlight | <mark>highlighted text here</mark> |
The screenshot below shows how the HTML above renders text in Help Center.
This is not a complete list of all the HTML elements you can add to articles. However, it represents the most common use cases. If your HTML tags and attributes are not displaying correctly, you may need to adjust your settings. For more information, see the article: Allowing unsafe HTML in help center articles.
For more information on creating and editing articles in your help center, see the article: Creating and editing articles.
22 Comments
Does guide also support html to embed videos from non supported streaming services (we do not want to upload them to a public platform)?
The inserting video into articles article sends us here, but there is no source code to show us what to do.
That's a good callout, this page is mainly meant to show you just some of the ways you can leverage html to do things in articles. As there is an extensive amount of ways to embed video's in html, we chose not to include them on this page. If you want to let me know where you're hosting your videos, I can provide an example of how to embed them into your articles.
Hello ZD, I am trying to add 2 iframes to a Zendesk article, a Google Map, and a client website. In edit mode, the source code displays properly. When saving and publishing, on the front end = no changes. I thought it might take a delay, but no changes. Here is the source code.
<p>
<iframe style="border: 0;" src="https://www.fakeWebsite.com/" width="600" height="550" scrolling="no" allowfullscreen=""></iframe>
</p>
<p>
<iframe style="border: 0;" src="https://www.google.com/maps/embed?anotherFakeWebsite" width="600" height="450" allowfullscreen=""></iframe>
</p>
Can you advise?
Hey Terry H.,
The iframe is considered an 'unsafe' html attribute so you'll need to turn on the feature 'Display unsafe content' in your help center's general settings.
Hope this helps,
Eric
I'm just starting to learn how to build out my KB and am curious about getting videos embedded in the articles. I think I read on a different help page that videos that are on, say, Loom or Vimeo have to be marked "public" - is that correct? I do not want people (who are logging in to the KB) to be able to share or download the video but simply access it within the article itself.
Brilliant Eric, thank you so much for your reply, you have helped immensely! I knew it was just a setting!
Hi! I'm trying to add a strikethrough in an article. It shows up and works perfectly in the edit page for the article, but doesn't show up on the published, user facing page.
Can someone help me figure out why that might be happening?
Most likely, the method you're using is considered "unsafe HTML" by Zendesk – for security reasons, there are a defined set of HTML tags and attributes listed here, and anything not included on that list will be stripped out of the article unless you enable Display unsafe content: Allowing unsafe HTML in help center articles
However, strikethrough text can be achieved using safe HTML and CSS. Simply create a CSS class for strikethrough text, and add it to the end of the style.css file in your help center theme and publish the theme:
.strike-through {text-decoration: line-through;}Then in your article, you'll need to apply that text via HTML to the text you want to strike out:
<div class="strike-through"><p>Strike-through via CSS</p></div>(Note: When you do that, the text will not show as strikethrough when you're editing it, but it will be strikethrough in the published article)
Hi ZD,
I am trying to embed a video to my Zendesk knowledge base, but the video source is not on the supported providers. How to do I go about embedding the video on the knowledge base? My videos are hosted by Screencast-o-matic.
Any guidance will be greatly appreciated.
You can find instructions here on how to insert videos from non-supported providers: Inserting videos by embedding code
@... - The link you provided actually sends us back to this article (see highlighted section). It's a bit of a loop. Could you provide us with some more specific instructions for embedding videos from a non-supported provider? Thanks!
Hi Edisa,
We do not have a specific article that shows a step by step way of doing this however if you go into an article, the article source code can be pulled by clicking on this button from the toolbar.
This opens up the editor where you can enter HTML codes to embed a video you desire. While custom coding is outside our scope of support, I am sharing this piece of code with you which I have found online that works for me:
Question guys, I am trying to add border to images and add some text that will be hidden to the user but searchable to the engine, using the code snippet and inline styling, and all works just fine in the editor but not in the preview, or when I am publishing it, I am doing something wrong? thank you in advance.
It's likely that you're using HTML tags or attributes that are considered "unsafe". There's information this, and how to allow unsafe HTML, here: Allowing unsafe HTML in help center articles
I have a question. How can I make it so when someone clicks on an article in a section, that it goes to another website?
Hey ,
Just do the following:
i). Copy paste the code to your script.js file. You will need to add your URLs as mentioned below.
jQuery($ => {
$('.article-list-item.article-promoted > a').attr('href', (i, h) => h.replace('ORININAL HREF VALUE', 'ANOTHER WEBSITE LINK'));
});
Screenshot for the same:
Ex.
ii). jquery CDN to document_head.hbs file.
Thanks
Hello, how do I edit source code for a phone number within an article? So the phone number can be dialed by clicking the linked number.
Hi Sierra Collins,
Do the following:-
i). Open source code of an article.
ii). Write your phone number with anchor tag like this.
iii). Click OK button.
iv). Save your article which you have been edit for this.
v). Now, your number would be dial by a click.
Thanks
Team
It only works in the edit code. I tested it in the edit code of the home page and it works.
Hey Sierra/Everyone,
Hoping someone can help me.
I tried adding the link on the home_page.hbs file like so:
<p class="hero-text">Call <a class="hero-link" href=“tel:123-456-7890”>123-456-7890</a> for Support</p>
Clicking on the link takes me to zendesk 404 error page.
Did you take any additional steps to get it to work? I've also gone to settings --> Guide Settings --> Security and checked the box for Display Unsafe Content which was suggested in another help article.
Hello Jennifer,
It looks like there are two different types of double-quotes used in your code, which is why it's not working properly.
One is the straight, plain text quotes, and the other is curvy "Smart quotes" which causes the coding to break.
Can you please try re-formatting your code and use only the plain text quotes (" ") instead?
Please sign in to leave a comment.