> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.crisp.chat/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to customize the Knowledge Base UI (Layout)

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

---

# ${color}[#0080dd](Before you add custom code)

Start from [**app.crisp.chat**](https://app.crisp.chat), then open **Settings → Knowledge Base Settings → Customize your Knowledge Base → Include custom HTML code**.

||| Custom snippets can affect your public Knowledge Base immediately. Test every change, keep a copy of the original code, and remove snippets that no longer match your Knowledge Base layout after a product update.

__This article includes snippets for common layout changes:__
* [Removing the "Chat" button](#4-removing-the-chat-button) → remove the footer chat shortcut
* [Removing the "Send us an Email" button](#4-removing-the-send-us-an-email-button) → remove the footer email shortcut
* [Hide the Go to website button](#4-hide-the-go-to-website-button) → remove the header website shortcut
* [Change the search placeholder](#4-change-the-search-placeholder) → replace the default search input text
* [Hide the footer contact area](#4-hide-the-footer-contact-area) → remove the full contact block
* [Hide one contact button](#4-hide-one-contact-button) → remove only chat or email
* [Change contact texts](#4-change-contact-texts) → edit footer labels and button text
* [Change the global font](#4-change-the-global-font) → apply a custom font family
* [Hide article popularity](#4-hide-article-popularity) → remove popularity metadata from category pages
* [Force article links to open in the same tab](#4-force-article-links-to-open-in-the-same-tab) → override link target behavior
* [Join consecutive tip boxes](#4-join-consecutive-tip-boxes) → visually merge adjacent information boxes
* [Change the logo link](#4-change-the-logo-link) → point the Knowledge Base logo to another URL
* [Add a drop shadow to images](#4-add-a-drop-shadow-to-images) → style images automatically

---

# ${color}[#0080dd](Common layout customizations)

#### ${color}[#445055](Removing the "Chat" button)

This removes the "Send us an email" button visible at the bottom of the Knowledge Base.

```html
<style>
	footer .csh-footer-ask-buttons .csh-button-icon-chat {
		display: none !important;
	}
	
	.csh-footer-ask-text-label {
		display: none !important;
	}
</style>
```

#### ${color}[#445055](Removing the "Send us an Email" button)

This removes the "Send us an email" button visible at the bottom of the Knowledge Base.

```html
<style>
	footer .csh-footer-ask .csh-button-icon-email {
		display: none !important;
	}
	
	.csh-footer-ask-text-label {
		display: none !important;
	}
</style>
```

#### ${color}[#445055](Hide the Go to website button)

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

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

![Knowledge Base header before hiding the website button](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/cleanshot-2025-02-28-at-114731_2sxhts.png =1000xauto)

![Knowledge Base header after hiding the website button](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/cleanshot-2025-02-28-at-114744_sjhrjv.png =1000xauto)

#### ${color}[#445055](Change the search placeholder)

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

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

![Knowledge Base search field before changing the placeholder](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/cleanshot-2025-02-28-at-114803_h8kpm2.png =1000xauto)

![Knowledge Base search field after changing the placeholder](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/cleanshot-2025-02-28-at-114815_1pfpju.png =1000xauto)

#### ${color}[#445055](Hide the footer contact area)

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

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

![Knowledge Base footer before hiding the contact area](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/cleanshot-2025-02-28-at-114908_1q4ytr7.png =1000xauto)

![Knowledge Base footer after hiding the contact area](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/cleanshot-2025-02-28-at-114916_1gtka8r.png =1000xauto)

#### ${color}[#445055](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:**
```html
<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:**
```html
<style>
  footer .csh-footer-ask .csh-button-icon-email {
    display: none !important;
  }

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

![Knowledge Base contact buttons before hiding the chat button](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/cleanshot-2025-02-28-at-114945_dw48u9.png =1000xauto)

![Knowledge Base contact buttons after hiding the chat button](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/cleanshot-2025-02-28-at-114959_m03ag0.png =1000xauto)

#### ${color}[#445055](Change contact texts)

Use this snippet to change the text shown on the footer contact buttons.

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

![Knowledge Base contact buttons before changing the labels](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/cleanshot-2025-02-28-at-115113_8vv6ek.png =1000xauto)

![Knowledge Base contact buttons after changing the labels](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/cleanshot-2025-02-28-at-115124_cdtpfl.png =1000xauto)

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

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

#### ${color}[#445055](Change the global font)

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

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

#### ${color}[#445055](Hide article popularity)

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

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

![Knowledge Base category item before hiding article popularity](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/cleanshot-2025-02-28-at-115157_16vaeam.png =1000xauto)

![Knowledge Base category item after hiding article popularity](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/cleanshot-2025-02-28-at-115210_1xtbvsa.png =1000xauto)

#### ${color}[#445055](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.

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

#### ${color}[#445055](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.

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

![Separate tip boxes before applying the joining snippet](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/image_vgbz.png =1000xauto)

![Joined tip boxes after applying the snippet](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/image_1b55umi.png =1000xauto)

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

![Markdown example for adjacent tip boxes](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/image_12tet2l.png =1000xauto)

#### ${color}[#445055](Change the logo link)

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

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

#### ${color}[#445055](Add a drop shadow to images)

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

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

![Knowledge Base image with a custom drop shadow](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/screenshot-2023-07-07-at-14541_uhiqaj.png =1000xauto)

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

---

# ${color}[#0080dd](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.*

###### ${color}[#F08820](Where should I paste these snippets?)

**Paste them in the custom HTML area of your Knowledge Base settings.** Go to [**app.crisp.chat**](https://app.crisp.chat), then open **Settings → Knowledge Base Settings → Customize your Knowledge Base → Include custom HTML code**.

###### ${color}[#F08820](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.

###### ${color}[#F08820](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.