Articles on: Crisp Helpdesk

How can I customize my Helpdesk layout?

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


<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




<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 .csh-button-icon-chat {
		display: none !important;
	}

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


Removing the "Send us an Email" button


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

.csh-footer-ask-text-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 .csh-button-icon-chat').innerHTML = "Open the chatbox";
		document.querySelector('.csh-footer-ask-buttons .csh-button-icon-email').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-text-title').innerHTML = "New title";
		document.querySelector('.csh-footer-ask-text-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 a .csh-category-item-meta .csh-category-item-meta-description {

flex: 1 !important;

}

</style>

![Before code added](https://storage.crisp.chat/users/helpdesk/website/a4823be626ad8800/image_z17zd9.png)

![After code added](https://storage.crisp.chat/users/helpdesk/website/a4823be626ad8800/image_1lmiedh.png)

---

##### 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.style.borderRadius="5px 5px 0 0";

tip.nextElementSibling.nextElementSibling.style.borderRadius="0 0 5px 5px";

tip.nextElementSibling.remove();

}

}

for (let tip of tipsYellow) {

if (tip.nextElementSibling.className === "csh-new-line" && tip.nextElementSibling.nextElementSibling.dataset.type === tip.dataset.type) {

tip.style.borderRadius="5px 5px 0 0";

tip.nextElementSibling.nextElementSibling.style.borderRadius="0 0 5px 5px";

tip.nextElementSibling.remove();

}

}

for (let tip of tipsOrange) {

if (tip.nextElementSibling.className === "csh-new-line" && tip.nextElementSibling.nextElementSibling.dataset.type === tip.dataset.type) {

tip.style.borderRadius="5px 5px 0 0";

tip.nextElementSibling.nextElementSibling.style.borderRadius="0 0 5px 5px";

tip.nextElementSibling.remove();

}

}

});

</script>

![Before code added](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/image_vgbz.png)

![After code added](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/image_1b55umi.png)

|| Note: the text should be formatted like this: 
![](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/image_12tet2l.png)

---

##### Change the URL link when clicking on the Helpdesk logo

<script>

document.addEventListener("DOMContentLoaded", function() {

document.querySelector(".csh-header-main-logo").href = "NEW_URL"

});

</script>

  
---

##### Adding a drop shadow to all images automatically

<style>

.csh-markdown-image img {

box-shadow: rgba(0, 0, 0, 0.3) 0px 12px 38px, rgba(0, 0, 0, 0.22) 0px 8px 12px;

}

</style>

![](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/screenshot-2023-07-07-at-14541_uhiqaj.png)

Want to use a different drop-shadow style? Don't hesitate searching some pre-made templates online such as [theses ones](https://getcssscan.com/css-box-shadow-examples).  
You can copy the styling and replace the one in the code above. Enjoy!  
---

Updated on: 30/09/2024

Was this article helpful?

Share your feedback

Cancel

Thank you!