The source code editor lets you edit the HTML source of articles and content blocks for the help center. This lets you customize and style help center content in ways that aren't possible using the standard WYSIWYG editor.
To keep your help center secure and provide the best end-user experience, Zendesk limits the HTML you can use in articles and content blocks.
Supported HTML
This section lists the HTML elements, attributes, and content supported in articles and content blocks. In addition to the listed attributes, the HTML elements in this section also support the following global attributes:
id, class, aria-*, data-*, titleid and class attributes. For more information, see HTML limitations for content blocks.style attribute but only allow support style declarations for specific properties. For example, the span element only lets you set the background-color or color properties using an inline style attribute. These properties are documented as Allowed inline styles.
Use the following links to quickly jump to a listed element:
a | abbr | address | blockquote | br | caption | cite | code | col | colgroup | dd | del | dfn | div | dl | dt | em | figcaption | figure | h1 | h2 | h3 | h4 | h5 | h6 | hr | iframe | img | ins | kbd | li | ol | p | pre | samp | small | source | span | strong | sub | sup | table | tbody | td | tfoot | th | thead | tr | track | ul | var | video
a
Attributes: href, target, title, name, rel
Allowed protocols for href: http, https, mailto, ftp, sftp, sms, tel
Content: @text, abbr, address, blockquote, br, cite, code, del, dfn, div, dl, em, figure, h1, h2, h3, h4, h5, h6, hr, img, ins, kbd, ol, p, pre, samp, small, span, strong, sub, sup, table, ul, var, video
abbr
Attributes: Only global attributes
Content: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video
address
Attributes: Only global attributes
Content: @text, a, abbr, address, blockquote, br, cite, code, del, dfn, div, dl, em, figure, hr, iframe, img, ins, kbd, ol, p, pre, samp, small, span, strong, sub, sup, table, ul, var, video
blockquote
Attributes: Only global attributes
Content: @text, a, abbr, address, blockquote, br, cite, code, del, dfn, div, dl, em, figure, h1, h2, h3, h4, h5, h6, hr, iframe, img, ins, kbd, ol, p, pre, samp, small, span, strong, sub, sup, table, ul, var, video
br
Attributes: Only global attributes
caption
Attributes: Only global attributes
Content: @text, a, abbr, address, blockquote, br, cite, code, del, dfn, div, dl, em, figure, h1, h2, h3, h4, h5, h6, hr, iframe, img, ins, kbd, ol, p, pre, samp, small, span, strong, sub, sup, table, ul, var, video
cite
Attributes: Only global attributes
Content: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video
code
Attributes: Only global attributes
Content: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video
col
Attributes: span
colgroup
Attributes: Only global attributes
Content: col
dd
Attributes: Only global attributes
Content: @text, a, abbr, address, blockquote, br, cite, code, del, dfn, div, dl, em, figure, h1, h2, h3, h4, h5, h6, hr, iframe, img, ins, kbd, ol, p, pre, samp, small, span, strong, sub, sup, table, ul, var, video
del
Attributes: Only global attributes
Content: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video
dfn
Attributes: Only global attributes
Content: @text, a, abbr, br, cite, code, del, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video
div
Attributes: Only global attributes
Content: @text, a, abbr, address, blockquote, br, cite, code, del, dfn, div, dl, em, figure, h1, h2, h3, h4, h5, h6, hr, iframe, img, ins, kbd, ol, p, pre, samp, small, span, strong, sub, sup, table, ul, var, video
dl
Attributes: Only global attributes
Content: dd, td
dt
Attributes: Only global attributes
Content: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video
em
Attributes: Only global attributes
Content: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video
figcaption
Attributes: Only global attributes
Content: @text, a, abbr, address, blockquote, br, cite, code, del, dfn, div, dl, em, figure, h1, h2, h3, h4, h5, h6, hr, iframe, img, ins, kbd, ol, p, pre, samp, small, span, strong, sub, sup, table, ul, var, video
figure
Attributes: Only global attributes
Content: @text, a, abbr, address, blockquote, br, cite, code, del, dfn, div, dl, em, figcaption, figure, h1, h2, h3, h4, h5, h6, hr, iframe, img, ins, kbd, ol, p, pre, samp, small, span, strong, sub, sup, table, ul, var, video
h1
Attributes: Only global attributes
Content: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video
h2
Attributes: Only global attributes
Content: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video
h3
Attributes: Only global attributes
Content: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video
h4
Attributes: Only global attributes
Content: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video
h5
Attributes: Only global attributes
Content: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video
h6
Attributes: Only global attributes
Content: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video
hr
Attributes: Only global attributes
iframe
Attributes: src, allow, allowfullscreen, mozallowfullscreen, webkitallowfullscreen, oallowfullscreen, msallowfullscreen, name, class, width, height, frameborder
Allowed inline styles: aspect-ratio, width
Allowed protocols for src: http, https, blob, data
Allowed domains for embeds: https://content.jwplatform.com/, https://fast.wistia.com/, https://play.vidyard.com/, https://player.vimeo.com/, https://players.brightcove.net/, https://web.microsoftstream.com/, https://www.loom.com/, https://www.microsoft.com/, https://www.youtube-nocookie.com/, https://www.youtube.com/
img
Attributes: src, alt, name
Allowed inline styles: height, width
Allowed protocols for src: http, https, blob, data
ins
Attributes: cite, datetime
Content: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video
kbd
Attributes: Only global attributes
Content: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video
li
Attributes: Only global attributes
Content: @text, a, abbr, address, blockquote, br, cite, code, del, dfn, div, dl, em, figure, h1, h2, h3, h4, h5, h6, hr, iframe, img, ins, kbd, ol, p, pre, samp, small, span, strong, sub, sup, table, ul, var, video
ol
Attributes: start, type, reversed
Content: li
p
Attributes: Only global attributes
Content: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video
pre
Attributes: Only global attributes
Content: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video
samp
Attributes: Only global attributes
Content: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video
small
Attributes: Only global attributes
Content: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video
source
Attributes: src, type
Allowed protocols for src: http, https, blob, data
span
Attributes: name
Allowed inline styles: background-color, color
Content: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video
strong
Attributes: Only global attributes
Content: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video
sub
Attributes: Only global attributes
Content: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video
sup
Attributes: Only global attributes
Content: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video
table
Attributes: Only global attributes
Content: caption, colgroup, tbody, tfoot, thead, tr
tbody
Attributes: Only global attributes
Content: tr
td
Attributes: colspan, rowspan
Allowed inline styles: height, text-align, vertical-align, width
Content: @text, a, abbr, address, blockquote, br, cite, code, del, dfn, div, dl, em, figure, h1, h2, h3, h4, h5, h6, hr, iframe, img, ins, kbd, ol, p, pre, samp, small, span, strong, sub, sup, table, ul, var, video
tfoot
Attributes: Only global attributes
Content: tr
th
Attributes: colspan, rowspan, scope
Allowed inline styles: height, text-align, vertical-align, width
Content: @text, a, abbr, address, blockquote, br, cite, code, del, dfn, div, dl, em, figure, h1, h2, h3, h4, h5, h6, hr, iframe, img, ins, kbd, ol, p, pre, samp, small, span, strong, sub, sup, table, ul, var, video
thead
Attributes: Only global attributes
Content: tr
tr
Attributes: Only global attributes
Content: td, th
track
Attributes: default, kind, label, src, srclang
Allowed protocols for src: http, https, blob, data
ul
Attributes: Only global attributes
Content: li
var
Attributes: Only global attributes
Content: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video
video
Attributes: src, height, width, controls
Allowed protocols for src: http, https, blob, data
Content: source, track
Empty HTML container elements
Zendesk automatically removes most empty container elements, such as i or span. These elements typically must contain content to be rendered. Zendesk doesn't remove empty p tags. Instead, the Zendesk inserts as the element's content. Example:
<p> </p>Unsafe HTML
By default, Zendesk considers the following HTML elements to be unsafe.
applet, button, embed, form, input, object, script, textarea, styleHandling unsafe HTML in articles
For articles, the source code editor doesn't remove unsafe HTML elements or unsupported HTML attributes. Instead, they're excluded in the HTTP responses used to render the help center articles. As a result, articles might not render as intended.
Allowing unsafe HTML in articles
You can override the default setting to allow unsafe HTML in help center articles. This setting doesn't affect unsafe HTML in content blocks.
Warning: Making this change will allow potentially malicious code to be executed when users open an article in a browser.
To allow unsafe HTML in HTTP responses
- In Guide, click the Settings icon (
) in the sidebar. - Under Security, select the Display Unsafe Content option.
- Click Update.
Handling unsafe HTML in content blocks
For content blocks, the source code editor removes unsafe HTML elements and unsupported attributes. The content inside an unsafe element is placed in a p element as described in Unknown HTML. You can't allow unsafe HTML in content blocks.
Unknown HTML
Any HTML element that's not supported or unsafe is considered unknown. Zendesk removes any unknown tag and places the tag's content in a p element.
mytag element.
<mytag>Hello world!</mytag>In the HTTP responses used to render the help center, the mytag element is removed. Its content is instead placed in a p element.
<p>Hello world!</p>Styling HTML in help articles
Where possible, Zendesk recommends the class attribute and related CSS classes to style HTML in help center articles. The CSS classes should be defined in the help center theme. For more information, see Customizing your help center theme.
When creating CSS rules for your help center theme, avoid using nested selectors, such as div.container > p > img. Such rules are difficult to maintain and can target unintended elements. Instead, use selectors that directly style a class, such as .container-image. Then directly add the class to affected HTML elements using the class element. For example: <img
class="container-image" ...>
Avoid using the style attribute to apply inline styling to HTML elements. Inline styling is difficult to maintain and can result in inconsistent styling.
HTML limitations for content blocks
id or class attributes with the following exceptions:
- Heading tags, such as
<h2>, retain theiridattribute. <div>tags retain theirclassattribute.
17 Comments
Hi Zendesk Team, can I find any general resources at all to learn how to use the iframes in Zendesk Guide articles?
Hey Julia,
Thanks for reaching out to Zendesk Support about your query, I hope you are doing well. I would like to set expectations that at this current time using iframe on Zendesk Guide articles are not supported as an intended workflow. There are third party resources that may be able to assist as a workaround but unfortunately we do not have any native articles that could assist on this. Let me know if you have any other questions or need anything else!
Russell
So what in this coding is considered "unsafe" since it seems to be used everywhere for creating a note or warning box? When I use this code for creating note boxes, it won't appear in the published article because "display unsafe content is off.
<section>
<div style="background-color: #daf0ff; padding: 15px;">
<p>Example text is here</p>
</div>
</section>
Hi Kat,
As the article says, any tag or attribute that's not included in the lists above is considered unsafe; in your case, this would include the section tag, and the background-color and padding attributes.
However, you can achieve much the same result without having to enable unsafe content, by adding a class to your theme's style.css file, and then referencing that in the article (since the class tag is considered safe). For example, if you add the following to the style.css file:
.warning-box {
background-color: #daf0ff;
padding: 15px;
}
And then replace the your article html with this:
<div class="warning-box">
<p>Example text is here</p>
</div>
Your warning box should then appear in your published article:
Hi,
Our help center is set to display unsafe and together with that we are using css of
to hide some content we are readying prior to a release.
This works great in the browser and the articles are not showing the hidden content. However, the Help Web Widget displayed on our pages is displaying the hidden content when displaying an article and the css is being stripped out.
Any suggestions to prevent hidden content displaying via the web widget?
Hi Kath! One way that you could accomplish this is by filtering your help center content in the widget. It's an inclusive filter, so it's a bit of a pain in the neck, but you could section off the content that you want hidden into its own category and then only display content from other categories. You can see how to accomplish that in this article.
Hi Greg,
Thank you. The content we are hiding is in an article where we wish the remainder of the article to show so we are using -
<div class="oashide">hidden text here</div>
Your response, if I am understanding, suggests it would need to be in a separate article in a separate category which we want to avoid. So am I correct in assuming that the the help center web widget will strip out this css? I'm confused as all articles I have found say that using css rather than html to hide content should work.
Ah, my apologies...I somehow zeroed in on one aspect of your comment and missed the crux of what you were asking. My solution is definitely not what you're looking for in that case.
To be honest, I haven't encountered the widget doing anything different with the CSS, but it's entirely possible that it does. I'm going to run some tests in my account to see if I can come up with something here that will work for you. I'll get back to you one way or the other within the hour!
Just so that I can make sure we are using the same settings, do you have a link to a page where your widget is deployed? If it's not something that you can share here, let me know and I can create a private ticket for us.
Thank you. I would have to give you login access to our test database so a private ticket would be great and then I will give you a link the tutorial/article in the kb browser and a login so that you can search for same tutorial in web widget.
Hi,
I added the class in style.css file, and then used it in an article, following the instruction from Dave Dyson. It is now correct in my help center however this code is not showing on the web widget help center..
Is there a specific manipulation to do in order to make sure that the web widget shows the same as my help center?
Thanks for your help.
UPDATE: To find this setting it is actually
1. In Guide, on the sidebar, click the Settings icon.
2. Under Guide Setting > Security, click Display Unsafe Content check box.
3. Click Update.
Hi! Are safe tags and attributes for tickets the same as the ones listed here? Or perhaps there are two different lists for those altogether?
@... take a look at Welcome to WhatsApp in Zendesk Support.
If you can't find what you need there you should contact our support using the chat in the bottom right corner.
The "safe" list is missing a few semantic HTML elements:
Does anyone know of any workarounds/resolutions to this?
Alan Blair you can wrap Font Awesome in <span> tags instead of <i> tags. In certain cases, such as tables, empty <span> tags are removed, so you have to add a non-breaking space ( ) inside the <span>.
Please sign in to leave a comment.