Customize the layout of your Crisp Knowledge Base with reusable HTML, CSS, and JavaScript snippets.

Crisp lets you include custom code in your Knowledge Base settings so you can adjust visual details, hide optional elements, or change small interface labels. These snippets are meant for layout customization only; keep them simple, test them after saving, and avoid changing core navigation if it could make the Knowledge Base harder to use.

Before you add custom code

Start from app.crisp.chat, then open Settings → Knowledge Base Settings → Customize your Knowledge Base → Include custom HTML code.

This article includes snippets for common layout changes:

• Hide the Go to website button → remove the header website shortcut
• Change the search placeholder → replace the default search input text
• Hide the footer contact area → remove the full contact block
• Hide one contact button → remove only chat or email
• Change contact texts → edit footer labels and button text
• Change the global font → apply a custom font family
• Hide article popularity → remove popularity metadata from category pages
• Force article links to open in the same tab → override link target behavior
• Join consecutive tip boxes → visually merge adjacent information boxes
• Change the logo link → point the Knowledge Base logo to another URL
• Add a drop shadow to images → style images automatically

Common layout customizations

Hide the Go to website button

Use this snippet to hide the Go to website action in the Knowledge Base header.

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

Change the search placeholder

Use this snippet to change the text shown inside the Knowledge Base search field before a visitor starts typing.

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

Hide the footer contact area

Use this snippet to remove the full footer block that invites visitors to contact your team.

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

Hide one contact button

Use one of the snippets below if you only want to hide the Chat button or the Send us an Email button.

To hide 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>

To hide 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>

Change contact texts

Use this snippet to change the text shown on the footer contact 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>

Use this snippet to change the footer title and supporting label.

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

Change the global font

Use this snippet to load a font and apply it to the whole Knowledge Base.

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

Hide article popularity

Use this snippet to hide article popularity metadata from category listings.

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

Force article links to open in the same tab

Use this snippet if you want article links to open in the current tab instead of a new one.

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

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

Join consecutive tip boxes

Use this snippet to visually join two consecutive tip, information, or warning boxes when they are separated only by a line break.

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const tipTypes = ["|", "||", "|||"];

    for (const tipType of tipTypes) {
      const tips = document.querySelectorAll(`[data-type="${tipType}"]`);

      for (const tip of tips) {
        const spacer = tip.nextElementSibling;
        const nextTip = spacer?.nextElementSibling;

        if (spacer?.className === "csh-new-line" && nextTip?.dataset?.type === tip.dataset.type) {
          tip.style.borderRadius = "5px 5px 0 0";
          nextTip.style.borderRadius = "0 0 5px 5px";
          spacer.remove();
        }
      }
    }
  });
</script>

The article content should use two adjacent boxes of the same type, like this example.

Change the logo link

Use this snippet to change where visitors are sent when they click the Knowledge Base logo.

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

Add a drop shadow to images

Use this snippet to add a drop shadow to images displayed in Knowledge Base articles.

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

You can use another CSS shadow style if you prefer a different visual effect. Replace only the box-shadow value in the snippet above.

Frequently Asked Questions

Still have questions which were not covered in this article? Here is a collection of the most frequently asked questions on this topic.

Where should I paste these snippets?

Paste them in the custom HTML area of your Knowledge Base settings. Go to app.crisp.chat, then open Settings → Knowledge Base Settings → Customize your Knowledge Base → Include custom HTML code.

Can custom code break my Knowledge Base layout?

Yes, custom code can affect the public layout immediately. Keep snippets small, test them after each change, and remove the last snippet you added if the Knowledge Base starts behaving unexpectedly.

Why did a snippet stop working?

The targeted class or element may have changed. Most snippets rely on front-end selectors, so a product update or a design change can require small adjustments to the code.

Updated on: 03/05/2026