Creating content filter buttons for your Guide articles

12 Comments

  • Christopher Boerger

    Super Cool Thanks Rob! :) 

    1
  • Christopher Boerger

    Could you add the complete code of an example that works here? 

    0
  • Rob Stack
    Zendesk Documentation Team

    Hi Chris Boerger, here's an example that I just tested in my lab. Hopefully, this gives you a good starting point!


    <div class="p">
    <div class="note tip">
    <span style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif">Click one of the plan buttons below to see resources for each Explore plan level.</span>
    </div>
    </div>
    <div id="plan-filter">
    <h4 class="wysiwyg-text-align-left">Choose your Explore plan&nbsp; &nbsp;</h4>
    <h4 class="wysiwyg-text-align-left">
    <span style="vertical-align:text-bottom"> <button class="button plan-name" name="Lite" type="button">Lite</button>&nbsp;&nbsp; <button class="button plan-name" name="Professional" type="button">Professional</button>&nbsp;&nbsp; <button class="button plan-name" name="Enterprise" type="button">Enterprise</button></span>
    </h4>
    <hr>
    <p class="plan-lite" style="display:none">
    The Explore Lite resources are sorted into the following categories:
    </p>
    <p class="plan-professional">
    The Explore Professional resources are sorted into the following categories:
    </p>
    <p class="plan-enterprise" style="display:none">
    The Explore Enterprise resources are sorted into the following categories:
    </p>
    <hr>
    </div>

    0
  • Gonçalo Ventura Martins

    Hello Rob Stack! Thanks for your explanation and examples. :)

    Is there a way to add links to these kinds of buttons? For example, to open a new article page, or to open a web form?

    Thanks!

    0
  • Katerina Papaefthymiou

    Hi Rob Stack! Thanks for this resource. I have the same question as Gonçalo. What if we want to have a dedicated page for each plan (like a hub) and redirect users to this page when they click the plan button? Is this possible? 

    0
  • Rob Stack
    Zendesk Documentation Team

    Hi Gonçalo Ventura Martins and Katerina Papaefthymiou thanks for the kind words!
    Here's one way I found to do what you want. In this example, you have two buttons, one for the BBC website and one for the CNN site:

    Here's the HTML code I used to add links to the buttons:

    <p>
      <a href="https://www.bbc.co.uk/"><button>BBC website</button></a>
      <a href="https://www.cnn.com/"><button>CNN website</button></a>
    </p>

    I hope this helps!

     

    1
  • Gonçalo Ventura Martins

    Thanks, Rob Stack! :) 
    Indeed it works.

    0
  • Rebeca Hernandez

    Hi Rob Stack I have read your post and I have tested the HTML code on a tester website where it shows exactly what you describe.

    I test on our Guide but it doesn't really work, I just get plain text when I publish the article.

    I copied and pasted the code on the HTML editor but after I save it, it deletes the button tags - and hence never becomes buttons. Have you heard of such issue before?

    Or could it be because we have some custom-made code for the design and layout of our Help center?

    I'm very new to this so I really appreciate any input you can offer, thanks!!

    0
  • Brett Bowser
    Zendesk Community Manager
    Hey Rebeca,
     
    This is most likely due to some custom code in your own Guide theme as you mentioned so you may want to get your developers involved to narrow down where the issue is.
     
    You could also try switching back to the default Copenhagen theme to see if the code works properly to see if that is the case.
     
    I hope this points you in the right direction!
    1
  • Sabena Miller

    Rob Stack

    I am having the same issue as Rebecca and I am using the trial version to create a prototype for our company.  I am using the Copenhagen theme.  Do I need to add the code in the css file or just the html in the article?

    0
  • Tony
    Hi Sabena,
     
    so, if you are experiencing the same situation as Rebecca, then you may want to get your developers involved to better get where the issue is located.
     
    By having a look at the code, everything you see in <html> tags, should be used in the HTML docs, not in the CSS one. CSS is a style sheet language used for describing the presentation of the document.
     
    If you are not too sure about it, your developer will surely know what to do.
     
    I hope this helps!
    0
  • Rochelle Saldanha

    Hi Tony

    None of my buttons work in the article using <button> Ive just used basic Copenhagen theme and not changed anything.

    can you advise?

    0

Please sign in to leave a comment.

Powered by Zendesk