Documentation
The Documentation page is a public-facing docs site for your product, featuring a multi-category sidebar navigation, table of contents, full-text search, and markdown rendering — all hosted under your widget's subdomain.
Overview
The Documentation page provides a structured, developer-friendly docs site hosted at {your-widget-id}.yaplet.help/d. It's designed for technical documentation, product guides, API references, and any content that benefits from a hierarchical navigation structure with a sidebar and table of contents.
Sidebar Navigation
A collapsible tree sidebar for navigating pages and nested sections.
Full-Text Search
Search across all page titles, descriptions, and content with highlighted results.
Table of Contents
Auto-generated TOC with scroll spy that highlights the current section.
Category Tabs
Organize documentation into multiple categories, each with its own page tree.
How It Works
Your Documentation site is accessible at:
https://{widget-id}.yaplet.help/d
Replace {widget-id} with your widget's URL identifier, found in Widget Settings > General > Widget URL.
When a visitor lands on /d, they are automatically redirected to the first category and its first page.
Page Layout
The Documentation page uses a three-column layout:
| Column | Position | Content |
|---|---|---|
| Sidebar | Left (320px) | Page tree with collapsible sections |
| Content | Center (max 768px) | The page content rendered as markdown |
| Table of Contents | Right (264px) | Auto-generated from H2 and H3 headings |
On mobile devices, the sidebar and TOC are accessible via slide-over panels triggered by buttons at the top of the page.
Navigation
- Previous / Next links appear at the bottom of every page, making it easy to read through documentation sequentially
- Breadcrumb-style URLs reflect the page hierarchy:
/d/guides/getting-started/installation - Group pages (pages marked as groups or without content) automatically redirect to their first child page
Categories
If your documentation has multiple categories, a tab bar appears below the header. Each tab links to a different category, and clicking one loads that category's page tree in the sidebar.
Search
The search bar is centered in the header on every page. Results appear in a fullscreen overlay grouped by match type:
- Title matches — pages where the title matches your query
- Description matches — pages where the description matches
- Content matches — pages where the body content matches, with highlighted snippets
Press Escape to close the search overlay.
Content Rendering
Documentation pages are written in Markdown and rendered using the MDC (Markdown Components) engine. This means your pages can include:
- Standard markdown (headings, lists, tables, code blocks, images)
- Rich components like callouts, cards, tabs, steps, and code groups
- Syntax-highlighted code with filename labels and line highlighting
Copy for LLM
Each page includes a "Copy page for LLM" button that copies the raw markdown content to the clipboard. This is useful for pasting documentation into AI tools for analysis or question-answering.
Branding & Styling
The Documentation page supports custom branding:
- Light and Dark logos — Upload separate logos for each color mode in the Documentation settings. They appear in the header and switch automatically.
- Dark/Light mode toggle — Visitors can switch between dark and light themes using the toggle in the header.
If no logos are configured, the documentation title is displayed as text.
Widget Integration
When Documentation is connected to your widget:
- AI training — All documentation content is used to train your connected AI chatbot, so it can answer questions based on your docs
- In-widget links — The Knowledge Base home page can display links to your documentation
The Yaplet chat widget is also embedded on the Documentation pages, so visitors can start a conversation at any time while reading your docs.
Page Hierarchy
Documentation pages support unlimited nesting depth. You can create structures like:
Guides (category)
├── Getting Started
│ ├── Installation
│ ├── Configuration
│ └── First Steps
├── Advanced Topics
│ ├── Authentication
│ └── Webhooks
└── API Reference
├── Endpoints
└── Error Codes
Group pages act as section headers — they appear in the sidebar as expandable nodes but don't have their own content. When clicked, they expand to reveal child pages and redirect to the first child.