Hyperlinking Help Center Categories

@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

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

@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')

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

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

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

Thank you anyway

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

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.

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

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

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

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.

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.

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');
}
});

@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

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

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!

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!

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 {
  margin: 0;
  padding-top: 0;
}

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

@Praveen Glad it worked for you :)

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

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. ;)

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.

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}}

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.

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.

This is exactly what I wanted! Thank you!

Thanks, Vladan! 

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

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>