If you would like to customize your Helpdesk layout, you can do so using Custom code. In this article we will provide you with some code snippets you can use in order to customize your Helpdesk.

Customize the Helpdesk

If you're not familiar on where to add your custom code, you can follow this article here.

Jump to:
Removing the "Go to website" button
Change the "Search on help center..." text
Removing the entire Helpdesk footer
Removing the "Chat" button
Removing the "Send us an Email" button
Change the text of the contact us buttons
Change the "Not finding what you are looking for?" texts
Changing the font for the entire Helpdesk
Hiding the the Article Popularity
Clicking on a link should open on the same page
Joining Tip Boxes
Change the URL link when clicking on the Helpdesk logo


Removing the "Go to website" button

<style>
	header .csh-header-main-actions-website {
		display: none !important;
	}
</style>


Before code added

After code added


Change the "Search on help center..." text

<script>
	document.addEventListener("DOMContentLoaded", function() {
		document.querySelector('.csh-header-search-field input').placeholder = "New placeholder";
	});
</script>


Before code added
After code added


Removing the entire Helpdesk footer

<style>
	footer .csh-footer-ask {
		display: none !important;
	}
</style>


Before code added
After code added


Removing the "Chat" button

<style>
	footer .csh-footer-ask-buttons li[data-type="chat"] {
		display: none !important;
	}
	
	.csh-footer-ask-label {
		display: none !important;
	}
</style>


Removing the "Send us an Email" button

<style>
	footer .csh-footer-ask-buttons li[data-type="email"] {
		display: none !important;
	}
	
	.csh-footer-ask-label {
		display: none !important;
	}
</style>


Before code added (for chat button)
After code added (for chat button)


Change the text of the contact us buttons

<script>
	document.addEventListener("DOMContentLoaded", function() {
		document.querySelector('.csh-footer-ask-buttons li[data-type="chat"] a').innerHTML = "Open the chatbox";
		document.querySelector('.csh-footer-ask-buttons li[data-type="email"] a').innerHTML = "Email me!";
	});
</script>


Before code added
After code added


Change the "Not finding what you are looking for?" texts

<script>
	document.addEventListener("DOMContentLoaded", function() {
		document.querySelector('.csh-footer-ask-title').innerHTML = "New title";
		document.querySelector('.csh-footer-ask-label').innerHTML = "New label";
	});
</script>



Changing the font for the entire Helpdesk

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<style>
	* {
		font-family: "Open Sans" !important;
	}
</style>



Hiding the the Article Popularity

<style>
  .csh-category-item-meta-popularity {
    display: none !important;
  }

  .csh-category-item-meta-separator {
    display: none !important;
  }

  .csh-category-item-meta-description.csh-text-wrap.csh-text-ellipsis-multiline.csh-text-ellipsis-multiline-lines-2.csh-font-sans-regular {
    flex: 1 !important;
  }
</style>


Before code added
After code added


Clicking on a link should open on the same page

<script>
	window.addEventListener('DOMContentLoaded', (event) => {
		let links = document.querySelectorAll('a.csh-markdown.csh-markdown-link.csh-markdown-link-text');

		links.forEach(link => link.target = '_self');
});
</script>



Joining Tip Boxes

<script>
  document.addEventListener("DOMContentLoaded", () => {
    let tipsGreen = document.querySelectorAll(`[data-type="|"]`);
    let tipsYellow = document.querySelectorAll(`[data-type="||"]`);
    let tipsOrange = document.querySelectorAll(`[data-type="|||"]`);
    
    for (let tip of tipsGreen) {
      if (tip.nextElementSibling.className === "csh-new-line" && tip.nextElementSibling.nextElementSibling.dataset.type === tip.dataset.type) {
        tip.nextElementSibling.remove();
      }
    }
    for (let tip of tipsYellow) {
      if (tip.nextElementSibling.className === "csh-new-line" && tip.nextElementSibling.nextElementSibling.dataset.type === tip.dataset.type) {
        tip.nextElementSibling.remove();
      }
    }
    for (let tip of tipsOrange) {
      if (tip.nextElementSibling.className === "csh-new-line" && tip.nextElementSibling.nextElementSibling.dataset.type === tip.dataset.type) {
        tip.nextElementSibling.remove();
      }
    }
  });
</script>


Before code added
After code added

Note: the text should be formatted like this:




<script>
	document.addEventListener("DOMContentLoaded", function() {
            document.querySelector(".csh-header-main-logo").href = "NEW_URL"
	});
</script>

Was this article helpful?
Cancel
Thank you!