Tips and Notes Boxes

6 Comentários

  • Ryan Boyer

    I agree with this feedback. This feature would drive consistency across articles so that a "Note," "Info," or "Warning" box would be the same throughout. Currently, the only way to accomplish this is through the HTML editor, which is prohibitive for many users.

    Here's an example of a Zendesk article that uses these types of boxes: https://support.zendesk.com/hc/en-us/articles/360022182294. 

    1
  • Katarzyna Karpinska
    Zendesk Product Manager

    Hi Rachel Scriven,

    in 2022 we are planning to upgrade our content editing experience and invest a lot in our WYSIWIG editor. Adding preformatted call-outs for notes or info boxes is definitely on our minds. 

    If you wish to follow the roadmap for Knowledge Management please check out this post.

    2
  • Monika Kanomata

    +1 to Rachel! I would love to see this feature in 2022 :) Hopefully, without using the HTML editor and just click icons to update the tip box color in yellow or blue.

    1
  • PayByPhone

    Hi Rachel Scriven Katarzyna Karpinska

    This feature would be great, this has really become a standard in help center articles, is it still planned for 2022 ?

    Thanks,

    Lucas

    0
  • Katarzyna Karpinska
    Zendesk Product Manager

    Hi PayByPhone,

    We are working on many changes to the foundation of our editor experience this year. Some are already visible (e.g. in the content blocks editor) and some are not yet available to our customers but are necessary to add new features in the future easily. We expect to start seeing new functionalities (like e.g. predefined callout styles) from next year onwards.

    0
  • Christina Hernandez

    This feature would be fantastic to have. For now, you can take the CSS styling from this website and insert it into your stylesheet. Then modify color, border, margins, etc. as needed. 

    Insert this into your style.css file:

    .article-body div.note.tip {
        background-color: #def1f4;
        padding: 10px;
        margin-left: 0px;
        margin-right: 15px;
        margin-top: 15px;
        margin-bottom: 15px;
        border-color: #BECFD1;
    }

    .article-body div.note.important {
        background-color: #FFE6CC;
        padding: 10px;
        margin-left: 0px;
        margin-right: 15px;
        margin-top: 15px;
        margin-bottom: 15px;
        border-color: #D1BDA7;
    }

    .article-body div.note {
        background-color: #fbf2d0;
        padding: 10px;
        margin-left: 0px;
        margin-right: 15px;
        margin-top: 15px;
        margin-bottom: 15px;
        border-color: #D1CAAD;
        border-left-width: 5px;
        border-left-style: solid;
        color: #06363C;
    }

    .article-body div.note.warning {
        background-color: #FFDED9;
        padding: 10px;
        margin-left: 0px;
        margin-right: 15px;
        margin-top: 15px;
        margin-bottom: 15px;
        border-color: #D1B6B2;
    }

    In your articles, use the following to insert each type of callout as needed into the source code:

    <div class="note tip"></div>

    <div class="note important></div>

    <div class="note"></div>

    <div class="note warning"></div>

    Just know that the note callout box won't show up in your Zendesk article draft. It'll only show on the end user pages when you preview or publish the article. 

    0

Por favor, entrar para comentar.

Powered by Zendesk