---
title: "Adding custom code section"
slug: "html-block"
description: "Enhance your Knowledge base site with custom HTML and CSS using Document360's Custom code section for dynamic visuals and promotions."
tags: ["Custom code section", "Custom HTML", "Custom CSS"]
updated: 2026-02-23T10:40:52Z
published: 2026-02-23T10:40:52Z
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.document360.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Adding custom code section

The **Custom code section** in **Document360** allows users to add personalized HTML and CSS code to their Knowledge base site home page. This feature is ideal for users looking to enhance their site with custom visuals and interactive widgets.

Suppose your organization runs seasonal promotions. You can use the **Custom code section** to embed a dynamic banner or a countdown timer directly on the home page of your Knowledge base site, ensuring your visitors are aware of ongoing offers or events.

![](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/2_Screenshot-Knowledge_base_site_output.png)

---

## Adding a **Custom code section**

To add a **Custom HTML** block to your Knowledge base site’s home page, follow the steps:

1. Navigate to **Settings** (**) in the left navigation bar****in the Knowledge base portal.
2. In the left navigation pane, navigate to **Knowledge base site** > **Site customization**.
3. Click **Customize site** to access the design configurations.

![Site customization options for branding, including theme selection and logo upload.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Customize-site.png)
4. From the left dropdown, select **Home** page. In the **Body** section, a list of body blocks will appear.
5. Click **Add section** and select **Custom code section**.

![Site customization options showing sections like Home and Custom code section.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1771843220715.png)The **Custom code section** block is added to the list.
6. Use the **Reorder** (**) icon to rearrange elements.
7. Click the **Hide** (**) icon to toggle the visibility of elements.

The **Reorder** (**) and the **Hide** (**) appears when you hover over any body blocks in the **Body**section.
8. Click the **Custom code section**:
  1. In the **HTML**tab, add or edit the HTML code.
  2. In the **CSS** tab, add or edit the CSS code.
9. Click **Save******to save your changes without applying them immediately.
10. Click **Preview** to see how your changes will appear on the knowledge base site.
11. Click **Publish******to make your recent changes visible to readers.
12. Click the **More** (**) icon and select **Reset to published version** to discard all saved and unsaved customizations and revert to the last published version.

![Custom code section in a website editor showing HTML and CSS options for customization.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1771843242926.png)

> [!NOTE]
> ** NOTE
> 
> The **Reset to published version** feature is available only for new Knowledge base site 2.0 projects created after March 29, 2025.

---

### FAQ

#### How do I delete the **Custom HTML** block from my Knowledge base site home page?

To delete a **Custom HTML** block, follow the steps below:

1. Navigate to **Settings** (**) in the left navigation bar****in the Knowledge base portal.
2. In the left navigation pane, navigate to **Knowledge base site** > **Site customization**.
3. Click **Customize site** to access the design configurations.
4. From the left dropdown, select **Home** page.
5. In the **Body** section, select the desired **Custom code section**.

The **Custom code section** navigation panel will appear.
6. Click the **Delete** (**) below the navigation bar.
7. Click **Yes** in the **Delete confirmation** panel.