Hyperlinking Help Center Categories

Answered

34 Comments

  • ModeratorWes
    Most Engaged Member of All Time - 2021

    @Michael - Below is some JS code that will allow you to link a category to an external link.  You will still need an dummy section and dummy article for the Category to show.

    https://gist.github.com/moderatorwes/1ada9b4edcfb72912d2d

    0
  • Michael Hamilton

    @Wes - Thanks very much. I put in the dummy section and article. I think I understand what do with the JS code, to be honest I haven't worked with JS before. I think I swapped out the appropriate information in the code, I know the format won't display appropriately:

    $('a').each(function() {
    var value = $(this).attr('href');
    if(value=='/hc/en-us/categories//200363439-Submit-a-Request')
    {
    $(this).attr('href', 'https://support.cfcnca.org/hc/en-us/requests/new');
    }
    });

    I am assuming that I am adding this to my existing JS code instead of replacing something. Can I cut/paste this into line 1 of the JS in my Theme Editor? Do I need to place it elsewhere in the JS code? 

    As a JS novice, I expect that I'll need to figure this out for myself, but if you are able to point me in the right direction it will be a big help. Getting the code alone was great. Thanks so much again!

    0
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    @Michael - The code needs to go right below the $(document.ready function.  Also if you haven an extra slash in the below line.

    if(value=='/hc/en-us/categories//200363439-Submit-a-Request')

    0
  • Carrie Jones

    @Wes - I know this thread is from a long time ago but I have tried the method above to link a category to an external link and I can't get it to work.  This is the JS I used:

     //send category links to community - Change category and google.com to your helpcenter
    $('a').each(function() {
    var value = $(this).attr('href');
    if(value=='/hc/en-us/categories/201141365-Streets-Heaver-FTP')
    {
    $(this).attr('href', https://downloads.streets-heaver.com/downloads/index.php');
    }
    });

    I put it below the $(document).ready(function() { 

    in the JS.

    Hope you can help, thanks.

    0
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    Hi Carrie - Are you still having issues with the code or were you able to get everything working

     

    0
  • Carrie Jones

    Hi Wes, yes thanks I realised I had put value=='/hc/en-us instead of en-gb!!!!

    Thank you anyway

    0
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    @Carrie - Thanks for the update and glad to hear you got everything working correctly.  Best of luck.

    0
  • Boden Linden

    Hey @wes. we are trying to test this feature in our Sandbox. But, we have been running into some issues. We want to link a community category (in the Copenhagen template) directly to the community section.

    0
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    @Boden - Is your Help Center open so that I can see exactly what you are trying to do. 

    0
  • Boden Linden

    Unfortunately I believe our help center is not open. Is there any way we can grant you access so you can take a look?

    0
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    You would have to create me a temp username and password and only allow me Help Center access. 

    0
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    Putting the solution out here for others.  You can find the code here and this will work for any theme but was built directly for the copenhagen theme.

    I'm using the curlybar framework to do the re-direct.  No JS needed.

    0
  • Ciro Sirignano

    Hi,

    I was trying to create a link from a zendesk section to an hyperlink.

    Our help center is: https://askus.flowsystems.com.au/hc/en-us

    I would like to create a link from the section to an hyperlink rather than the web articles page.

    In particular from the NOR to an hyperlink
    I've already written a comment and you weren't able to access. 

    Can you help me please? I can create a temporary user as well if you are happy with that because I'm not sure if our help desk is open.

    0
  • Ciro Sirignano

    Hi Wes,

    I tried this code a it didn't work:

    $(document).ready(function() {
    var value = $(this).attr('href');
    if(value=='/hc/en-us/sections/115000816826-Developer-Enquiries-')
    {
    $(this).attr('href', 'https://askus.flowsystems.com.au/hc/en-us/articles/115002781126-Developer-Enquiries');
    }
    });

    0
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    @Ciro - There is no longer a need to do external linking with JS code as you can handle this via handlebars.  I wrote some code in this article which will do exactly what you are asking.

    https://support.zendesk.com/hc/en-us/community/posts/211589848-Adding-category-images-to-the-Copenhagen-Theme

    0
  • Ciro Sirignano

     

    Hi Wes,

    thank you for your help. Unfortunately, I think I miss something because I tried your solution and it doesn't work.

    I'm trying to redirect to an hyperlink a section.

    This is the current Catergory Page html:

    <section class="clearfix">
    <h1>{{category.name}}</h1>
    {{breadcrumbs}}
    <br>
    <br>
    <p class="category-description">{{category.description}}</p>
    {{#if category.sections}}
    <ul class="section-list">
    {{#each category.sections}}
    <li>
    {{#if internal}}
    <span class="visibility-internal" data-title="{{t 'internal'}}">
    <span class="visibility-internal-icon"></span>
    </span>
    {{/if}}
    <a href="{{url}}">{{name}}</a>
    </li>
    {{/each}}
    </ul>
    {{else}}
    <i class="category-empty">
    <a href="{{category.url}}">{{t 'empty'}}</a>
    </i>
    {{/if}}
    </section>

    Can you please help understand where I should insert your code ?

    In addition, where I have to set up the hyperlink for the section I would like to redirect.

    I tried to merge the current page paste above with your solution and it didn't work:

     

    <section class="clearfix section-area">
    <h1>{{#if section.internal}}
    <span class="visibility-internal" data-title="{{t 'internal'}}">
    <span class="visibility-internal-icon"></span>
    </span>
    {{/if}} {{section.name}} </h1>
    {{breadcrumbs}}
    <br>
    <br>
    <p class="section-description">{{section.description}}</p>
    <div class="section-tree">{{#if section.articles}}
    <ul class="article-list">
    {{#each section.articles}}
    <li {{#if promoted}} class="article-promoted" {{/if}}>
    {{#if promoted}}
    <span data-title="{{t 'promoted'}}">★</span>
    {{/if}}

    {{#if id 115000816826}}
    <a href='https://flowsystems.com.au/contact/' class="blocks-item-link">
    <h4 class="blocks-item-title">Developer Enquiries</h4>
    {{else}}
    <a href="{{url}}">{{title}}</a>
    {{/if}}
    {{/each}}
    </ul>
    {{else}}
    <i class="section-empty">
    <a href="{{section.url}}">{{t 'empty'}}</a>
    </i>
    {{/if}}

    {{pagination}}</div>
    </section>

     

    Can you help me please. I would like to keep the same design a redirect only the sections I want.

    This is the current section page: https://askus.flowsystems.com.au/hc/en-us/categories/115000631346-Submit-Request

    Thank you in advance Wes

     

     

     

    0
  • Jessie Schutz
    Zendesk Customer Care

    Hey Ciro!

    I'm following up with Wes on this. He's pretty busy but hopefully he'll get a chance to jump in soon!

    0
  • Praveen

    Hello,

    I implemented the above code into my knowledge base a few weeks ago to link two specific articles to an outside URL. 

    support.bioconnect.com

    Page with hyperlinked articles using code above >>>  https://support.bioconnect.com/hc/en-us/categories/115000748788-Support-Options

    Search example of below description >>> https://support.bioconnect.com/hc/en-us/search?utf8=%E2%9C%93&query=device

    I noticed the other day that now when you search for a word in our knowledge base that the resulting articles are not hyperlinked, unless the article title reaches a certain length on the page. For example search for "device" --> the first article does not show it is hyperlinked and it not clickable until you hover over "that" in the title. If you scroll to the 7th article that appears in the same search the title of the article is just "XPass" and is not clickable.

    Any idea how to fix this? Thanks!

     

    0
  • Trapta Singh
    Community Moderator
    Zendesk Luminary

    Hi @Praveen,

    That's because your CSS is messing up, resulting, in an overlapping of breadcrumbs over article title.

    In your CSS go to line no.4064 and add padding-top: 0; so that your code will look like -

    .search-result-breadcrumbs {
    margin0;
    padding-top0;
    }
    Let us know if you face any issue.
    0
  • Praveen

    @Trapta, thank you! That fixed the issue :)

    0
  • Trapta Singh
    Community Moderator
    Zendesk Luminary

    @Praveen Glad it worked for you :)

    0
  • David Crichlow

    Hi Wes, I tried the js script that you mentioned to have an article title point to an external link. It works well. However, when I search for an article, the resulting breadcrumbs take me to the blank dummy article as opposed to the external link. Is there a way to resolve this?

    Thanks

    0
  • Vlad
    Community Moderator
    The Wise One - 2022

    Hey David, this should solve your problem.

    Just paste this code into JS file (after document.ready row, like here https://cl.ly/p40W ).

    $('a[href*="6666666"]').attr('href','https://www.google.com/');

    - change 666666 with ID of the category;
    - https://www.google.com/ change to the external link that you need.

    Let us know how it goes. ;)

    0
  • David Crichlow

    Thanks Vladan for the help but that did not seem to work.

    This is the JS that I'm using:

    $('a').each(function() {
    var value = $(this).attr('href');
    if(value=='/hc/en-us/articles/666666666-Configuration-Workbook')
    {
    $(this).attr('href', 'https://drive.google.com');
    }
    });

    It works for navigating to the category and clicking the article (The article link takes me to the external link. However, if I search for the article and either click on the link in the drop down or click on the link in the results page, it takes me to the dummy article.

    0
  • Vlad
    Community Moderator
    The Wise One - 2022

    Hey David, I just checked code that I've sent you and it works fine for me https://moderatorvlad.zendesk.com/hc/en-us
    (category "General" always links to an external link).

    But sorry, I missed that you need it for articles, ahh, that changes some things. You are right, these ways will not work on Search results page. So when user click on your specific article, he should be redirected to an external link?

    if yes, please try this one, put this code on the very top of your article HTML template (replace 88888 with the id of your article).

    {{#is article.id 88888}}
    <script>
    window.location.replace('https://drive.google.com')
    </script>
    {{/is}}

     

     

    0
  • David Crichlow

    You are awesome! That worked. The dummy article does display temporarily before redirecting to the external link. I'm not quite sure how to prevent that. I will play around with it to see if I can figure it out, but if you have any ideas that would be great.

    0
  • Vlad
    Community Moderator
    The Wise One - 2022

    Yes, let's try to improve that. Please put this code (remove current) at the top of the head template (head, not header ;) ).

    <script> 
    if(window.location.href.indexOf("888888") > -1) {
     window.location.replace('https://drive.google.com');
    }
    </script>

    and replace 888888 with your ID.

     

    0
  • David Crichlow

    This is exactly what I wanted! Thank you!

    0
  • Nicole Saunders
    Zendesk Community Manager

    Thanks, Vladan! 

    So glad to hear this worked out for you, David. 

    0
  • Emma

    Hi Vladan. I'm using the Copenhagen theme and having the same issue as David. When you perform a search, the dummy article shows up and doesn't link to the external link like the category does. 

    I tried using this code, but I wasn't sure where to put it. Could you tell me more specifically where this goes? 

    <script> 
    if(window.location.href.indexOf("888888") > -1) {
     window.location.replace('https://drive.google.com');
    }
    </script>
    0

Post is closed for comments.

Powered by Zendesk