Editing the source code of help center articles

Return to top

17 Comments

  • Julia Shyshliuk

    Hi Zendesk Team, can I find any general resources at all to learn how to use the iframes in Zendesk Guide articles? 

    0
  • Russell Chee
    Zendesk Customer Care

    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

    0
  • Kat Thorson

    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>

    1
  • Dave Dyson

    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:

    1
  • Kath

    Hi, 

    Our help center is set to display unsafe and together with that we are using css of

    .oashide {
    display: none;
    }

    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?

    0
  • Greg Katechis
    Zendesk Developer Advocacy

    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.

    0
  • Kath

    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.

    0
  • Greg Katechis
    Zendesk Developer Advocacy

    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!

    0
  • Greg Katechis
    Zendesk Developer Advocacy

    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.

    0
  • Kath

    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.

     

    0
  • Valentine

    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.

    0
  • Operations Support

    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.

    0
  • Stefano Volpe

    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?

    0
  • Gorka Cardona-Lauridsen
    Zendesk Product Manager

    @... 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.

    0
  • David Bjorgen

    The "safe" list is missing a few semantic HTML elements:

    • figure
    • figcaption
    • mark
    0
  • Alan Blair
    Note: Even if your help center doesn't strip safe tags, the third-party HTML article editor used in the help center (TinyMCE) may strip some safe tags from the HTML. For example, the editor removes <i> tags with no content, such as those used for Font Awesome icons.

    Does anyone know of any workarounds/resolutions to this?

     

    0
  • David Bjorgen

    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 (&nbsp;) inside the <span>.

    0

Please sign in to leave a comment.

Powered by Zendesk