Zendesk Guide: 301 redirects using Javascript

We can edit our Guide’s theme to automatically redirect users when they visit our Help Center and/or submit a request. This article provides a couple of ways to achieve that.

Redirect based on visitor role and locale

A Zendesk account I used to manage had activated both British and American English in Zendesk Support, as well in the Help Center (now re-branded ‘Guide’).

Why did they do this? Instead of using user segmentation to define section or article visibility, they chose to put all their internal/private articles under en-US, while all customer-facing articles would be under en-GB.

Problem: a blank Help Center

This situation caused a minor inconvenience. Because the /en-US/ pages were being crawled and indexed by search engine robots, a few visitors would open those pages every now and then.

Additionally, the bounce rate for these sessions was high, which seemed to confirm that users weren’t trying to visit the proper URL of the Help Center.

Solution: redirect using JavaScript

The solution was to create a JavaScript redirect for any users who entered the /en-US/ page:

$(document).ready(function redirectoSAURUS() {
if (HelpCenter.user.locale == "en-us" && (HelpCenter.user.role == "anonymous" || HelpCenter.user.role == "manager" || HelpCenter.user.role == "end_user")) {
// window.location = "http://subdomain.example.com/hc/en-us";
   window.location.replace("/hc/en-gb/");
  }
});

Redirect after a request is submitted

Another use case for redirects is in case you’d like to show the user a specific URL after they submit a request (under Guide page …/requests/new). Here’s a minimalist solution that ignores the visitor type and locale, redirecting all users regardless:

<script>
if (document.referrer.match('/requests/new')) { 
	window.location.href = 'URL';
	console.log("Redirected");
}
</script>

Bear in mind that this code does not contemplate scenarios with multiple forms (see that solution below). Make sure to add this to your Guide theme’s document_head.hbs file. All you have to do is replace the URL value in the script with the real URL.

Multiple forms

When we use multiple forms, our help center visitors must pick one of them from a drop-down before they can submit a request. This also happens on the New Request page (/requests/new), and after selecting a form, visitors get redirected to the selected form URL (/requests/new?ticket_form_id=…).

This means that our previous JavaScript conditions are incomplete, because as soon as we select a form, our ‘document.referrer.match’ matches /requests/new… but we still haven’t submitted the form!

To prevent this, update your code as follows:

<script>
if (document.referrer.match('/requests/new') && (window.location.href.indexOf("/requests/new?ticket_form_id=") === -1)) { 
    window.location.href = 'URL';
    console.log("Redirected");
}
</script>

My thanks to Amy Giella on Zendesk’s community for the heads-up!

Leave a Reply

Your email address will not be published. Required fields are marked *