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.

Custom code section

  • Updated on Jun 19, 2026
  • Published on Apr 3, 2024
  • 2 minute(s) read
Prev Next

The Custom code section lets you embed your own HTML and CSS directly on the knowledge base home page. It exists for situations where the standard body blocks like Rich text, Multicolumn cards, Image with text - don't give you the layout or functionality you need. With this block you have full control over what renders and how it looks, making it the right choice for dynamic content, third-party embeds, or custom visual treatments that aren't possible through the other blocks.

Knowledge base site showing a custom code section with a promotional banner rendered from HTML and CSS

When to use the Custom code section

  • Dynamic banners - Display a seasonal promotion, product launch announcement, or maintenance notice using custom HTML that you can update independently of the page layout.
  • Countdown timers - Embed a JavaScript-powered countdown for events, launches, or limited-time offers.
  • Embedded third-party widgets - Add embeds from external services like video players, form builders, chat widgets, or status page badges, that don't have a dedicated block.
  • Custom-styled content - When you need a specific layout or visual treatment that isn't achievable with the Rich text or Multicolumn card blocks, write your own HTML and CSS to achieve it.
IMPORTANT!

Custom code sections execute HTML and CSS in the context of your knowledge base site. Test your code carefully before publishing. Poorly structured HTML can affect the layout of surrounding page elements.

How to add a Custom code section

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

Site customization page showing the Customize site button

  1. From the left dropdown, select Home page. The Body section displays the list of body blocks.
  2. Click Add section and select Custom code section. The block is added to the list.

Add section dropdown showing Custom code section option in the home page builder

  1. Use the Reorder () icon to rearrange the block. The Reorder and Hide () icons appear when you hover over any body block in the Body section.

How to configure the Custom code section

  1. Click the Custom code section block to open the editor.
  2. In the HTML tab, add or edit your HTML code.
  3. In the CSS tab, add or edit your CSS code.
  4. Click Save to save your changes as a draft.
  5. Click Preview to see how the code renders on the knowledge base site.
  6. Click Publish to make the changes live.

Custom code section editor showing the HTML and CSS tabs with code input areas

Best practices

  • Always preview before publishing - rendering differences between the editor and the live site can be subtle. Use the Preview option to verify layout and styling before committing.
  • Keep HTML self-contained - avoid referencing external stylesheets or scripts that may block page load or conflict with Document360's own styles.
  • Scope your CSS - use specific class names for your custom elements to avoid overriding the site's default styles.
  • Use the CSS tab for all styling - keeping styles separate from markup makes the code easier to maintain and update.
  • Test across light and dark mode - if your knowledge base supports dark mode, verify your custom code renders correctly in both.

FAQ

How do I delete a Custom code section from the home page?

Navigate to {{variable.Settings}} () > {{variable.Knowledge base site}} > Site customization and click Customize site. From the left dropdown, select Home page. In the Body section, select the desired Custom code section. Click Delete () below the navigation bar, then click Yes in the Delete confirmation prompt. Click Save and then Publish to apply the changes.

Related articles