How can I format the text of the article with the source code?

Return to top

22 Comments

  • Sean Hamelman

    Does guide also support html to embed videos from non supported streaming services (we do not want to upload them to a public platform)?

    3
  • Lisa Sedlak

    The inserting video into articles article sends us here, but there is no source code to show us what to do. 

    0
  • Eric Nelson
    Zendesk Developer Advocacy
    Hey Lisa!

    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. 
    1
  • Terry H.

    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? 

    0
  • Eric Nelson
    Zendesk Developer Advocacy

    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

    2
  • Nancy Morris

    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.

    0
  • Terry H.

    Brilliant Eric, thank you so much for your reply, you have helped immensely! I knew it was just a setting! 

    0
  • Lydia L.

    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?

    0
  • Dave Dyson
    Hi Lydia,
     
    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)
     

     
     
     
     
     
    0
  • B.M

    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. 

    0
  • Dave Dyson
    Hi B.M., 
     
    You can find instructions here on how to insert videos from non-supported providers: Inserting videos by embedding code
    0
  • Edisa Denic

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

    0
  • Jeff C
    Zendesk Customer Care

    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:

    <p>
      <video controls=“controls” width=“750" height=“750”>
        <source src=“enter your video URL source here” type=“video/mp4”>
      </video>
    </p>
     
    0
  • Fernando Fischer

    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. 

    0
  • Dave Dyson
    Hi Fernando,
     
    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
    0
  • Lisa Sedlak

    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? 

     

     

     

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    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

     

     

    0
  • Sierra Collins

    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. 

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hi Sierra Collins,

    Do the following:-

    i). Open source code of an article.

    ii). Write your phone number with anchor tag like this.

      <a href="tel:123-456-7890">123-456-7890</a>




    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

    0
  • Sierra Collins
    Hello, this anchor formula is not working in the article. It creates a link, but doesnt dial out.
     
    It only works in the edit code. I tested it in the edit code of the home page and it works. 
    0
  • Jennifer Powell

    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. 

    0
  • Zsa Trias
    Zendesk Customer Care

    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? 

    <p class="hero-text">Call <a class="hero-link" href="tel:123-456-7890">123-456-7890</a> for Support</p>
    0

Please sign in to leave a comment.

Powered by Zendesk