[title] Tabs
[path] EDITOR/Untitled/

[Tabs](docId:4lK3iqUD5wfhH7fLtKXOf) organize related content into switchable panels. They are useful for presenting examples in multiple programming languages, frameworks, operating systems, or alternative workflows without increasing page length.

## Syntax

You can add this component using either Markdown or MDX.

::::Tabs
:::Tab{title="Markdown"}
```markdown
:::::Tabs
::::Tab{title="Tab Name"}
Content here.
::::
:::::
```
:::

:::Tab{title="MDX"}
```javascript
<Tabs>
  <Tab title="Tab Name">
    Content here.
  </Tab>
</Tabs>
```
:::
::::

Each `Tab` element requires a `title` property, which is displayed as the tab label. You can place any supported Markdown or MDX content inside a tab, including text, images, tables, code blocks, and other components.

## MDX example

The following example creates three tabs containing equivalent code samples in different programming languages.

````javascript
<Tabs>
  <Tab title="JavaScript">

  ```javascript
  const greeting = 'Hello, world!'
  console.log(greeting)
  ```

  </Tab>
  <Tab title="Python">

  ```python
  greeting = "Hello, world!"
  print(greeting)
  ```

  </Tab>
  <Tab title="Go">

  ```go
  package main

  import "fmt"

  func main() {
      fmt.Println("Hello, world!")
  }
  ```

  </Tab>
</Tabs>
````


[title] Mermaid diagrams
[path] EDITOR/Untitled/

[Mermaid diagrams](docId\:fRhB6aopNdkyYjeQDeJLG)  let you create diagrams and visualizations directly from text. They are useful for documenting workflows, processes, architectures, and interactions without relying on images.

## Syntax

Mermaid diagrams use standard fenced code block syntax.

````markdown
```mermaid
sequenceDiagram
    A->>B: message
```
````

## Examples

The following example creates a sequence diagram that illustrates an API request flow.

````markdown
```mermaid
sequenceDiagram
    autonumber
    participant C as Client
    participant A as API
    participant K as Cache
    participant D as DB

    C->>+A: GET /users/123
    A->>+K: lookup user:123
    alt cache hit
        K-->>A: cached user
    else cache miss
        K-->>A: null
        A->>+D: SELECT * FROM users WHERE id=123
        D-->>-A: user row
        A->>K: SET user:123
    end
    A-->>-C: 200 OK
```
````

The following example creates a flowchart.

````markdown
```mermaid
flowchart TD
    A[Start] --> B{Is config valid?}
    B -->|Yes| C[Load docs]
    B -->|No| D[Show error]
    C --> E[Start server]
    E --> F[Open browser]
    D --> G[Exit]
```
````


[title] Images and videos
[path] EDITOR/Editor Blocks/

You can add an image by a simple drag-and-drop from your computer (jpg, png, gif) or by typing `/` and clicking on **Image**, where you can paste a link or insert from a local document.

Insert a video (YouTube, Vimeo) by typing `/` and clicking on **Youtube or Vimeo**.

You can also type `(image)` or `(video)` in the editor, for the same results.



![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/SLo0EWugNpGjxLvYL0nTa_media-light.png "Adding images/videos")

***

::::LinkArray{contentSource="CUSTOM"}
:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"}
:FontAwesome[]{icon="fa-solid fa-cubes"} &#x20;**&#x20;Find other blocks**

Discover new ways and blocks to create stunning and functional documentation pages.

[Check out all blocks](docId:6B0VTQTVUnMP93e-SZQ2p)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"}
:FontAwesome[]{icon="fa-solid fa-headset"}**&#x20; Need help?  ⬇️**

Use the **blue** **chat bubble&#x20;**&#x66;rom bottom right corner.

Or try **AI Chat** (from search box) for quick answers.
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"}
:FontAwesome[]{icon="fa-solid fa-hand-holding-heart"}**&#x20;  Your opinion matters**

Use the below feedback form, anonymously.

Or ask a question in **Q\&A section** and our team or AI will give you a solution.
:::
::::


[title] Import website links
[path] SPACES/AI External Sources/

The most general type of content you can import is website links. However, due to security and privacy/copyright concerns, not all links are allowed: *the base link must match your custom domain*. This feature will not work properly if you do not set a custom domain.

### Wildcards

We also support links containing wildcards \``*`.\` e.g., https\://www\.archbee.com/blog/\*&#x20;

This syntax will crawl all the links in https\://www\.archbee.com/blog/\* and crunch the data.

:::hint{type="warning"}
### Limits

The system supports a maximum of 500 links. We will take the first 500 links passed, even those containing wildcard syntax.
:::

:::hint{type="info"}
### Sorting links

Links that are fed into the LLM are sorted in the following order:

1. Explicit links
2. Crawled links from wildcards

Make sure to pass your essential external resources as full links first if you are using wildcard syntax and know you might surpass the limit of 500 links.
:::


[title] Import GitBook and YouTube links
[path] SPACES/AI External Sources/

GitBook and YouTube integrations are the easiest to import links from! All you need is the URL of a GitBook page or YouTube video.

The AI model will index the content, which is either:&#x20;

- Documents from GitBook: Toggle the **Load all paths** to index all paths in the given GitBook website. For this to work, the URL must be a root path. e.g., [https://docs.gitbook.com](https://gitbook.com/docs/)

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/kZ_Q8vrDFRfuc4GBFEPYd_aiext-gitbook-light.png)

- YouTube video transcripts, which searches for currently available transcripts.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/fMbCk9wyHbLfjsMX_g5cX_aiext-youtube-light.png)




[title] API endpoint
[path] EDITOR/Untitled/

[API Endpoint](docId\:JwrgiyTgiu8c_7ml3Hna8) blocks render interactive API documentation, including request parameters, code examples, and response samples.

## Syntax

You can add this component using either Markdown or MDX syntax.

::::Tabs
:::Tab{title="Markdown"}
```markdown
:::::ApiMethodV2
(JSON configuration with name, method, url, request, examples, results)
:::::
```
:::

:::Tab{title="MDX"}
```javascript
<ApiMethodV2>
(JSON configuration with name, method, url, request, examples, results)
</ApiMethodV2>
```
:::
::::

The JSON configuration supports the following parameter groups:

- `pathParameters`&#x20;
- `queryParameters`&#x20;
- `headerParameters`&#x20;
- `bodyDataParameters`
- `formDataParameters`&#x20;

You can also include request examples and response samples in multiple languages.

When used inside a two-column layout, API endpoint blocks are rendered in the right column.

## MDX example

The following example creates an endpoint for retrieving a user, including request parameters, multiple code examples, and response samples.

```javascript
<ApiMethodV2>
{
  "name": "Get User",
  "method": "GET",
  "url": "https://api.example.com/users/{id}",
  "description": "Retrieve a user by their unique ID.",
  "tab": "examples",
  "examples": {
    "languages": [
      {
        "id": "js-example",
        "language": "javascript",
        "code": "const res = await fetch('https://api.example.com/users/usr_abc123', {\n  headers: { 'Authorization': 'Bearer sk_live_xxx' }\n})\nconst user = await res.json()",
        "customLabel": ""
      },
      {
        "id": "curl-example",
        "language": "bash",
        "code": "curl https://api.example.com/users/usr_abc123 \\\n  -H 'Authorization: Bearer sk_live_xxx'",
        "customLabel": ""
      }
    ],
    "selectedLanguageId": "js-example"
  },
  "results": {
    "languages": [
      {
        "id": "res-200",
        "language": "200",
        "code": "{\n  \"id\": \"usr_abc123\",\n  \"name\": \"Jane Doe\",\n  \"email\": \"jane@example.com\",\n  \"role\": \"admin\"\n}",
        "customLabel": ""
      },
      {
        "id": "res-404",
        "language": "404",
        "code": "{\n  \"error\": \"Not found\",\n  \"message\": \"User does not exist\"\n}",
        "customLabel": ""
      }
    ],
    "selectedLanguageId": "res-200"
  },
  "request": {
    "pathParameters": [
      {
        "name": "id",
        "kind": "required",
        "type": "string",
        "description": "User ID (e.g. usr_abc123)"
      }
    ],
    "queryParameters": [
      {
        "name": "include",
        "kind": "optional",
        "type": "string",
        "description": "Comma-separated relations to include"
      }
    ],
    "headerParameters": [
      {
        "name": "Authorization",
        "kind": "required",
        "type": "string",
        "description": "Bearer token"
      }
    ],
    "bodyDataParameters": [],
    "formDataParameters": []
  },
  "currentNewParameter": {
    "label": "Path Parameter",
    "value": "pathParameters"
  },
  "hasTryItOut": false
}
</ApiMethodV2>
```


[title] Tables
[path] EDITOR/Untitled/

[Table](docId\:XISmEqbPiMGonZxHooHwZ) blocks organize structured information into rows and columns. Archbee supports both standard Markdown tables for simple data and HTML tables for advanced formatting and styling.

## Syntax

You can add this component using either Markdown or MDX.

::::Tabs
:::Tab{title="Markdown"}
```markdown
| Column 1 | Column 2 |
|----------|----------|
| Cell 1   | Cell 2   |
```
:::

:::Tab{title="MDX"}
```html
<table isTableHeaderOn="true" columnWidths="200,200">
  <tr>
    <td align="center"><p><strong>Name</strong></p></td>
    <td align="center"><p><strong>Value</strong></p></td>
  </tr>
  <tr>
    <td><p>Item</p></td>
    <td><p>123</p></td>
  </tr>
</table>
```
:::
::::

Markdown tables are ideal for displaying simple structured data. Use HTML tables when you need additional formatting options, such as custom colors, alignment, column widths, or merged cells.

HTML tables support the following attributes:

- `isTableHeaderOn`
- `columnWidths`
- `lightBackgroundColor`
- `darkBackgroundColor`
- `align`
- `colSpan`
- `rowSpan`

## Examples

The following example demonstrates both supported table formats.

### Markdown table

```markdown
| Feature | Free | Pro | Enterprise |
|---------|------|-----|------------|
| Spaces | 3 | 20 | Unlimited |
| API Access | - | Yes | Yes |
| Custom Domain | - | - | Yes |
| SSO/SAML | - | - | Yes |
```

### HTML table with colors

```html
<table isTableHeaderOn="true" columnWidths="200,200,200">
  <tr>
    <td darkBackgroundColor="#1E40AF" lightBackgroundColor="#3B82F6" align="center">
      <p><strong>Service</strong></p>
    </td>
    <td darkBackgroundColor="#1E40AF" lightBackgroundColor="#3B82F6" align="center">
      <p><strong>Status</strong></p>
    </td>
    <td darkBackgroundColor="#1E40AF" lightBackgroundColor="#3B82F6" align="center">
      <p><strong>Uptime</strong></p>
    </td>
  </tr>
  <tr>
    <td align="left">
      <p>API</p>
    </td>
    <td darkBackgroundColor="#166534" lightBackgroundColor="#86EFAC" align="center">
      <p>Operational</p>
    </td>
    <td align="center">
      <p>99.99%</p>
    </td>
  </tr>
  <tr>
    <td align="left">
      <p>CDN</p>
    </td>
    <td darkBackgroundColor="#166534" lightBackgroundColor="#86EFAC" align="center">
      <p>Operational</p>
    </td>
    <td align="center">
      <p>99.98%</p>
    </td>
  </tr>
  <tr>
    <td align="left">
      <p>Search</p>
    </td>
    <td darkBackgroundColor="#9A3412" lightBackgroundColor="#FED7AA" align="center">
      <p>Degraded</p>
    </td>
    <td align="center">
      <p>99.2%</p>
    </td>
  </tr>
</table>
```


[title] Space-specific variables
[path] EDITOR/Reusables/

## Overview

:::hint{type="info"}
Space-specific variables provide a flexible and efficient way to manage reusable text across your documentation. By defining variables and specifying their scope, you can ensure consistent and accurate information is presented to your audience. Use the Reusables tab to create and manage these variables, and insert them easily into your documents with the \{\{ shortcut. This feature is essential for maintaining high-quality and uniform documentation.&#x20;
:::

## What Are Reusable Variables?

Reusable variables (ex. :inlineImage[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/IjUVgUqy_OtpyhkJyY9-3-20260302-140738.png" alt caption width="265" height="67"}) are short pieces of text that you can define once and use multiple times across your content. This feature ensures that common terms, phrases, or pieces of information remain consistent throughout your documentation. By defining a variable once, you eliminate the need to manually update text in multiple locations whenever a change is necessary.

## Creating Space-Specific Variables

To create a space-specific variable, follow these steps:

::::WorkflowBlock
:::WorkflowBlockItem
**Navigate to the bottom menu of the left navigation panel**

- Go to the Reusables
- Select the Variables option tab.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/w3-i1i4hQ99PkIGcmGk73_screenshot-2024-07-24-at-160626.png)
:::

:::WorkflowBlockItem
**Insert a Name for Your Variable**:

- In the variables section, input a unique name for your new variable. This name will be used to reference the variable throughout your documentation.
:::

:::WorkflowBlockItem
**Define a Global Value**:

- Set a global value for the variable. This value will apply to all spaces within your documentation unless otherwise specified.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/bljq6EaKgBZbtiom1eJcc_image.png)
:::

:::WorkflowBlockItem
**Add a Target Space Audience**:

- If you want the variable to be specific to certain spaces, you can add a target space audience. This means the variable will only apply within the specified spaces, allowing for more tailored content.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/OYTsFHG2EiHrH2A0__4Gm_image.png)
:::
::::

## Using Space-Specific Variables

Once you have created your variables, using them in your documents is straightforward:

1. **Insert the Variable**:
   - While editing your document, type `{{`
2. **Select a Variable**:
   - A menu will appear, displaying all available variables. You can filter through this list to find the specific variable you need.
   - Select the desired variable from the menu to insert it into your document.

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/bJzPXCTbAIf6PtT--fpFR_image.png" size="50" width="576" height="486" position="center" showCaption="false"}

By leveraging space-specific variables, you can maintain consistent terminology and information across different sections of your documentation while also allowing for customization where needed. This not only streamlines the content creation process but also enhances the overall quality and coherence of your documentation.

[title] Import Notion pages
[path] SPACES/AI External Sources/

Similar to Confluence, you can also integrate AI with external Notion pages. You need to set credentials and the URL for a Notion space from which we will ingest the documentation.

## Setup

1. Create a [Notion integration ](https://www.notion.so/my-integrations)and securely record the Internal Integration Secret, also known as `NOTION_INTEGRATION_TOKEN`
2. Add a connection to your new integration on your page or database. To do this, open your Notion page, go to Settings in the top right and scroll down to `Add connections` and select your new integration.
3. Get the `PAGE_ID` or `DATABASE_ID` for the page you want to load. The 32 char hex in the URL path represents the ID. e.g.,:

:::BlockQuote
PAGE\_ID of: [https://www.notion.so/skarard/LangChain-Notion-API-b34ca03f219c4420a6046fc4bdfdf7b4](https://skarard.notion.site/LangChain-Notion-b34ca03f219c4420a6046fc4bdfdf7b4) is `b34ca03f219c4420a6046fc4bdfdf7b4`
:::

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/lAN9qJDGGMl_mEB_1kFXJ_aiext-notion-light.png "Import Notion pages")


[title] Map
[path] EDITOR/Editor Blocks/

:::Map
```json
{
  "center": [
    37.75768707689704,
    -122.13603973388672
  ],
  "zoom": 9,
  "markerPositions": []
}
```
:::


[title] Markdown and MDX
[path] EDITOR/

This section provides a complete reference for the Markdown and MDX syntax supported by Archbee, along with practical examples for every supported component.

If you're using Git Sync or following a docs-as-code workflow, and you prefer writing or editing documentation directly in your code editor or repository, this section is for you.

## Standard Markdown

Archbee fully supports standard Markdown syntax for creating and formatting documentation. You can use familiar elements such as headings, lists, images, tables, blockquotes, code blocks, and more without any additional configuration.

## MDX components

In addition to standard Markdown, Archbee extends the language with custom MDX components that enable richer documentation experiences. These components include tabs, callouts, workflows, API endpoints, link grids, expandable sections, and other interactive layouts.

:::hint{type="info"}
ℹ️ **Git-connected projects**

When a Git-connected repository is synchronized with Archbee, Markdown (`.md`) files are automatically processed as MDX (`.mdx`). Existing Markdown syntax remains fully compatible, so your current content continues to render correctly while also giving you access to Archbee's extended component library.
:::


[title] Files
[path] EDITOR/Untitled/

[File](docId\:t1Ky085LzcMKkp3H9EBA_) blocks attach downloadable files directly to your documentation. They are useful for providing resources such as PDFs, releases, or additional supporting materials.

## Syntax

You can add this component using either Markdown or MDX.

::::Tabs
:::Tab{title="Markdown"}
```markdown
::File{src="https://example.com/document.pdf" signedSrc="https://example.com/document.pdf"}
```
:::

:::Tab{title="MDX"}
```javascript
<File
  src="https://example.com/document.pdf"
  signedSrc="https://example.com/document.pdf"
/>
```
:::
::::

File blocks support the following properties:

- `src` specifies the file URL.
- `signedSrc` specifies the downloadable URL used by the component.

In most cases, both properties reference the same file.

## MDX example

The following example attaches a downloadable file to a document.

```javascript
<File
  src="https://archbee.com/archbee-logo.svg"
  signedSrc="https://archbee.com/archbee-logo.svg"
/>
```


[title] Button
[path] EDITOR/Editor Blocks/

![](https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-LW4as1RrCKEUk-Ep2_4MP-20240814-145914.png)

Buttons are the call to action of the digital world. They're those little clickable elements that tell users, "Hey, do this!" Whether it's to learn more, download a file, or purchase something.

## Why use a Button block?

- **Call to Action**
  Need to encourage users to try something new? A button with a compelling label can do the trick. For example, "Start Your Free Trial" or "Download Now".
- **Internal Linking**
  Want to send users to another part of your documentation? A button can seamlessly transport them there.
- **External Linking**
  Need to direct users to an external website or resource? A button can be your teleportation device.

## How to use a Button block

::::WorkflowBlock
:::WorkflowBlockItem
Type `/` to open Archbee block menu
:::

:::WorkflowBlockItem
Search for Button and insert the block
:::

:::WorkflowBlockItem
Click on label to rename it
:::

:::WorkflowBlockItem
Click on settings (⚙️) icon and configure the action:

- Use as internal link -> to send visitors somewhere else in documentation
- Use as external link -> to open a new website
:::
::::

![](https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-fL41FWmGGZrFqBDpCjC0T-20240814-135037.png "Adding a button block")

## How to use Buttons as an inline

Sometimes you may want a call to action *within* a sentence instead of as a standalone block. Archbee supports :InlineCtaButton[]{label="Inline Buttons" docId docAnchorId externalHref openInNewTab="true" noFollow="false"} directly inside paragraph text.

Here’s how you can quickly add one without breaking the flow of your content:

::::WorkflowBlock
:::WorkflowBlockItem
Place your cursor in the middle of any paragraph.
:::

:::WorkflowBlockItem
Press `/` to open the command menu.
:::

:::WorkflowBlockItem
Search for **Button** and select it.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/zekUaQZ6SvdTN0hbp0tLt-20260526-140945.png)
:::
::::

## Example

Here is an example to show how you can use use the button:

:::::VerticalSplit{layout="right"}
:::VerticalSplitItem
**Receive documentation and technical writing tips & trends — our newsletter**

Join 5000+ people from around the world that receive a monthly edition of the Archbee Blog Newsletter.
:::

::::VerticalSplitItem
:::CtaButton{label="Subscribe to newsletter" externalHref="https://www.archbee.com/blog" openInNewTab="true"}

:::
::::
:::::

***

::::LinkArray{contentSource="CUSTOM"}
:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"}
**Find other blocks**

Discover new ways and blocks to create stunning and functional documentation pages.

[Editor Blocks](docId:6B0VTQTVUnMP93e-SZQ2p)
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"}
**Need help?  ⬇️**

Use the **blue** **chat bubble** from bottom right corner.

Or try **AI Chat** (from search box) for quick answers.
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"}
**Your opinion matters**

Use the below feedback form, anonymously.

Or ask a question in **Q\&A section** and our team or AI will give you a solution.
:::
::::


[title] Convert to link
[path] DOCUMENTS/

**Convert to a link** feature allows you to reference a LINK on the left navigation panel of a public space.

It's useful when you want to send the user to either an external URL or to another public space.

Follow these steps to convert a link:

::::WorkflowBlock
:::WorkflowBlockItem
Create a new document
:::

:::WorkflowBlockItem
Add a title relevant to the URL
:::

:::WorkflowBlockItem
Click on the **three-dot menu** of the doc you want to convert to a link and click on the option
:::

:::WorkflowBlockItem
Click on the converted document - a new modal will open where you need to add the URL. You can also change the name of the link.
:::

:::WorkflowBlockItem
Check the public space to see how the LINK looks in the left navigation panel
:::
::::

Also, when you add a URL, make sure to include `https://`

:::hint{type="danger"}
❗

Make sure that this is something you want to do and that you save your content elsewhere. When converting a doc to a link, all its content and its children docs will be lost. This action is <font color="#ef0847">**IRREVERSIBLE**</font>.
:::


[title] How to get started
[path] GETTING STARTED/

Exploring a new product doesn't have to be overwhelming nor time-consuming. Here is what you need to know to get started with **Archbee**.&#x20;

First and foremost, you need an account. You'll most likely get invited by your organization or you can [create an account](https://app.archbee.com/signup).

Then, you need to get familiarized with only 2 primary areas that you will interact with when using the product:

1. The [Sidebar navigation panel](docId\:e1WEYXI3lZEjYIdgZ-ZIH) on the left side
2. The [Document area](docId\:e1WEYXI3lZEjYIdgZ-ZIH) in the center (along with TOC on the far right)
3. The [Content panel](docId\:e1WEYXI3lZEjYIdgZ-ZIH) on the right side

Let's go through each one.

![](https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-1-2CkmaD7Oax1U0HMv1ic-20250911-122414.png "Archbee UI")

***

## Sidebar navigation panel

The left sidebar navigation panel is where you organize your content. This is where you will create [Spaces](docId\:uTknpnOKl1OY-VxI5I8jo)**&#x20;(1)** and **Documents (2)**, access the [Organizaton menu](docId\:e1WEYXI3lZEjYIdgZ-ZIH) **(12)**, define **Reusables** **(18)**, manage **Archives (17),&#x20;**&#x63;aptured flows and converted markdown with [Chrome extension](docId\:YKDsec4c3ZXV9QCiZdJb3)**&#x20;(15)**,  dynamic and AI **Search** **(5)**, view [Notification Center](docId\:DtMoewvVtq_EoKWfq9JKI)**&#x20;(13)**, create a new [Space group](docId:3WvwJduDFhTbA4wz9vJch)**&#x20;(14)**, and to collapse **Sidebar (19)** to focus on your content.

Here are some actions you can take to get started:

- **Create a new Space&#x20;**- click the `+` button to add a new Space, and give it a name.
- [Create](docId\:XHRrKtTL4IRyQvnmho5i5)**&#x20;or&#x20;**[Import documents](docId\:fK50ZyIJGXY-U9Ql7PZ9b) - you can create multiple documents or import content to a Space.
- [Drag and drop to organize](docId\:iUg9SsZY1s6rU0Px0duYc)  - as you build your product knowledge hub, move Spaces or Documents to the desired position.
- Convert a document to a [Category](docId\:mCx0A1boTeL0jh6MGMWmI) or a [Link](docId\:nIZ_tDiINHqWBEc7IC6Xn)&#x20;

### Organization menu

The Organization menu is a centralized hub for accessing settings and managing your organization. Here, you can import content, invite new members, and more. Below is a list of available options:

- **User preferences** menu for managing your account and adjusting [notification preferrences](docId\:DtMoewvVtq_EoKWfq9JKI);
- [Import content](docId\:fK50ZyIJGXY-U9Ql7PZ9b) into your current workspace;
- **Switch organizations** if you belong to multiple entities;
- **Invite members** to join your organization;
- Access **Organization Logs**;
- [Organization Settings](docId\:qMcAOETXG84qzkBq_Ovwv) for member management and configuration;
- [Subscritption & Billing](docId:69VT9M1xPVuLcrwTWvU6y) management for overseeing your subscription;
- **Theme switcher**;
- **Knowledge graph**;

***

## Document area

Here, you'll find the main tools for managing your content.

You can swiftly [Add blocks](docId:6B0VTQTVUnMP93e-SZQ2p) **(3)&#x20;**&#x62;y typing `/` to open the menu. To see how your work will look before publishing, use the **Preview/Edit (6)** button. For a quick boost in content creation, the integrated [AI Write ](docId:1tOWnw572B2YbhvcxyZCm)**(7)** provides tools to help you write and refine your work efficiently.

At the top of the document area, you have a context menu for the **Document options (8)**. Just click on the 3 dots `⫶` open the entire list of available options like:

- **Document info**
  View details about the document, including author, creation date, and last modified.
- **Ping team member**
  Notify a team member about the document.
- **Share**
  Invite others to view or collaborate on the document.
- [Subscribe to changes](docId\:M_Ir9aK_46bzO_mHOL5UX)&#x20;
  Receive notifications when the document is updated.
- [Document Revision History](docId\:zyNz0NsRCL37zbUwUgKBo)&#x20;
  View a timeline of changes made to the document.
- [SEO Meta Controls](docId\:E-aARn44KIsrXycjGAMZg)&#x20;
  Customize metadata for search engine optimization.
- **Copy Markdown to clipboard**
  Copy the document's Markdown code to the clipboard.
- [Export to Markdown file ](docId\:vHjhBqS61oDz1E13MBEPY)&#x20;
  Save the document as a Markdown file.
- [Export to PDF file](docId\:vHjhBqS61oDz1E13MBEPY)&#x20;
  Save the document as a PDF file.
- **Spellcheck**
  Enable spell checking to help identify and correct errors in the document. We also allow **Grammarly&#x20;**&#x74;o get on top of our editor and suggest corrections and improvements.
- **Full width editor**
  Expand the writing area of the editor to use the full width of the screen.
- [Find & Replace](docId\:RGgEfgBAD2HfM31VTe6H6)
  Search for a particular word and replace it.

***

## Content panel

The content panel is a eseitiam area for document management and collaboration, featuring three tabs:&#x20;

- the **Contents** tab includes the Table of Contents and [Document Tags](docId:8_5kqkucpS86Zm8Z82tZi);&#x20;
- the [Comments](docId\:HcZnXsyrbk0GWr8B1kL7r) tab allows users to collaborate and provide feedback;&#x20;
- and the **Code** tab offers a two-column layout (if its enabled in Apperange) to show [Code drawers](docId:9rc9lvIrREZCwra8j4lit), ideal for API documentation.&#x20;

This structure enhances writing documentation workflow and experience.

***

**Ready to explore the full potential of Archbee?** Dive deeper into our features and learn how to create stunning documentation:

::::LinkArray{contentSource="CUSTOM"}
:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-6HyqAir7SEJAjtZ7YWmFe-20250911-133251.png"}
Learn [How to use the Editor](docId\:GZKfIYLzU2JXuPcXqo7uq)
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-s-bxRZJy8swqFBGjddA3P-20250911-133301.png"}
Manage your [Documents](docId\:XHRrKtTL4IRyQvnmho5i5), [Spaces](docId\:uTknpnOKl1OY-VxI5I8jo) or  [Custom Domain](docId\:PhPdT07jvT42ScfHSTlHu)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-rM0LpDx7RmfZj28vtWPPt-20250911-133310.png"}
[Integrate](docId\:mpRaCDe-I5CxggprO-F6Q) your favorite tools, like [GitHub](docId\:Pm3HtF9iCnqzcNFRQjqL3) or [Slack](docId\:TYvw4yUUdlMxmEo-1jNBf), with Archbee.
:::
::::


[title] Welcome to Archbee!
[path] GETTING STARTED/

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/o8b8YURfPbSH55v2pTmfB-20260330-143019.png)

Welcome to the **Archbee Documentation Center**, your go-to resource for all documentation features, setup guides, and lots more.

See why we truly love what we do and how we show it through our platform.

## Learn how to use Archbee

Leverage enterprise-wide product expertise, seamlessly integrate your tools, and centralize product documentation, API references, and developer guides — **all within a single comprehensive platform**.&#x20;

::::LinkArray{contentSource="CUSTOM"}
:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-YOw4gia62kkE1bvECH6iX-20250910-182430.png"}
### [Check out our product features](docId\:MZz_64TQOUWdT1CfR6uT8)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-_tiGuKOk_9dziwY-l92FX-20250910-190316.png"}
### [Start building with our guides](docId\:LKD49AEgj72v-zhHTlf88)
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-Vjd5vTfjNgJi8V0mulhgV-20250910-190329.png"}
### [Integrations, API access, and more](docId\:mpRaCDe-I5CxggprO-F6Q)&#x20;
:::
::::

::::LinkArray{contentSource="CUSTOM"}
:::LinkArrayItem
### :FontAwesome[]{icon="fa-solid fa-inbox"}   &#xA;&#xA;Need help?  ⬇️

[support@archbee.com](mailto\:support@archbee.com)
:::

:::LinkArrayItem
### :FontAwesome[]{icon="fa-brands fa-stack-exchange"} &#xA;&#xA;Archbee changelog

[Read the product updates](https://www.archbee.com/docs/changelog)
:::
::::


[title] Learn the basics
[path] GETTING STARTED/

## What is Archbee?

Archbee is a complete product documentation platform with advanced features such as reusable content, versioning, document revision history, and collaboration features to keep product and engineering teams in sync and the documentation up-to-date.

Unlike content management systems, and generic knowledge bases, Archbee provides a feature-rich platform to write and host product guides, along with developer documentation, API references, and SDKs.

![](https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-ION3Y71K1F6IFIR2G_lDl-20241001-175351.png)

We are a cloud-based documentation platform that anybody in your team can use effortlessly, with zero learning curve.&#x20;

Check out our features overview:

::::LinkArray{contentSource="CUSTOM"}
:::LinkArrayItem
### Authoring features

📝  [How to use the Editor](docId\:GZKfIYLzU2JXuPcXqo7uq)

📃  [Create a document](docId\:XHRrKtTL4IRyQvnmho5i5)&#x20;

📦  [Import documents](docId\:fK50ZyIJGXY-U9Ql7PZ9b)

🔄  [Reusable variables](docId\:KK4Xbsf1uG4DZB8rZPgoF)

📄  [Content snippets](docId:1OcdY_lvhrvPzF35HwgHu)
:::

:::LinkArrayItem
### Publishing features

**🌎&#x20;**&#x20;[Publish a Space to Domain](docId\:mvWf7k6_wM21LJjmLjNml)

🔒  [Public Access Controls](docId\:w7VFvxPMFYSPdg0xnzlK1)

**👨🏻‍💻**  [Custom CSS](docId\:d4gup0qqxInIgDThftqCn)&#x20;
:::

:::LinkArrayItem
### Collaboration

✔️  [Verify documents](docId:85c9GacOPuJe50mCq29bU)

🫣  [Mark as hidden on public docs](docId\:nJfI72P7X69IV1qSIQr-D)

🔗  [@ Mentions and dynamic links](docId\:xpKLRqkncGbUJqSi9XweS)&#x20;
:::
::::

## Why Archbee?

When you need to capture and publish product documentation, there's a hard truth:

**Your product is only as good as your documentation.**

And, with the technical product knowledge too often trapped in the minds of your developers…your documentation is only as good as your collaboration process to extrapolate product knowledge and share it internally or with the clients/users.

So, what can you do?

- Build your own documentation system (docs-as-code)? And make it too technical for most people to contribute?
- Write and share Word docs and PDFs? Good luck keeping everything straight.
- Use tools built for individual writers? That just stifles collaboration.
- Use generic knowledge bases that are not tailored to your product's complexity.

What should you do?

Use Archbee to make documentation a team sport, speeding documentation creation while substantially improving its depth. It's an effortless process to create, edit, and collaborate…**All with zero engineering effort**, tailored to your needs.

## Use cases

Archbee can serve multiple use cases:

- For internal collaboration
- Public docs
- Setting up self-service knowledge bases
- Developer docs
- Even publishing blog posts

The platform is super flexible and easy to use. We focus on delivering the best-in-class experience for teams that need to write and publish product documentation - especially for companies that sell developer tools.&#x20;

**Need help to decide if Archbee is a good fit for you?**

When it comes to knowledge management, you have the following solutions:

- internal collaboration tools: Confluence, Notion, etc
- help authoring tools: MadCap Flare, Adobe RoboHelp, etc.
- content management systems: Contentful, WordPress
- knowledge base software: ZenDesk, Helpscout, Intercom, FreshDesk

**In the market, you have tools that lack advanced features required to write complete product documentation or tools that lack the collaborative options to capture the knowledge company-wide.**

This is where Archbee comes in. Capture complete product knowledge from your product specialists and build developer documentation and product guides that are easy to publish, customize and maintain.

Here are some examples of companies that use Archbee to build:

::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
## Developer documentation

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/94NDtpi0--Mq18HCn_3l1_development.png)

- [Klevu docs](https://docs.klevu.com/)
- [Troopr.ai docs](https://docs.troopr.ai/)
- [Founda Health docs](https://docs.founda.com/)
:::

:::VerticalSplitItem
## Product knowledge portals

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/LKxQfAhtkB89o8DGjZIKQ_product.png)

- [CrossRiver docs ](https://docs.crossriver.com/)
- [Flipper Zero docs](https://docs.flipper.net/zero)
- [ChartHop docs](https://docs.charthop.com/)
:::
::::

To see more examples of product portals our clients have built, go to the [Showcase section](https://www.archbee.com/portals)**.**

[title] Scalar
[path] EDITOR/Editor Blocks/API docs blocks/

Here is an example of using Scalar integration

:::Scalar
```json
{
  "jsonFileLocation": "https://archbee-doc-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/9NabN3suzW9rESu_6SOQ9-20260204-123948.json",
  "headers": []
}
```
:::


[title] Code drawers
[path] EDITOR/Editor Blocks/

Code drawers are a great way to show code examples in a three-column layout.

Here's one:‘‘‘

::::CodeDrawer{title="A code drawer" codeEditorData="[object Object]" isResponseExpanded="true" responsesEditorData="[object Object]" autoGeneratedAnchorSlug="a-code-drawer" legacyHash="S9e7LDxVHJ50RmqAIvHnf"}
:::CodeblockTabsExamples
```javascript
let x, y, z;  // Statement 1
x = 5;        // Statement 2
y = 6;        // Statement 3
z = x + y;    // Statement 4

document.getElementById("demo").innerHTML =
"The value of z is " + z + ".";  
```

```python
# Program to find the sum of all numbers stored in a list

# List of numbers
numbers = [6, 5, 3, 8, 4, 2, 5, 4, 11]

# variable to store the sum
sum = 0

# iterate over the list
for val in numbers:
    sum = sum+val

print("The sum is", sum)
```
:::

:::CodeblockTabsResponses
```javascript
```
:::
::::

Here's another one.

::::CodeDrawer{title="Another code drawer" codeEditorData="[object Object]" isResponseExpanded="true" responsesEditorData="[object Object]" autoGeneratedAnchorSlug="another-code-drawer" legacyHash="UwiH3lFnllMs_SW-1EITy"}
:::CodeblockTabsExamples
```javascript
let x, y, z;  // Statement 1
x = 5;        // Statement 2
y = 6;        // Statement 3
z = x + y;    // Statement 4

document.getElementById("demo").innerHTML =
"The value of z is " + z + ".";  
```

```python
# Program to find the sum of all numbers stored in a list

# List of numbers
numbers = [6, 5, 3, 8, 4, 2, 5, 4, 11]

# variable to store the sum
sum = 0

# iterate over the list
for val in numbers:
    sum = sum+val

print("The sum is", sum)
```
:::

:::CodeblockTabsResponses
```javascript
```
:::
::::

And a screenshot while editing:

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/kbx_YaJkagc8DztKeSYkR_code-drawer-light.png "Code drawers")

## Markdown

Use the following Markdown to generate code drawer blocks:

````markdown
### Test codedrawer

::::codedrawer{title="a code drawer"}
:::codeblocktabs-examples
```php
// Some wordpress plugi
 // Add our plugin's option page to the WP admin menu.
  public function add_plugin_options_page() {
    add_options_page(
      'Example Plugin Settings',
      'Example Plugin Settings',
      'manage_options',
      'ex',
      [$this, 'render_admin_page']
    );
  }
```
```go
// Next should be used only inside middleware.
// It executes the pending handlers in the chain inside the calling handler.
// See example in GitHub.
func (c *Context) Next() {
    c.index++
    for c.index < int8(len(c.handlers)) {
        c.handlers[c.index](c)
        c.index++
    }
}
```
```javascript
// demo js
```
:::
:::codeblocktabs-responses
```json
// 404 -  not found
{
  requireFingerprintScope: true,
  maxMachines: 1,
  concurrent: false,
  floating: false,
  protected: true,
  strict: true
}
```
:::
::::
````

***

::::LinkArray
:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"}
:FontAwesome[]{icon="fa-solid fa-cubes"} &#x20;**&#x20;Find other blocks**

Discover new ways and blocks to create stunning and functional documentation pages.

[Check out all blocks](docId:6B0VTQTVUnMP93e-SZQ2p)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"}
:FontAwesome[]{icon="fa-solid fa-headset"}**&#x20; Need help?  ⬇️**

Use the **blue** **chat bubble&#x20;**&#x66;rom bottom right corner.

Or try **AI Chat** (from search box) for quick answers.
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"}
:FontAwesome[]{icon="fa-solid fa-hand-holding-heart"}**&#x20;  Your opinion matters**

Use the below feedback form, anonymously.

Or ask a question in **Q\&A section** and our team or AI will give you a solution.
:::
::::


[title] @ Mentions and dynamic links
[path] EDITOR/

As your documentation portal grows and you add more documents to your space(s), when you type `@` in the editor, it will show documents or people invited to the organization.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/4Ey_n1XoJh7qDQlEezfFB_chrome-49edqv0iif.gif "@ your own document")

Mention teammates (`@ + name`) and they will receive a notification under the 🔔 bell icon in the top left corner.

:::hint{type="warning"}
Use Dynamic links to reference documents. Because this is a link to the *document ID*, when you move the document around or change the title, it will always point to the correct document you created.
:::

## Use anchors to link to a section in a document

Each time you add a heading to a document, an item is added to the table of contents on the right side.

Leverage these headings and set anchors, so your readers can navigate the documentation with ease.

When you link to a document using the `@ + name of the doc`, you can also set an anchor so that the reader opens the URL to a specific section. Additionally, you can select whether the document opens in the same tab or in a new tab.

After you add the dynamic link, click on the link, and a new modal will pop up where you can select the anchor based on the headings of that document.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/aRzALTMBHy_l4R14m-K70_mention-light.png "Choose anchor")

If you click on the dynamic link, you can change the title (by default, the title is the name of the referenced doc).

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/sMefiyOhXKge6772PtvGw_mention-2-light.png "Change link title")


[title] Multi-level drag&drop
[path] EDITOR/

Archbee's editor supports multi-level drag\&drop. This means that you can drag\&drop blocks inside other blocks.

Each block has a handler on its left side (the dots slider the left side) that we call the block menu. You can either click it to open the block menu or drag it to move it around.&#x20;

::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/0dtf_CTxvhWIh-ZCM0rpi_menu-light.png "Block menu ")
:::

:::VerticalSplitItem
::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/homRCre8YJSn0RmDe0hYo_menu2-light.png" darkSrc="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/8tlMOuxVprt_L6wx908wV_menu2-dark.png" size="98" width="1026" height="948" darkWidth="1026" darkHeight="948" position="center" caption="Block menu with AI features" showCaption="true"}
:::
::::

The following are the actions you can perform from the block menu:

- Move block **Up** or **Down**
- Insert a new block **Above** or **Below**
- **Copy** or **Cut&#x20;**&#x74;he block
- **Duplicate** block
- **Remove/delete** block
- **Hold** the block menu button and **drag** the block to move it

As mentioned above, you can move blocks inside other blocks with a simple **drag\&drop&#x20;**&#x66;rom the block handler icon but there are some restrictions on how you can nest blocks. This means that every block has a list of supported blocks that it can hold inside.&#x20;

See the list below for each block:

:::ExpandableHeading
### Callout

1. Paragraph
2. File
3. Image
4. Video
5. Horizontal line
6. All lists
7. Headings
8. Expandable headings
9. Button
:::

:::ExpandableHeading
### Expandable heading

**All, except:**

1. &#x20;Expandable headings
2. &#x20;Content snippets
:::

:::ExpandableHeading
### Link blocks

1. Paragraph
2. Callouts
3. File
4. Image
5. Video
6. Horizontal line
7. All lists
8. Headings
9. Expandable headings
:::

:::ExpandableHeading
### Tables

1. Paragraph
2. Blockquote
3. All lists
4. Headings
:::

:::ExpandableHeading
### Vertical split

1. Paragraph
2. Callout
3. File
4. Image
5. Video
6. Blockquote
7. Map
8. Equations
9. Horizontal line
10. Code editor
11. Button
12. Mini-tasker
13. All lists
14. Headings
15. Expandable headings
16. All embeds (Google, Figma, Miro, etc.)
:::

:::ExpandableHeading
### Workflows

1. Paragraph
2. Callout
3. File
4. Image
5. Video
6. Link block
7. Blockquote
8. Map
9. Changelog
10. Mermaid diagram
11. Equations
12. Horizontal line
13. Code editor
14. API endpoint
15. Table
16. Tabs
17. Button
18. Mini-tasker
19. All lists
20. Headings
21. Expandable headings
22. All embeds (Google, Figma, Miro, etc.)
:::

:::ExpandableHeading
### Tabs

**All, except:**

1. Code drawer
2. OpenAPI
3. GraphQL&#x20;
4. Content snippets


:::




[title] Display Rules
[path] EDITOR/Reusables/

:::hint{type="info"}
This feature works in combination with a **JWT Public Access Control&#x20;**&#x6F;r

- with Guest Accounts
- with Magic Links&#x20;
- with SAML integration

A JWT authentication will have to be configured so the conditions defined in the Display Rules are validated or invalidated.
:::

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/34p_RWIWUpga79cy9-DUe_cc-light.png)

The Display Rules feature allows you to display specific content blocks based on predefined conditions. This feature provides flexibility in content delivery, ensuring that users see content tailored to their needs and behaviors.&#x20;

## Creating Display Rules Conditions

::::WorkflowBlock
:::WorkflowBlockItem
Go to the **Reusables** tab in the platform's bottom left corner.
:::

:::WorkflowBlockItem
Select **Display Rules**
:::

:::WorkflowBlockItem
Create a New Rule Set:

- Click o&#x6E;**&#x20;+ Create** **New Rule Set&#x20;**&#x74;o define conditions for displaying content.
- Specify your conditions using **AND**/**OR** logic to determine when content should be shown. These conditions can be based on various parameters such as user behavior, profile attributes, or other criteria relevant to your platform.
:::
::::

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/Oi-fGlMQsXXSVHDytatWU_dynamic-components-light.png)

## Applying Display Rules to a Block

::::WorkflowBlock
:::WorkflowBlockItem
**Edit Your Content Block**
In the editor, locate the block you want to transform into a display content block.
:::

:::WorkflowBlockItem
**Access the block menu**
Hover on the block to reveal the block menu, which is represented by six dots (`⋮⋮` block menu icon).
:::

:::WorkflowBlockItem
Press the **Display Rules** button
:::
::::

::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/rp-gYdXw5ZofPlKNH1cCp_ccmenu-light.png "Default Block Menu")
:::

:::VerticalSplitItem
::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/tGYpvRp_1IQqNACiAA7Kd_ccmenu2-dark.png" darkSrc="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/RLIPVVrO9-SYD-IqsoMai_ccmenu2-dark-1.png" size="98" width="1026" height="948" darkWidth="1026" darkHeight="948" position="center" caption="AI Options Block Menu" showCaption="true"}
:::
::::

## Applying Display Rules to document/folder

::::WorkflowBlock
:::WorkflowBlockItem
Click on the three vertical dots near the document/folder name
:::

:::WorkflowBlockItem
Select the Display Rule that you want to apply
:::
::::

Choose the rule set you previously created from the **Reusables.**

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/O0TuHIqbg_mW9x8slT4JN_display-rules-light.png)

:::hint{type="success"}
Once these steps are completed, the selected content block will be transformed into a conditional content block, displaying only when the specified conditions are met.
:::

## Example Use Case:

Imagine you want to display a special promotion only to users who have previously purchased from your store and are visiting during a holiday season.&#x20;

You would:

::::WorkflowBlock
:::WorkflowBlockItem
Navigate to the Reusables tab and create a new rule set with conditions based on purchase history and the current date.
:::

:::WorkflowBlockItem
Apply this rule set to the promotional content block in the editor.
:::

:::WorkflowBlockItem
Users meeting these conditions will now see the special promotion block during their visit.
:::
::::

## JWT Token Integration

- Keeping encoded conditions in the URL used for connection.
- Ensuring that dynamic content can be securely tailored based on the information contained within the token.

:::hint{type="info"}
When a user accesses the platform, their JWT token is decoded to retrieve the conditions. These conditions are then matched against the predefined rule sets, determining which content blocks should be displayed
:::

## Display Rules with Public Authentication options

You can now apply Display Rules to public users who sign in using:

- Guest Accounts
- Magic link
- SAML

## How It Works

- [Create a Display Rule](./#creating-display-rules-conditions)&#x20;
- Apply Rule to a document or a folder
- Done! &#x20;

:::hint{type="success"}
When a user logs in (magic link, guest accounts, or SAML)
the rule checks the email's info
If it matches → **they can see it the document/folder**
If not → **it's hidden**
:::

## Example

**Rule**: Email contains archbee
**User logs in** with sarah\@archbee.com
✅ Sarah can view the doc
**User logs in** with mike\@gmail.com
❌ *Mike won’t see it*

[title] File Manager
[path] EDITOR/Reusables/

The File Manager is an essential feature designed to store and manage all files within your organization, ensuring everything is centralized and easily accessible. This tool simplifies the process of uploading, displaying, and selecting media files for your documentation needs.

## Accessing the File Manager

You can access the File Manager from the left navigation panel, located at the bottom left corner of the interface.

**Reusables -> File Manager**

![](https://archbee-image-uploads.s3.amazonaws.com/HCIek7I0UxvyNHQ0EFzVX--k1LLu0K-PaudqOA_2TG_-20250729-143435.png)

## Key Features

### Uploading Files

- **Direct Upload**

  Easily upload your files directly within the File Manager window.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/cg5IYlKqAMKZ_mhdSXAtV_image.png)

- **Drag and Drop**

  Simply drag and drop files into the File Manager for quick uploading.

### Organizing Files

- **Folders**

  &#x20;Sort your files into folders to keep everything organized and easy to locate.

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/VQED7rCVf-lE8XXstcXVt_image.png" size="50" width="610" height="200" position="center" darkWidth="800" darkHeight="262" showCaption="false"}

- **Move Files:**

  &#x20;Move files between folders to maintain an organized structure.

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/fYmfIo4SD5AuhcbI2Gycm_image.png" size="50" width="384" height="500" position="center" darkWidth="800" darkHeight="1042" showCaption="false"}

### File Management

- **View Details**

  Click on three vertical dots to view the file details, including file name, type, and upload date/modified date.

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/JWNiS_Y41NqrfC8igtoba_image.png" size="50" width="1038" height="1012" position="center" darkWidth="800" darkHeight="779" showCaption="false"}

- **Download**

  Download files to your local machine or remove files that are no longer needed.

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/P_AqkdcIOpjYzEOC24T32_image.png" size="50" width="376" height="210" position="center" darkWidth="800" darkHeight="447" showCaption="false"}

### File Preview

- **Image Preview**

  Quickly preview images directly within the File Manager panel to ensure you select the correct file.

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/tZ5JuedYm-skjc10Q1lho_image.png" size="40" width="268" height="182" position="center" darkWidth="800" darkHeight="543" showCaption="false"}

## Using Files/Images in the Editor

- **Media File block**
  In the Editor, type "/" and select Media -> File or type (file)
- **Media Image block**
  In the Editor, type "/" and select Media -> Image or type (image)
- **Choose image from File Manage**
  Choose the desired file or image from the File Manager panel to insert it into your document.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/8DKW1XjDAHFOmUsGQtMaE_image.png)


[title] Blockquotes
[path] EDITOR/Untitled/

Blockquotes are used to visually separate quoted text or emphasize important information within a document.

:::BlockQuote
This is a blockquote. Use it to highlight important information or quote external sources.
:::

## Syntax

Blockquotes use standard Markdown syntax.

```markdown
> Your blockquote text goes here.
```

To create a blockquote, prefix a line with the `>` character. For multi-line blockquotes, add the same prefix to each additional line.

## Example

The following example creates a multi-line blockquote.

```markdown
> The API is backwards compatible.
>
> Existing integrations will continue to work without modification.
```


[title] Horizontal dividers
[path] EDITOR/Untitled/

[Horizontal dividers](docId\:YUthnHc9mNprZRTwXPB4L) create a visual separation between sections of content. They help break up long pages and improve readability.

## Syntax

Horizontal dividers use standard Markdown syntax.

```markdown
---
```

A horizontal divider is created by placing three consecutive hyphens on a line by themselves.

## Example

The following example separates two sections of content with a horizontal divider.

```markdown
# Overview

This section introduces the feature.

---

# Next steps

Continue with the installation process.
```


[title] Images
[path] EDITOR/Untitled/

[Image](docId\:DMALxhZZ_dTYx-ophz5ah) blocks help illustrate concepts, provide visual context, and make documentation easier to follow. You can add images to your documents using standard Markdown syntax.

## Syntax

Images use standard Markdown syntax.

```markdown
![Alt text](https://example.com/image.png)
```

The text inside the square brackets is used as the image's alternative text, which improves accessibility and provides context if the image cannot be displayed.

## Example

The following example adds an image to a document.

```markdown
![Archbee Documentation](https://images.archbee.com/bNBm7nPJgXjbjLyfbHNh2/n2qr6fR-UoEp3M5SsakwT-20260330-143019.png?format=webp)
```


[title] YouTube or Vimeo
[path] EDITOR/Untitled/

**YouTube or Vimeo** blocks embed external videos directly into your documentation. They are useful for tutorials, product walkthroughs, demos, and recorded presentations.

## Syntax

You can add this component using either Markdown or MDX.

::::Tabs
:::Tab{title="Markdown"}
```markdown
:::::Embed{url="https://www.youtube.com/watch?v=VIDEO_ID"}
:::::
```
:::

:::Tab{title="MDX"}
```javascript
<Embed url="https://www.youtube.com/watch?v=VIDEO_ID"/>
```
:::
::::

The `url` property accepts supported YouTube and Vimeo video links.

## MDX example

The following example embeds a YouTube video into a document.

```javascript
<Embed url="https://www.youtube.com/watch?v=VSBQ5-qo_iE"/>
```


[title] TeX equation
[path] EDITOR/Untitled/

**TeX equation** blocks let you render mathematical expressions and equations directly in your documentation. It is useful for technical content, scientific documentation, and educational materials.

## Syntax

TeX equations use standard fenced code block syntax.

````markdown
```tex
E = mc^2
```
````

The content inside the code block must follow standard TeX notation.

## Example

The following example renders several common mathematical expressions.

````javascript
```tex
\begin{aligned}
\int_{-\infty}^{\infty} e^{-x^2}\,dx &= \sqrt{\pi} \\
\sum_{n=1}^{\infty} \frac{1}{n^2} &= \frac{\pi^2}{6} \\
E &= mc^2
\end{aligned}
```
````


[title] Expandable Headings
[path] EDITOR/Editor Blocks/

::loom{url="https://www.loom.com/embed/dcb8460d05144704b018ec9aa6b41aba?sid=1aea9071-051b-46b6-ac5c-0787e172af70"}

Expandable headings are a way to organize your documentation content and improve readability. They allow you to create sections that can be expanded or collapsed by users, making it easier to find specific information.

## Why use expandable headings?

- **Improved organization**
  Expandable headings help break down complex topics into manageable sections.
- **Enhanced readability**
  Users can focus on relevant information by expanding or collapsing sections.
- **FAQ-style format**
  Expandable headings are ideal for creating FAQ (Frequently Asked Questions) sections in your documentation.

## How to add a expandable heading

There are tree ways to create expandable headings in Archbee:

- Insert the heading from blocks menu. Type `/` and select the heading block

![](https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-Q0PhUrYs2oeDDj9AKCKFh-20240809-090345.png "Add Expandable Heading")

- Converting an existing heading to expandable by type `>>` at the beginning of one, then hit space

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/QJHESQKMx60mUR4eagec9_expandable-headings.gif "Convert and unrwap them")

- Use markdown shortcuts to insert it:
  - `>>#` + `space` for Expandable Heading 1
  - `>>##` + `space` for Expandable Heading 2&#x20;
  - `>>###` + `space` for Expandable Heading 3&#x20;

To unwrap the content of the expandale heading, just delete the heading and you will be left with the text only.

## Allowed blocks for content

Inside the expandable headings, you can use **all blocks&#x20;**&#x66;or content, excepting the expandable heading block.

***

Here are some examples:

:::ExpandableHeading
# Expandable Heading 1

- You can add here any of the custom blocks available in Archbee's editor
:::

:::ExpandableHeading
## Expandable Heading 2

- You can toggle the heading as expandable or collapsible
:::

:::ExpandableHeading
### Expandable Heading 3

```javascript
fetch("https://api.cakes.com", {
  "method": "GET",
  "headers": {
    "Accept": "application/json"
  }
})
.then(response => {
  console.log(response);
})
.catch(err => {
  console.error(err);
});
```
:::

***

::::LinkArray{contentSource="CUSTOM"}
:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"}
:FontAwesome[]{icon="fa-solid fa-cubes"} &#x20;**&#x20;Find other blocks**

Discover new ways and blocks to create stunning and functional documentation pages.

[Check out all blocks](docId:6B0VTQTVUnMP93e-SZQ2p)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"}
:FontAwesome[]{icon="fa-solid fa-headset"}**&#x20; Need help?  ⬇️**

Use the **blue** **chat bubble&#x20;**&#x66;rom bottom right corner.

Or try **AI Chat** (from search box) for quick answers.
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"}
:FontAwesome[]{icon="fa-solid fa-hand-holding-heart"}**&#x20;  Your opinion matters**

Use the below feedback form, anonymously.

Or ask a question in **Q\&A section** and our team or AI will give you a solution.
:::
::::


[title] Minitaskers
[path] EDITOR/Editor Blocks/

We take inspiration from wherever possible so we landed on a small to-do list component, called **Mini-taskers**, inspired by Trello. These help you organize tasks in smaller subtasks.

You can add one by typing `(mt)` or clicking the **Mini-tasks** component inn a new row in the editor.

Here's what a mini-tasker looks like:

:::DropList
```json
{
  "columns": [
    {
      "id": "1",
      "name": "Doing ",
      "items": [
        {
          "id": "f6qifbaDBvZbqBpA7jf7H",
          "content": "Code Changes in ORM"
        }
      ]
    },
    {
      "id": "2",
      "name": "Testing",
      "items": [
        {
          "id": "kRlp8iOZwzs8Po5yAvi1_",
          "content": "Link User table to Orders"
        },
        {
          "id": "mP4DYGq5tiMVdcDmst60B",
          "content": "Stripe Integration"
        }
      ]
    },
    {
      "id": "3",
      "name": "Done",
      "items": [
        {
          "id": "gPn9-spLuYcXhLoS9xwDm",
          "content": "Database Structural Review\n"
        },
        {
          "id": "aK-ZCAK7pImC1laweMFYH",
          "content": "Getting started with API",
          "justAdded": false
        }
      ]
    }
  ]
}
```
:::

:::hint{type="warning"}
**NOTE 💡**

Archbee is not a project management or task/to-do tool but sometimes you might need to break up JIRA or Asana tasks into smaller tasks to get organized, and might as well do it here where you take notes on your process.
:::

***

::::LinkArray
:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"}
:FontAwesome[]{icon="fa-solid fa-cubes"} &#x20;**&#x20;Find other blocks**

Discover new ways and blocks to create stunning and functional documentation pages.

[Check out all blocks](docId:6B0VTQTVUnMP93e-SZQ2p)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"}
:FontAwesome[]{icon="fa-solid fa-headset"}**&#x20; Need help?  ⬇️**

Use the **blue** **chat bubble&#x20;**&#x66;rom bottom right corner.

Or try **AI Chat** (from search box) for quick answers.
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"}
:FontAwesome[]{icon="fa-solid fa-hand-holding-heart"}**&#x20;  Your opinion matters**

Use the below feedback form, anonymously.

Or ask a question in **Q\&A section** and our team or AI will give you a solution.
:::
::::


[title] Find & Replace
[path] EDITOR/

*Quickly locate and update text across your documentation with the **Find & Replace** feature. A simple, powerful feature that helps you maintain consistency and accuracy across your documentation.*

***

## How to access it

Below are the places where you can open **Find & Replace** depending on where you are working:

::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
- **In the document menu**
  Open the three-dots menu inside the editor to access **Find & Replace**.
:::

:::VerticalSplitItem
![Location 1](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/N5m13Aosp9eV_BdLmGTFZ-20260604-093343.png)
:::
::::

::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
- **In the side panel navigation**
  Use the three-dots menu next to a document in the navigation panel.
:::

:::VerticalSplitItem
![Location 2](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/7IhtpGxiYEnKQtal_8_3Q-20260604-093259.png)
:::
::::

::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
- **In the Space Overview page**
  Open the Space Dashboard to see the **Find & Replace** button. Available only for **Free Edits** and [Draft & Reviews System](docId:3cwwi9judh8iykkPcQbDl) edit modes.
:::

:::VerticalSplitItem
![Location 3](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/G_2p2zdVgaTvNngwtspAq-20260604-092656.png)
:::
::::

## How it works

The Find & Replace feature helps you search for text and update it globally with precision. Here's the workflow:

::::WorkflowBlock
:::WorkflowBlockItem
Type your word or phrase. We automatically search and display preliminary findings, including the number of matches.

You can fine‑tune your search using:

- **Match Case** – Finds only text with the **exact** same capitalization. For example, searching *"API"* will not match *"api"*.
- **Whole Words** – Matches only complete words. Searching for *"cat"* will ignore words like *"catalog".*
- **Include children** – Extends the search to all **child documents** under the current document. Useful for updating entire document branches.

![](https://api.main.archbee.co/api/optimize/bNBm7nPJgXjbjLyfbHNh2/Z0YvmKxAbWA8paoQzdtLQ-20260604-093635.png)
:::

:::WorkflowBlockItem
Choose your scope, such as a specific block type. By default, all text-based blocks are&#x20;

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/pianddQhAm_31Cj2yALaC-20260604-094923.png)
:::

:::WorkflowBlockItem
Click Replace or **Replace All** to apply changes.
:::
::::

## Variables and Glossary in Find & Replace

The Find & Replace tool also works seamlessly with [Reusable variables](docId\:KK4Xbsf1uG4DZB8rZPgoF) and [Glossary](docId\:fxh-z2IoK1ktebzjTWwLt) terms.

To search for or replace a variable or glossary entry, simply type it using the standard syntax:

- `{{variableName}}`
- `{{glossaryTerm}}`

You can:

- Search for a **variable** or **glossary** term and **replace it with another**.
- **Replace standard text** with a variable or glossary reference.
- Or perform the reverse: **replace a variable or glossary reference** with plain text.

This allows you to quickly refactor naming conventions, update reusable content, and ensure consistent terminology across your documentation.

[title] Changelog
[path] EDITOR/Editor Blocks/

Changelogs or product updates are a big part of the software development lifecycle.

This is why we've built a native component in our editor.

You can add one by typing `(changelog)` in the editor or clicking the changelog icon in a new row in the editor.

Here's an example:

:::Changelog{title="Archbee v1.22"}
::ChangelogItem{type="added" description="Deep tabular data is now supported"}

::ChangelogItem{type="fixed" description="Teammates not receiving emails fast enough"}

::ChangelogItem{type="broken" description="Everything is broken in this release"}

::ChangelogItem{type="improved" description="Works 0.000001% faster 🚀"}

::ChangelogItem{type="added" description="A library of 2 terrabytes 🤯"}
:::

## Markdown

Use the following Markdown to generate Changelog blocks:

```markdown
### Test Changelog

:::changelog{title="v1.2 Release"}
::changelog-item{type="added" description="Deep tabular data is now supported"}
::changelog-item{type="improved" description="Works 0.000001% faster"}
::changelog-item{type="fixed" description="Team mates not receiving emails fast enough"}
:::
```

Output:

:::Changelog{title="v1.2 Release"}
::ChangelogItem{type="added" description="Deep tabular data is now supported"}

::ChangelogItem{type="improved" description="Works 0.000001% faster"}

::ChangelogItem{type="fixed" description="Teammates not receiving emails fast enough"}
:::

***

::::LinkArray
:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"}
:FontAwesome[]{icon="fa-solid fa-cubes"} &#x20;**&#x20;Find other blocks**

Discover new ways and blocks to create stunning and functional documentation pages.

[Check out all blocks](docId:6B0VTQTVUnMP93e-SZQ2p)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"}
:FontAwesome[]{icon="fa-solid fa-headset"}**&#x20; Need help?  ⬇️**

Use the **blue** **chat bubble&#x20;**&#x66;rom bottom right corner.

Or try **AI Chat** (from search box) for quick answers.
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"}
:FontAwesome[]{icon="fa-solid fa-hand-holding-heart"}**&#x20;  Your opinion matters**

Use the below feedback form, anonymously.

Or ask a question in **Q\&A section** and our team or AI will give you a solution.
:::
::::


[title] Reusable variables
[path] EDITOR/Reusables/

## Add a Variable

::::WorkflowBlock
:::WorkflowBlockItem
In the bottom left corner, click on the **Reusable content → Variables** tab.
:::

:::WorkflowBlockItem
In the new window, you can now define your variables or edit the existing ones if you have already defined them.
:::

:::WorkflowBlockItem
Add the name and value, then click the **Add** button.
:::

:::WorkflowBlockItem
Now you can go back to the editor and type `{{` to open the list of variables.
:::

:::WorkflowBlockItem
Filter the variables by typing the name you have defined in the previous step.
:::
::::

## Edit a Variable

::::WorkflowBlock
:::WorkflowBlockItem
Once again, click on the **Reusable content → Variables** tab.
:::

:::WorkflowBlockItem
Look for the variable you want to change.
:::

:::WorkflowBlockItem
Click on the pencil icon and change the value.
:::

:::WorkflowBlockItem
If you want to delete a variable, click on the trash icon.
:::
::::

:::hint{type="warning"}
When you change the name of a variable, it will no longer render the value you have defined.
If you changed the variable's name, create a new one with the same name and value to render it again.
:::

## Naming and value conventions

- You don't need to add `{{}} `when you define the variable name → it's added automatically.
- Spaces in the variable name are *trimmed*.
- You can use underscore `_`, dot `.`, or dash `-` in the variable name.
- Letters (both uppercase and lowercase) are allowed, as are numbers.

:::hint{type="info"}
**Limits&#x20;**

- Variable name character limit is *40*.
- Variable value character limit is *100*.
:::

## Reusable variables in action

Check out the video below to see how to add your reusable variables:

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/dbdStaP54wga934_B_yQg_archbee-reusable-variables.gif "Reusable variables example")


[title] Add inline comments
[path] EDITOR/

Comments are an excellent way to engage your colleagues in a discussion about a certain topic that you may need clarification for. They enable you to provide feedback on the content, share valuable insights, ask questions, and foster collaboration and teamwork.

Additionally, you can use comments to create notes for yourself as you're going through your documentation.

## How does it work?

:::::WorkflowBlock
:::WorkflowBlockItem
In the editor, highlight any piece of text (a word, a whole phrase, or an entire paragraph). The menu bar will pop up - click the **Comment** button on the far right.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/-vO7lsDXEN8GRB1fEINI4_comments01-light.png "Comment button")
:::

:::WorkflowBlockItem
On the right side of the page, a conversation will open where you can leave a comment or engage your colleagues in a discussion

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/hk-53oeS7EL27pSAe3Ldc_image.png" size="70" width="702" height="760" position="center" showCaption="false"}
:::

::::WorkflowBlockItem
Unresolved comments are marked in light yellow. Click the highlighted text to open the comment box in the right sidebar. The comment box provides the following options:

1. Continue thread - type your answer and hit the "Reply" button
2. Resolve comments (click the ✔️ button in the upper right of the comment box)
3. Delete comments/thread (click the `🗑️` button in the upper right of the comment box)

:::hint{type="danger"}
❗If you delete the comment thread, you will delete all the conversation as well
:::
::::

:::WorkflowBlockItem
Reopen a closed comment/thread by clicking the **UNDO** icon on the upper right of the comment box

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/stjy2YR84hSDFtsvkb0gB_image.png)

A closed/resolved comment thread is highlighted in grey. When a comment thread is resolved, it will still keep history in that thread, until deleted. The text will stay highlighted in grey until the thread is deleted.
:::
:::::

:::hint{type="success"}
💡You can tag a specific team member or mention @document\_name as well in the comment thread.&#x20;

Check out [@ Mentions and dynamic links](docId\:xpKLRqkncGbUJqSi9XweS) for more info!
:::


[title] Emojis
[path] EDITOR/

You can add emojis by typing `:(emoji code)`, in the block editor:

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/8XZ3td-PcLnUqpo-yK86u_animation.gif" size="80" width="609" height="226" position="center" caption="Adding emojis" showCaption="true"}

We do have some rules to display the emoji list. These rules are enforced, based on our best practices and writing expectations.&#x20;

Below, you can find a list of scenarios, where the emoji dropdown will **NOT** be displayed:

- ✋ `:(space)`&#x20;
- ✋ `text :(space)`
- ✋ `text:text`
- ✋ `:(emoji code that does not exist)`
- ✋ `:+Enter`

## Font awesome icons

To enhance your content with Font Awesome icons, simply type "(fa)" in the editor. This populates a menu where you can choose from a wide range of icons to suit your needs.

Use the Font awesome icons `Inline` as quick and easy way to enrich your documents. Just insert the desired icon and watch your content come to life with professional and stylish graphics.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/KGv4DP3MsDyhMG9gdOaPF_emoji-light.png "Font awesome icons")


[title] Headings
[path] EDITOR/Editor Blocks/

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/1K2W3i4w60YhVxCpsYQNW-20250918-122230.png)

Headings are essential building blocks for organizing and structuring your documentation. They help break down your content into clear sections and subsections, making it easy for readers to navigate and understand.

## Why to use headings?

- **Improve readability**
  Headings guide readers through your content, making it easier to follow the flow of information.
- **Enhance visual hierarchy**
  Different heading levels create a clear hierarchy, emphasizing important points.
- **Improve SEO**
  Search engines use headings to understand your content's structure, which can help with search rankings.

## How to add a heading

You have **four** ways to add a heading:

### WYSIWYG Menu

Highlighting the text and choosing the heading options from [WYSIWYG Menu](docId\:WBvFMF8cfYoJgkqNrJVIG)

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/wphnxf0xVg9tyKWTJ24Vm-20250918-120750.gif)

***

### Add Block Menu

Insert the heading from blocks menu. Type `/` and select the heading block

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/-s0dghVDQC-uzIKoQICUp-20250918-121306.gif)

***

### Markdown Shorcuts

Use markdown shortcuts to insert it:

- `#` + `space` for Heading 1
- `##` + `space` for Heading 2
- `###` + `space` for Heading 3
- Check the [Use Markdown shortcuts](docId:9aaCRqJMq9JnYvzSgNOfs) page for more markdown shortcuts

***

### Keyboard Shorcuts

Using keyboard shortcuts to toggle paragraphs into:

::::Tabs
:::Tab{title="On Mac"}
- **Heading 1:** `⌘ Command` + `⌥ Option` + `1`&#x20;
- **Heading 2:** `⌘ Command` + `⌥ Option` + `2`
- **Heading 3:** `⌘ Command` + `⌥ Option` + `3`&#x20;
- Check the [Editor Keyboard Shortcuts](docId\:XLeyegxM6wsarhL5e-Wgp) page for more keyboard shortcuts
:::

:::Tab{title="On Windows"}
- **Heading 1:&#x20;**`Control` + `Shift` + `1`&#x20;
- **Heading 2:** `Control` + `Shift` + `2`
- **Heading 3:&#x20;**`Control` + `Shift` + `3`
- Check the [Editor Keyboard Shortcuts](docId\:XLeyegxM6wsarhL5e-Wgp) page for more keyboard shortcuts
:::
::::

***

## Customizable Heading Links&#x20;

You can assign custom URLs (aliases) to any heading in Archbee, making it easier to share direct links to specific sections of a page.

Below is a clear, step‑by‑step guide:

### How to Set a Custom Heading Link

1. **Hover over the heading** you want to link to.
2. Click th&#x65;**&#x20;Anchor Link&#x20;**&#x62;ubble that appears.
3. In the popup, switch **Auto-generate** off if needed.
4. Enter your **custom alias** (URL-friendly text).
5. Press **Set**.

::Image[]{src="https://i.postimg.cc/CLpn5n7T/Screenshot-2026-03-02-at-17-06-52.png" size="60" width="1280" height="886" position="center" showCaption="false"}

### Why Customize Heading Links?

- Create short, clean, human-readable URLs.
- Establish consistent naming conventions across your documentation.
- Improve navigation for users who need deep-link access.

:::hint{type="warning"}
Be careful when setting custom aliases for heading links. Duplicated aliases can lead to multiple headings or documents sharing the same URL, causing navigation conflicts.
:::

***

::::LinkArray{contentSource="CUSTOM"}
:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"}
:FontAwesome[]{icon="fa-solid fa-cubes"} &#x20;**&#x20;Find other blocks**

Discover new ways and blocks to create stunning and functional documentation pages.

[Check out all blocks](docId:6B0VTQTVUnMP93e-SZQ2p)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"}
:FontAwesome[]{icon="fa-solid fa-headset"}**&#x20; Need help?  ⬇️**

Use the **blue** **chat bubble&#x20;**&#x66;rom bottom right corner.

Or try **AI Chat** (from search box) for quick answers.
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"}
:FontAwesome[]{icon="fa-solid fa-hand-holding-heart"}**&#x20;  Your opinion matters**

Use the below feedback form, anonymously.

Or ask a question in **Q\&A section** and our team or AI will give you a solution.
:::
::::


[title] Table
[path] EDITOR/Editor Blocks/

Sometimes, lists aren't enough to convey the information that you want. Thus the reason for editable tables.

Table allows you to structure and present information in a clear, organized, and visually appealing format. It's perfect for displaying data in rows and columns, making it easy to compare, analyze, and understand.

***

## When use a table

Tables are ideal when your content:

::::LinkArray{contentSource="CUSTOM" itemsPerRow="3"}
:::LinkArrayItem
:Lucide[]{icon="ListChecks"}&#x20;

Has repeated patterns (e.g., attributes, features, data points)
:::

:::LinkArrayItem
:Lucide[]{icon="Banknote"}&#x20;

Needs comparison (pricing, plans, specs)
:::

:::LinkArrayItem
:Lucide[]{icon="MoveHorizontal"}&#x20;

Benefits from horizontal scanning
:::
::::

***

## How to add a table&#x20;

::::WorkflowBlock
:::WorkflowBlockItem
Type `/` to open the block list menu
:::

:::WorkflowBlockItem
Search for **Table** and click on it to insert
:::

:::WorkflowBlockItem
A basic 3x4 table having the first row as header will be created
:::
::::

Alternalely directly insert a table, simply type `(table)`.

|   |   |   |
| - | - | - |
|   |   |   |
|   |   |   |
|   |   |   |

***

## Understanding the table controls

Every table has interactive controls that appear when you click the handles, cells or margins.

::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
### Row handle (left side)

Each row has its individual handle. You can use it to:

- Add row to above :Lucide[]{icon="ArrowUpFromLine"} or below :Lucide[]{icon="ArrowDownFromLine"} ;
- Change background color :Lucide[]{icon="PaintBucket"} ;
- Delete row :Lucide[]{icon="Trash"} ;


:::

:::VerticalSplitItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/Yg6LvC-mBauQuP0IUNSQ2-20260302-205158.png)
:::
::::

::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
### Column handle (top side)

Each column has its individual handle. You can use it to:

- Align content to left :Lucide[]{icon="AlignLeft"}, centre :Lucide[]{icon="AlignCenter"} or right :Lucide[]{icon="AlignRight"} ;
- Change background color :Lucide[]{icon="PaintBucket"} ;
- Add column to left :Lucide[]{icon="ArrowLeftFromLine"} or right :Lucide[]{icon="ArrowRightFromLine"} ;
- :Lucide[]{icon="Trash"} Delete row


:::

:::VerticalSplitItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/az8JCDRR3Px0zqdn79NlR-20260302-205146.png)
:::
::::

::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
### Corner dot (upper‑left)

Used for whole‑table actions such as:

- Change border color :Lucide[]{icon="Table"} ;
- Show first row as table header :Lucide[]{icon="PanelTop"} ;
- Freezing headers :Lucide[]{icon="Snowflake"} ;


:::

:::VerticalSplitItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/2SzZMQX5-_zpGzHwGGP3e-20260302-205118.png)
:::
::::

::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
### Cell popup menu

Appears when you click inside a cell or select multiple cells. Gives access to:

- Merge cells :Lucide[]{icon="TableCellsMerge"} ;
- Split cells :Lucide[]{icon="TableCellsSplit"} ;
- Change background color :Lucide[]{icon="PaintBucket"} ;


:::

:::VerticalSplitItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/b4uNPi_dBce6cNh3jZ5kV-20260302-204219.png)
:::
::::

::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
### Resize a column - adjust the cell width

Column resizing lets you control how much space each column takes.

Hover your cursor over the **right edge** or **left edge** of a column and **click & drag** to adjust the widht.
:::

:::VerticalSplitItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/YoLc9h8D-erziircvDlgT-20260302-210241.png)
:::
::::

***

## Editing cell content

Every cell in a table is its **own mini editor**. You can type, format, and structure content exactly like you would in any normal block, no special tools or steps required. Simply click inside a cell and begin typing.

::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
Selecting a text will trigger the [WYSIWYG Menu](docId\:WBvFMF8cfYoJgkqNrJVIG) to appear, giving you access to bold, italics, inline code, links, and any other basic formatting you normally use.


:::

:::VerticalSplitItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/e5Ns1ANbuHq7blSVu361B-20260302-214253.png)
:::
::::

::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
Cells also support inserting blocks. Here are the available in‑cell blocks you can use:

- **Headings**
- **Lists**
- **Images**&#x20;

These are the only block types supported inside table cells.
:::

:::VerticalSplitItem
::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/5oyz0_5kBE1A_HmS3FoHN-20260302-214213.png" size="80" width="738" height="697" position="center" darkWidth="738" darkHeight="697" showCaption="false"}
:::
::::

***

## Full‑screen editing mode&#x20;

When a table becomes large or visually complex, the in‑page editor can feel cramped.&#x20;

::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
The **Full‑Screen Editing Mode** gives you a dedicated editor especially for managing large datasets and wide tables, benefiting all:

- **See more columns at once** without having to scroll horizontally.
- **Work with large row counts** in a smoother, distraction‑free space.
- **Add, remove, or rearrange rows and columns** with less visual clutter.
- **Avoid page reflow** — the rest of the document stays out of the way.
:::

:::VerticalSplitItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/BCP9uYIPqxMP5kdbHZ_0Y-20260302-222059.png)
:::
::::



::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
To open Open full‑screen mode, clicking the **expand icon&#x20;**&#x74;he upper‑right corner.

To close, simply press on <font color="#EF4444">`esc`</font> key or button, or click outside.&#x20;

Every change is automalitcally saved.


:::

:::VerticalSplitItem
::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/H1HYQVKfvyTuBSiPsRGeA-20260302-221726.png" size="80" width="368" height="236" position="center" darkWidth="368" darkHeight="236" showCaption="false"}
:::
::::

Here is a table example, using frozen headers:

| **Feature**                          | **Growing**       | **Scaling**        | **Enterprise**      |
| ------------------------------------ | ----------------- | ------------------ | ------------------- |
| Spaces & Documents                   | Unlimited         | Unlimited          | Unlimited           |
| Public spaces                        | ✅                 | ✅                  | ✅                   |
| Custom domain publishing             | ✅                 | ✅                  | ✅                   |
| CDN & image optimization             | ✅                 | ✅                  | ✅                   |
| Document verification                | ✅                 | ✅                  | ✅                   |
| Full-text search                     | ✅                 | ✅                  | ✅                   |
| SEO optimization                     | ✅                 | ✅                  | ✅                   |
| AI/LLM optimization                  | ✅                 | ✅                  | ✅                   |
| File storage                         | 10GB + 2GB/member | 20GB + 10GB/member | 100GB + 10GB/member |
| Document revision history            | 1 Year            | 2 Years            | 5 Years             |
| Custom domains                       | 1                 | 1                  | Per contract        |
| Space links for multi-product docs   | —                 | ✅                  | ✅                   |
| Version links for multi-version docs | —                 | ✅                  | ✅                   |
| Language localization                | —                 | ✅                  | ✅                   |
| Reusable variables                   | —                 | ✅                  | ✅                   |
| Search analytics                     | —                 | ✅                  | ✅                   |
| Space groups                         | —                 | ✅                  | ✅                   |
| Automated AI translations            | —                 | —                  | ✅                   |
| Display rules & conditional content  | —                 | —                  | ✅                   |
| Readers & traffic                    | Unlimited         | Unlimited          | Unlimited           |
| Password authentication              | ✅                 | ✅                  | ✅                   |
| Guest accounts                       | —                 | ✅                  | ✅                   |
| Magic links                          | —                 | ✅                  | ✅                   |
| JWT                                  | —                 | ✅                  | ✅                   |
| SAML                                 | —                 | —                  | ✅                   |

***

## Full‑Screen viewing mode for readers

::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
Readers can enlarge any table by clicking the expand icon.&#x20;

The table opens in a large, scrollable modal that removes page constraints, making wide or data‑heavy tables far easier to read.&#x20;
:::

:::VerticalSplitItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/KHC1xa5dsaH7Ch9PE-LG_-20260302-223556.gif)
:::
::::

***

## Example

Here's a another example, just to showcase what you can do with tables:

| **Feature Set 1** | **Feature Set 2**                                                                                                                                                                                                                                       | **Feature Set 3**        |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |
| Unlimited Readers | ::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/woqyzd8gCyu9t8AepPjXp_archbee-logo-typemark-light.png" size="60" width="256" height="64" position="flex-start" darkWidth="256" darkHeight="64" showCaption="false"} | SAML                     |
| Custom Domain     | Advanced integrations                                                                                                                                                                                                                                   | API Access               |
| Full Branding     |  Custom Code                                                                                                                                                                                                                                            | Customer Success Manager |

***

::::LinkArray{contentSource="CUSTOM"}
:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"}
:FontAwesome[]{icon="fa-solid fa-cubes"} &#x20;**&#x20;Find other blocks**

Discover new ways and blocks to create stunning and functional documentation pages.

[Check out all blocks](docId:6B0VTQTVUnMP93e-SZQ2p)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"}
:FontAwesome[]{icon="fa-solid fa-headset"}**&#x20; Need help?  ⬇️**

Use the **blue** **chat bubble&#x20;**&#x66;rom bottom right corner.

Or try **AI Chat** (from search box) for quick answers.
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"}
:FontAwesome[]{icon="fa-solid fa-hand-holding-heart"}**&#x20;  Your opinion matters**

Use the below feedback form, anonymously.

Or ask a question in **Q\&A section** and our team or AI will give you a solution.
:::
::::


[title] Code editor: multi-language
[path] EDITOR/Editor Blocks/

Our code editor is where you can show off code examples that can be easily copied.

You can add multiple tabs using the same language and use drag-and-drop to reorganize tabs.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/THSqdEtr4ZHb3KqpazPfo_f4dgqb8.gif)

When you add a new tab, you can also change the name to something like a file, e.g., `main.js`

See our example:

:::CodeblockTabs
main.js

```javascript
fetch("https://api.cakes.com", {
  "method": "GET",
  "headers": {
    "Accept": "application/json"
  }
})
.then(response => {
  console.log(response);
})
.catch(err => {
  console.error(err);
});

```

```go
// We can use channels to synchronize execution
// across goroutines. Here's an example of using a
// blocking receive to wait for a goroutine to finish.
// When waiting for multiple goroutines to finish,
// you may prefer to use a [WaitGroup](waitgroups).

package main

import "fmt"
import "time"

// This is the function we'll run in a goroutine. The
// `done` channel will be used to notify another
// goroutine that this function's work is done.
func worker(done chan bool) {
    fmt.Print("working...")
    time.Sleep(time.Second)
    fmt.Println("done")

    // Send a value to notify that we're done.
    done <- true
}

func main() {

    // Start a worker goroutine, giving it the channel to
    // notify on.
    done := make(chan bool, 1)
    go worker(done)

    // Block until we receive a notification from the
    // worker on the channel.
    <-done
}

```

```python
# Python3 program to demonstrate 
# the use of sample() function . 
  
# import random  
import random 
  
  
# Prints list of random items of 
# length 3 from the given list. 
list1 = [1, 2, 3, 4, 5, 6]  
print("With list:", random.sample(list1, 3)) 
  
# Prints list of random items of 
# length 4 from the given string.  
string = "GeeksforGeeks"
print("With string:", random.sample(string, 4)) 
  
# Prints list of random items of 
# length 4 from the given tuple. 
tuple1 = ("ankit", "geeks", "computer", "science", 
                   "portal", "scientist", "btech") 
print("With tuple:", random.sample(tuple1, 4)) 
  
  
# Prints list of random items of 
# length 3 from the given set. 
set1 = {"a", "b", "c", "d", "e"} 
print("With set:", random.sample(set1, 3)) 
```

```php
<?php
$name = "Quincy";
echo "Hi! My name is " . $name . "<br>";
echo "Hi! My name is " . $NAME . "<br>";
echo "Hi! My name is " . $NaMe . "<br>";
?>
```

```csharp
/*
 * C# Program to Check Whether the Entered Year is a Leap Year or Not
 */
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
 
namespace Program
{
    class leapyear
    {
        static void Main(string[] args)
        {
            leapyear obj = new leapyear();
            obj.readdata();
            obj.leap();
        }
        int y;
        public void readdata()
        {
            Console.WriteLine("Enter the Year in Four Digits : ");
            y = Convert.ToInt32(Console.ReadLine());
        }
        public void leap()
        {
            if ((y % 4 == 0 && y % 100 != 0) || (y % 400 == 0))
            {
                Console.WriteLine("{0} is a Leap Year", y);
            }
            else
            {
                Console.WriteLine("{0} is not a Leap Year", y);
            }
            Console.ReadLine();
        }
    }
}
```
:::

## Markdown

### Code block with a single tab

```nodejs
var http = require('http');

http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World!');
}).listen(8080);
```

Use the following Markdown to generate a code block with a single code example:

````markdown
## Code block

```nodejs
var http = require('http');

http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World!');
}).listen(8080);
```
````

### Code blocks without language

:::CodeblockTabs
```text
// code block not specified
```

```text
// code block not specified
```

```text
// code block not specified
```
:::

Use the following Markdown to generate a code block without specifying the language:

````markdown
## Code blocks

:::::codeblocktabs

```
// code block not specified
```

```
// code block not specified
```

```
// code block not specified
```

:::::
````

### Code editor with multiple tabs

:::CodeblockTabs
```php
// PHP is the best.
```

```java
// and JAVA too
```

```go
// demo go
```

```javascript
// demo js
```
:::

Use the following Markdown to generate a Code block with multiple tabs:

````markdown
## Demo Code Blocks

:::::codeblocktabs

```php
// PHP is the best.
```

```java
// and JAVA too
```

```go
// demo go
```

```javascript
// demo js
```

:::::
````

***

::::LinkArray{contentSource="CUSTOM"}
:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"}
:FontAwesome[]{icon="fa-solid fa-cubes"} &#x20;**&#x20;Find other blocks**

Discover new ways and blocks to create stunning and functional documentation pages.

[Check out all blocks](docId:6B0VTQTVUnMP93e-SZQ2p)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"}
:FontAwesome[]{icon="fa-solid fa-headset"}**&#x20; Need help?  ⬇️**

Use the **blue** **chat bubble&#x20;**&#x66;rom bottom right corner.

Or try **AI Chat** (from search box) for quick answers.
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"}
:FontAwesome[]{icon="fa-solid fa-hand-holding-heart"}**&#x20;  Your opinion matters**

Use the below feedback form, anonymously.

Or ask a question in **Q\&A section** and our team or AI will give you a solution.
:::
::::


[title] Verify documents
[path] DOCUMENTS/

As your product(s) grows, and the need to document knowledge in a central place expands, that knowledge can get outdated pretty fast. Especially if you don't have a large team of writers, product managers, support, or whoever is writing documentation.

That's why we felt the need to make this easy for you to keep your docs up-to-date, always. Enter: **Document verifications** ✅.

As the name suggest, you can use this option to verify documents periodically to ensure quality and consistency, as well as great customer experience through your docs.

Next t&#x6F;**&#x20;Edit draft**, click on **Verification settings** > select a subject matter expert from your team, and choose how often the system will notify them to check the content of the document.

Check out the video below to see how it works:

::embed[]{url="https://www.youtube.com/watch?v=G8jqCzeebQg"}


[title] Document history
[path] DOCUMENTS/

**Document revision history** is a feature that allows you to see the history of edits for an article — not just the last edit — and restore it to any version.

:::hint{type="success"}
✅   **Autosave**

Each change you make to a document is autosaved, and in turn becomes another version of the document.
:::

## How does it work?

:::::WorkflowBlock
::::WorkflowBlockItem
**Access history**
Click on the 3-dots icon to open the document menu and click on Document Revision History.

:::hint{type="warning"}
<font color="#fcb900">**⚠️**</font>**&#x20;  Warning**

If you're using the Review System, you'll need to finish your draft and merge it into the original to see the "Document review history" option.
:::

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/xZJtAaLtWw3rHMhgtU9vm_docmenu-light.png "Show document history")
::::

:::WorkflowBlockItem
**View changes**
A new modal will open, showing the revisions on the left side and the document content in the right side.
:::

:::WorkflowBlockItem
**Compare versions**
Highlighted sections indicate differences between the selected version and the previous one:&#x20;

- <font color="#3faa10">**Green**</font> — for content added
- <font color="#eb4848">**Red** </font>— for content deleted

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/K_r0OkoKYb_KzPrWQ9iJu_rev-his-light.png "Document versions")
:::

::::WorkflowBlockItem
**Revert to a previous version**
Click the **↩ Revert** button next to any saved version to restore the document to that state.

:::hint{type="success"}
**💡   Note&#x20;**

When you revert to a version of the document, we'll keep the history, and the version you selected will be the new document.
:::
::::
:::::

:::hint{type="info"}
For more complex collaboration and granular control over documents, explore our [Draft & Reviews System](docId:3cwwi9judh8iykkPcQbDl) feature, which enables draft mode, review requests, and more detailed change comparisons.
:::


[title] DOCUMENTS
[path] /


[title] Mark as hidden on public docs
[path] DOCUMENTS/

With Archbee, you can **mark documents as hidden on public.** Use this functionality for multiple purposes:

- When you want to leave your in-progress work unpublished
- Keep documents unpublished until a review has been completed
- Separate your internal documents from public ones within a Space
- For personal notes/suggestions/experiments

## How does it work?

From any document (except *Personal docs*), click the three-dots menu, and then click the **Mark hidden on public** option to mark/unmark your document as hidden or visible.

::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/l1sFj8QIxgvZO4Ji1P6Eb_hidden-light.png "Mark hidden on public")
:::

:::VerticalSplitItem
::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/Mha1JH9bqlPKzn2d55rV0_un-hidden-light.png" darkSrc="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/uHxoW2MTh_6l_K_gZcnTX_un-hidden-dark.png" size="98" width="1024" height="1024" darkWidth="1024" darkHeight="1024" position="center" caption="Mark visible on public" showCaption="true"}


:::
::::

- A grey `H` icon will appear on the right side of the doc's title denoting that this document is hidden from public view.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/zI5Z0_8ArM_4rJgN9dBxs_badge-hidden-light.png "H icon denoting a hidden doc")

:::hint{type="info"}
- A document marked as hidden, along with its children docs, will **not be published** together with the Space.
- If a Category contains only hidden docs, that Category will **not be visible** when you publish your Space.
:::

:::hint{type="warning"}
Make sure that you don't forget to hit **Publish space** after you mark a doc as hidden, otherwise it will still be visible on public.
:::






[title] Document trees
[path] SPACES/

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/spnIHASeLjvoHwAolWXv6_tree-light.png "Archbee document tree")
:::

:::VerticalSplitItem
Each **Space&#x20;**&#x68;as a document tree that has documents nested underneath, and each document can have 0-n children documents.

You can **reorder** documents by a simple drag-and-drop.

You can and also move them to other spaces by drag-and-dropping them onto the desired space.

Alternatively, from the **three-dot menu** next to each document, click **Move to another space** and then select where you want to move that document.

Check out the image on the left to see Archbee's example of a document tree, grown in our own platform. 😉
:::
::::


[title] Space group
[path] SPACES/

## What is a Space Group?

You can think of Spaces as folders. We introduced Space Groups to easily group Spaces into Space Group.

By default, you will have one Space Group called Spaces, and you can create as many Space Groups as needed to organize your workspace efficiently.

## How to create and manage Space Groups

:::::WorkflowBlock
:::WorkflowBlockItem
Create a new Space Group using the `New space group` button

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/jg_CEK9fZEwlWc39YK_Eg_nsp-light.png)
:::

::::WorkflowBlockItem
Rename or Delete a Space Group from the 3 dots menu

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/5j4XjmsebKd0wCbjJyO1t_delete-sp-light.png)

:::hint{type="info"}
**DELETE -&#x20;**&#x61; Space Group must be empty(not containing any spaces) in order for it to be Deleted
:::
::::

:::WorkflowBlockItem
Reorder - Space Groups can be reordered by dragging and dropping them in the desired position
:::
:::::

## How to add Spaces to a Space Group

There are 3 ways to add a Space to a Space Group:

::::WorkflowBlock
:::WorkflowBlockItem
Create a new Space inside the Space Group

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/o9XxEU26Pypy_MDjZxQNT_create-sp-light.png)
:::

:::WorkflowBlockItem
Move the Space to the Space Group from the Space's 3 dot menu

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/Rf64lusPRjUciInRUXijH_move-sp-light.png)
:::

:::WorkflowBlockItem
Drag and drop the Space to the Space Group
:::
::::

:::hint{type="info"}
Default Space Group **SPACES&#x20;**&#x63;an not be renamed or deleted for the moment
:::


[title] Spaces
[path] SPACES/

## What are Spaces?

Spaces in Archbee are what you may think of as grouping documents under a single scope: like a team, a project, or a hosted space ready to be published to a custom domain.

Spaces are a foundational element for your product knowledge management that act as a top-level container for documents you create in Archbee.&#x20;

Follow along to learn how you can create Spaces in your documentation.



::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
![Spaces](https://app.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/Bob3KAyEMGVSo3CLrGcve-20251107-114328.png "Spaces")
:::

:::VerticalSplitItem
We recommend using spaces to organize your documentation around teams or topics.

- Each space has a [document tree](docId:1so8KsKKPsHfHZIvKymiB) that contains documents, and each document can have 0-n children documents.

***

- Each account created has a private space called **Personal Docs**, which is specific only to that account. No one else has access to the documents inside this space.

***

- Every account is associated with an Organization which by default has the following spaces:
  - General
  - [Templates](docId\:IkwI_A-ipsqLaSgoom314)&#x20;
  - Archives

***

- You can also create custom spaces on Organization level, which are visible to all members of that organization.

***

- Finally, you can assign role-based access controls for Team members, Individuals, or Custom groups.
:::
::::

In the image above, you can see an example of what the Spaces section can look like.

Feel free to modify the icon of any space with custom emojis - click the default icon and change it to your liking.

Our example only has custom icons but you can choose to only have the generic icon set or alternate between these two options.


[title] Team Access Control
[path] SPACES/

## How to control the access to specific Spaces

Spaces are a way to organize your documents around teams or topics. By default, a Space is private, and you can use user groups and role-based access controls to restrict team members' access to it.

Team Access Control is a feature that allows you to manage who has access to each Space on Archbee and their permission type: `read or write`.

:::hint{type="warning"}
These permissions are available only for users invited to an Archbee Organization.

For the permissions available for readers please check [Public Access Controls](docId\:w7VFvxPMFYSPdg0xnzlK1).
:::

## Managing Access

::::WorkflowBlock
:::WorkflowBlockItem
Go to Space settings

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/K2IpYFfyiOK7jGMyRSyI2_settigns-light.png)
:::

:::WorkflowBlockItem
Click on the Team Access Control tab.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/0dJDhpXHpvll_LT2gHnnW_teamcontrol-light.png)
:::
::::

Superadmins and Administrators can manage who has access to each Space and the type of permission: `read or write`.

To remove access to a Space, delete the Team Members groups using the `trash icon`. You can also delete Custom groups or individual users with access to a Space.

To add access to a Space for a user or group, click on the "Add Permission" button. You can then search for the user or group you want to provide access to. Toggle on or off the Read or Write permission to provide further control.

## Learn More

If you want to learn more about how to manage your organization on Archbee, check out our guide on [Manage the Organization](docId\:qMcAOETXG84qzkBq_Ovwv)

[title] Questions & Answers Section
[path] SPACES/

**Question & Answer (Q\&A) Feature&#x20;**&#x6F;n our documentation platform allows users to engage more deeply with the content by asking questions and providing answers or comments. This feature can foster a collaborative environment where users can seek clarification, share insights, or discuss specific aspects of the documentation. The Q\&A feature is flexible and can be enabled or disabled depending on the needs of your space.

## Enabling/Disabling the Q\&A Feature

::::WorkflowBlock
:::WorkflowBlockItem
Navigate to Space Settings by clicking on the settings (⚙️) icon.
:::

:::WorkflowBlockItem
Access the **Questions & Answers Section**
:::

:::WorkflowBlockItem
Enable/Disable the Feature

- **Enable Questions & Answer Section for this space**
  Toggle the switch to enable the *"Enable Questions & Answer Section for this space"&#x20;*&#x66;eature. When enabled, members can ask questions on documents internally.
- **Enable Public messages**
  Toggle the switch to enable the public messages. Allow your audience to ask questions on the public documentation
- **Enable Automatic AI Replies**
  Toggle the switch to enable automatic AI replies to public questions, similar to search chat answers.
- **Enable Message Approval**
  Toggle the switch to enable message approval. Messages left by users on public sites will require approval before being posted.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/ZQau8i0VcLZuau-8_5mnH_image.png)
:::
::::

:::hint{type="warning"}
<font color="#fcb900">⚠️</font>   **Important**

After enabling or disabling the Q\&A feature (or any setttings), don't forget to re-publish your space.
:::

## Asking a Question or Posting a Comment (public)

:::::WorkflowBlock
:::WorkflowBlockItem
Navigate to the bottom of your Documentation Page

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/iD15-1Q6c5gT_sfGfjJc3_image.png)
:::

::::WorkflowBlockItem
If you're authenticated, write your question/comment and press **Post**

:::hint{type="warning"}
If you're not authenticated yet, continue with Step 3 👇
:::
::::

:::WorkflowBlockItem
Enter your **name** an&#x64;**&#x20;e-mail** address and press **Sent authentication link**

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/izUGrFhV8aTdBHq24ik2G_image.png" size="80" width="1040" height="996" position="center" darkWidth="800" darkHeight="766" showCaption="false"}
:::

::::WorkflowBlockItem
Click on the link from the received e-mail to confirm and participate on discussions.

:::hint{type="success"}
🎉   **Congrats!**

You are now authenticated and your question was posted.&#x20;
:::

:::hint{type="warning"}
Depending on the Q\&A space configuration, your question could be in *"waiting for approval"&#x20;*&#x73;tatus until being approved by the Admin.
:::
::::
:::::

## Q\&A for internal use

### Commenting and Questioning

Members can add comments or questions directly on documents.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/SNQa5fl3GHuN93B3BNGiW_image.png)

### Approval Workflow

If the *"Enable Message Approval"* setting is on, comments or questions submitted from the public site will be placed in a **"Pending moderation"** status.

Members with the appropriate permissions will approve these submissions before they become publicly visible.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/0YskUHGUF7bGeTYg2buD0_image.png)

:::hint{type="warning"}
<font color="#fcb900">⚠️</font>  **Approval of AI responses**

Likewise, when **Message Approval&#x20;**&#x69;s enabled, AI responses will be placed in a **"Pending moderation"** status.
:::

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/JnpIOKZjXf9jw0LBtRwLS_screenshot-2024-08-21-at-113106.png)


[title] Hosting Spaces on a custom domain
[path] HOSTED SPACES/

Archbee's Spaces can be made Public and hosted on your domain with auto-renewable SSL certificates and guaranteed uptime as part of our SLA. We host your content on your domain through Azure and CloudFlare CDN to be fast and reliable.

To publish your documentation portal to a custom domain (e.g., `docs.yourdomain.com`), you first need to set it up.

## How to add a custom domain

You need to set up your domain to enable the publish mode and get the preview and production environments. Adding a custom domain isn't as complex as it seems, and here's what you need to do.

::::WorkflowBlock
:::WorkflowBlockItem
Select the Space you want to publish to a domain.
:::

:::WorkflowBlockItem
Click on the gear icon to open the Space settings.
:::

:::WorkflowBlockItem
Navigate to the Custom Domain tab.
:::

:::WorkflowBlockItem
Next, you have to follow the steps mentioned there.
:::
::::

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/9jz4rdlg0QJTgJ9o799Q-_hosted-light.png)

To add a CNAME for the desired subdomain, you need access to the domain registrant. This is typically where you purchased your domain name (like GoDaddy, Enom, or Name.com).

If you have access to add a CNAME, follow these steps, but also use the domain registrant knowledge base. We linked to some of the provider's documentation to help you out.

::::WorkflowBlock
:::WorkflowBlockItem
Sign in to your domain's account at your domain host.
:::

:::WorkflowBlockItem
Locate the page for updating your domain's DNS settings. The page might be called something like DNS Management, Name Server Management, or Advanced Settings.
:::

:::WorkflowBlockItem
Create or change the CNAME for the subdomain you have chosen and configured in Archbee (might have been something like `docs.yourcompany.com`)
:::

:::WorkflowBlockItem
Set the value for it to `proxy.archbee.com`
:::

:::WorkflowBlockItem
Save your changes and wait until they take effect. An SSL certificate will be generated for your subdomain and deployed to our edge infrastructure to all your users.
:::
::::

:::hint{type="warning"}
While you're here, please check that your CAA record does not prevent Google Trust LLC (pki.goog) to generate SSL certificates for your domain.
:::

Lastly, check if the DNS has propagated. **CNAME record changes can take up to 72 hours to go into effect**, but typically they happen much sooner.

Next, you must set the Space public, add your subdomain in Step 4, then click Set.

:::hint{type="info"}
When a new domain is configured, an **automated publish will be triggered**, and publish mode is activated, and now you can publish to production.
:::

## How to find your domain host

You can search for your domain host online if you can't find your billing records.

The Internet Corporation for Assigned Names and Numbers (ICANN) is a non-profit organization that collects domain information. Use the ICANN Lookup tool to find your domain host.

::::WorkflowBlock
:::WorkflowBlockItem
Go to [lookup.icann.org](https://lookup.icann.org/).
:::

:::WorkflowBlockItem
In the search field, enter your domain name and click Lookup.
:::

:::WorkflowBlockItem
On the results page, scroll down to Registrar Information.
:::
::::

The registrar is usually your domain host.

## How to add a CNAME

If you don't know how to add the CNAME, use this template to email your technical people for help adding your unique CNAME record to your DNS records.

Please enter your unique `Label/Host` and `Destination/Target` text into the email before sending it to your domain host's support team or somebody from your team.

:::BlockQuote
Hello,

Would you please help me add a CNAME record to my domain's DNS records?

My domain is: e.g., archbee.io (replace it with your domain)
My CNAME record (destination/target) is: e.g., demo.archbee.io (replace it with the subdomain where you want to Space to be hosted)
My CNAME record (host/label) points to: proxy.archbee.com (don't change this one)

Please get in touch with me at: \{your email address}

Thanks,
\{your name}
:::

**How to add a CNAME with popular providers**

[[https://docs.gandi.net/en/domain\_names/common\_operations/link\_domain\_to\_website.html](https://docs.gandi.net/en/domain_names/common_operations/link_domain_to_website.html)](https://docs.gandi.net/en/domain_names/common_operations/link_domain_to_website.html)

[title] Tabs
[path] EDITOR/Editor Blocks/

![](https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-qlzuX6ak9nYvTvfqGAc1q-20240822-125616.png)

Tabs is a block that allows you to organize content into multiple sections within a single document. It's like a set of tabs that you can click on to reveal different information. Think of it as a way to create multiple pages within one page.

## Why to use it

- **Organize complex content**
- Group related content into separate tabs for better structure and readability.
- **Improve readability**
- Make your content easier to navigate and understand.
- **Save space**
- Use eficiently the space by displaying content sequentially rather than all at once.
- **Create interactive experiences**
  Engage users by allowing them to actively choose the information they want to see.

## How to use the Tabs block

::::::WorkflowBlock
:::WorkflowBlockItem
Type `/` to open Archbee block menu
:::

:::WorkflowBlockItem
Search for **Tabs** block and click to insert insert

![](https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-eXhqk7Cgjios95U2j8it8-20240822-124946.png)
:::

:::WorkflowBlockItem
Customize your tab's and names.

By default, the block is created with 2 tabs named "Tab Name" and "Second Tab Name".

To rename a tab, you have to enter in edit label mode by:

- Double-clicking on the tab label
- Or hitting the "Edit label" icon ( :FontAwesome[]{icon="fa-solid fa-pen-to-square"} )

Press on save ( :FontAwesome[]{icon="fa-solid fa-check"} ) to update the label, or press on discard ( **↩** ) to undo changes.
:::

:::::WorkflowBlockItem
Feel free to add your content. You can style the content however you like using the [WYSIWYG Menu](docId\:WBvFMF8cfYoJgkqNrJVIG) or even insert other blocks, like:

::::LinkArray{contentSource="CUSTOM"}
:::LinkArrayItem
Basic Blocks

- [Headings](docId\:CH1EclxGmlPa-XaZAwY6u)&#x20;
- [Expandable Headings](docId\:aJpn6HeMcswfb9RR4hDHZ)&#x20;
- [Lists](docId\:D02_VQ5GNbt-SUeqoTQ3g)&#x20;
- [Table](docId\:XISmEqbPiMGonZxHooHwZ)&#x20;
- [Button](docId\:JDAXu7IBxBA1jW3KHOrOp)&#x20;
- [Callout](docId\:c-sJUb-iR1V0j8c_BKSmC)&#x20;
- [Horizontal Divider](docId\:YUthnHc9mNprZRTwXPB4L)&#x20;
- [Vertical Split](docId\:VTOI7mkPJHKCQCC4xOAty)&#x20;
- [Minitaskers](docId\:VYT5x0nyqUpzGwz906R56)&#x20;
- [Link Grid](docId\:Z_VgvWiFBolvUazqD6vWM)&#x20;
- [Workflow](docId\:tNgOuV2y9_9uT1vnWHqXJ)&#x20;
:::

:::LinkArrayItem
Media Blocks

- [File](docId\:t1Ky085LzcMKkp3H9EBA_)&#x20;
- [Image](docId\:MfIBZf9K-Ya8z3ldzQ37V)&#x20;
- [Video](docId\:B2Ip7DJZj3gHcRxc42rIL)&#x20;
- [Map](docId:_6bL0kZA7bB9RgcNylSWS)&#x20;
:::

:::LinkArrayItem
Developer Blocks

- [Code editor: multi-language](docId:_DmwEwV5w9YcnVMlcUI53)&#x20;
- [Mermaid diagrams](docId\:fRhB6aopNdkyYjeQDeJLG)&#x20;
- [TeX Equation](docId\:W4KY8zdZZGYouNMTXuLiT)&#x20;
- [API endpoints](docId\:JwrgiyTgiu8c_7ml3Hna8)&#x20;
- [OpenAPI/Swagger](docId\:BKf0SkSgsYaIMm6EK1CPb)
- [Changelog](docId\:s9KuKIUE8z2e4Y1X4V1gB)&#x20;
:::
::::

Also, most of our integrations work inside tab block. You can add embeds from other tools like Loom, Figma, Miro, Lucidcharts, and more.

Check the [Embedded Blocks.](docId\:ejEgS_viSAOk25-lby1x0) page for more info.
:::::
::::::

## Markdown

Here's how to create a tab in your document using markdown code:

:::::WorkflowBlock
:::WorkflowBlockItem
Start with the `:::tabs` line.
:::

::::WorkflowBlockItem
Each tab content goes between `:::tab` and `:::` markers.

:::hint{type="warning"}
**🚨   Attention!**

A colon `:` should be placed in a parent markdown element to signify that it encloses another markdown element.
:::

In this case, `:::tabs` will change to `::::tabs` .

Give each tab a title with curly braces like `{title="Your Section Name"}`. This is the name that will show on the tab header.
::::

:::WorkflowBlockItem
Put the content you want in this tab between those lines. See above the allowed blocks to be used inside the tab block. Check [Use Markdown shortcuts](docId:9aaCRqJMq9JnYvzSgNOfs) page to see how to use other blocks using markdown.
:::

:::WorkflowBlockItem
Create as many tabs you want and close your tab block. Don't forget to add columns for each nested level.

Below is an example of a tab block using markdown.
:::
:::::

```markdown
## Tabs

:::::tabs
::::tab{title="Tab 1"}
Some content for Tab 1

:::hint{style="info"}
Pull requests are very welcome! Please see CONTRIBUTING.md for more information.
Tthis is really nice
:::

- [x] This is a checkbox list
- [x] This is a checkbox list
- [ ] This is done
- [ ] This is a checkbox list
::::

:::tab{title="Tab Photos"}
![](https://placehold.co/600x400)

We would love you to contributeaaa
:::
:::::
```

Here is the result:

:::::Tabs
::::Tab{title="Tab 1"}
Some content for Tab 1

:::hint{type="info" attributes="[object Object]"}
Pull requests are very welcome! Please see CONTRIBUTING.md for more information.
This is really nice
:::

- [x] This is a checkbox list
- [x] This is a checkbox list
- [ ] This is done
- [ ] This is a checkbox list
::::

:::Tab{title="Tab Photos"}
::Image[]{src="https://placehold.co/600x400" size="50" isUploading="false" darkWidth="600" darkHeight="400" width="600" height="400" showCaption="false"}

We would love you to contributeaaa
:::
:::::

Alternatively, use this flavour of Markdown to generate a tabs block.

```markdown
{% tabs %}
{% tab title="tab 2" %}some tab fasdfasdfasdfasdfads {% endtab %}
{% tab title="tab 2" %}some tab fasdfasdfasdfasdfads {% endtab %}
{% tab title="tab 2" %}some tab fasdfasdfasdfasdfads {% endtab %}
{% tab title="tab 2" %}some tab fasdfasdfasdfasdfads
{% endtab %}
{% endtabs %}
```

Check the [Use Markdown shortcuts](docId:9aaCRqJMq9JnYvzSgNOfs) page to see more markdown shortcuts for other blocks.

## Examples

See on [vertical split page, example sections.](docId\:VTOI7mkPJHKCQCC4xOAty)&#x20;

***

::::LinkArray{contentSource="CUSTOM"}
:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"}
:FontAwesome[]{icon="fa-solid fa-cubes"} &#x20;**&#x20;Find other blocks**

Discover new ways and blocks to create stunning and functional documentation pages.

[Check out all blocks](docId:6B0VTQTVUnMP93e-SZQ2p)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"}
:FontAwesome[]{icon="fa-solid fa-headset"}**&#x20; Need help?  ⬇️**

Use the **blue** **chat bubble&#x20;**&#x66;rom bottom right corner.

Or try **AI Chat** (from search box) for quick answers.
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"}
:FontAwesome[]{icon="fa-solid fa-hand-holding-heart"}**&#x20;  Your opinion matters**

Use the below feedback form, anonymously.

Or ask a question in **Q\&A section** and our team or AI will give you a solution.
:::
::::


[title] Link Grid
[path] EDITOR/Editor Blocks/

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/7Swb-lpQWhWia7P0JwhzK-20260108-105119.png)

Link Grid is an element that combines the visual appeal of a card with the functionality of a clickable item.&#x20;

It's perfect for **highlighting** important information or **showcasing** related resources.&#x20;

## When to use it

::::LinkArray{contentSource="CUSTOM" itemsPerRow="2"}
:::LinkArrayItem{headerType="NONE"}
:FontAwesome[]{icon="fa-solid fa-star"}&#x20;

**Highlight key information**

Create attention-grabbing cards for important announcements or updates.
:::

:::LinkArrayItem{headerType="NONE"}
:FontAwesome[]{icon="fa-solid fa-file-pen"}&#x20;

**Showcase related content**
Link to additional resources, articles, or products.
:::

:::LinkArrayItem{headerType="NONE"}
:FontAwesome[]{icon="fa-solid fa-folder-tree"}&#x20;

**Create a visually appealing directory**

Organize information into clickable cards for easy navigation.
:::

:::LinkArrayItem{headerType="NONE"}
:FontAwesome[]{icon="fa-solid fa-arrow-pointer"}&#x20;

**Enhance user experience**
Provide a clear and interactive way to guide users through your content.
:::
::::

## How to create a Link Grid&#x20;

::::WorkflowBlock
:::WorkflowBlockItem
Type `/` to open **Archbee Block** menu
:::

:::WorkflowBlockItem
Search for **Link Grid** and click to insert&#x20;

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/gTvRvhMyIEa6ZAEK_XWgP-20260107-112506.png)
:::

:::WorkflowBlockItem
Choose how you want to create it.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/9sjCskLUQLroEBt3GbBs--20260128-131317.png)
:::
::::

## Manual vs. Auto-fill Link Grid

::::::::Tabs
:::::::Tab{title="Manual Link Grid"}
As you continue to write content manually in Link Grid, the next steps are:

::::::WorkflowBlock
:::::WorkflowBlockItem
Choose a header type.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/NzrVaqt42ZCwPD859wbEQ-20260107-112732.png)

You have three options:

- None
- [Color](docId\:Z_VgvWiFBolvUazqD6vWM)
- [Image](docId\:Z_VgvWiFBolvUazqD6vWM)

::::LinkArray{contentSource="CUSTOM" customOrder="foiWGU1sKYkQpO3puSCc-,9bGqAthPinIWIzN1JDG9a,KN_Vi2koMOHat6p3NwJmV"}
:::LinkArrayItem
**None** header&#x20;
:::

:::LinkArrayItem{headerType="COLOR" headerColor="#2166ae"}
**Color** header&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/P2zVL7JMh-OAL-9OuY4WL-wzfTIiPQpIcLwzpDfNvIY-20240805-143427.png"}
**Image** header&#x20;
:::
::::
:::::

:::WorkflowBlockItem
Add your content.&#x20;

You can style the content however you like using the [WYSIWYG Menu](docId\:WBvFMF8cfYoJgkqNrJVIG) or even insert other blocks, like:

- [Headings](docId\:CH1EclxGmlPa-XaZAwY6u)
- [Expandable Headings](docId\:aJpn6HeMcswfb9RR4hDHZ)&#x20;
- [Lists](docId\:D02_VQ5GNbt-SUeqoTQ3g)
- [Callout](docId\:c-sJUb-iR1V0j8c_BKSmC)
- [Horizontal Divider](docId\:YUthnHc9mNprZRTwXPB4L)
- [File](docId\:t1Ky085LzcMKkp3H9EBA_)
- [Image](docId\:MfIBZf9K-Ya8z3ldzQ37V)
- [Video](docId\:B2Ip7DJZj3gHcRxc42rIL)
:::
::::::

### Solid color header

You can use a color as the header to make your card more visible. You can even use code colors to match your features.

::::WorkflowBlock
:::WorkflowBlockItem
Click on the **Header Type&#x20;**:inlineImage[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/WTqh27hSIr_0vOI02cw_h-20260128-125933.png" alt caption width="360" height="200"} dropdown button and select **Color**

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/KGqONH1WBlDKfHrOqsxKx-20260113-122010.png" size="80" width="1806" height="962" position="center" darkWidth="1806" darkHeight="962" showCaption="false"}
:::

:::WorkflowBlockItem
Click on the **Change Color&#x20;**&#x61;nd select your preferred color. Any changes made will be saved automatically.
:::
::::

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/i2rKx8uA91waVM4dtoDrf-20260127-193752.png" size="70" width="1688" height="1324" position="center" darkWidth="1688" darkHeight="1324" showCaption="false"}

### Image header

You can use an image as the header to describe the content inside the card and make it more aesthetically pleasing.

::::WorkflowBlock
:::WorkflowBlockItem
Click on the **Header Type&#x20;**:inlineImage[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/WTqh27hSIr_0vOI02cw_h-20260128-125933.png" alt caption width="360" height="200"} dropdown button and select **Image**
:::

:::WorkflowBlockItem
Click on th&#x65;**&#x20;Add Image&#x20;**&#x62;utton
:::

:::WorkflowBlockItem
Choose your image. Any changes made will be saved automatically.
:::
::::

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/WeWMQu8KeXdNOMW30NHTW_image.png)

### Layout options

**Items per row&#x20;**- control how many items appear on each row:

- 3 items per row
- 2 items per row
- 1 item per row

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/h2vHtudI1J8TKmopWwD2D-20260128-174719.png" size="80" width="1920" height="1160" position="center" darkWidth="1920" darkHeight="1160" showCaption="false"}
:::::::

:::::Tab{title="Auto-fill Link Grid"}
Save time and keep your documentation structure in sync by automatically populating a **Link Grid&#x20;**&#x77;ith child documents based on a selected parent. Each item is rendered as a clickable link or card that navigates to the corresponding document.

### Choose a source

Choosing a source is the first step and determines which documents will appear in the Link Grid. Select where the Link Grid should pull documents from:

- **Any parent document in space** – Choose a specific document or category as the source.
- **Current parent document** – Use the parent of the page you are editing.

The Link Grid will include all documents directly under the selected parent. Drafts, hidden docs, permission-restricted documents, and deeper nested levels will not be included.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/AkJ4oac_KRwvCY69ODKDb-20260128-142724.png)

### Example

Below is an example from our documentation showing Link Grid Auto-fill used in [Embed Examples](docId\:ejEgS_viSAOk25-lby1x0).

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/DDWZix1eIFtrffmTaLXFE-20260128-173556.png)

### Layout options

These options let you control the structure, order, and visual appearance of your Link Grid. After selecting a source, customize how the Link Grid is displayed.

**Items per row&#x20;**- control how many items appear on each row:

- 3 items per row
- 2 items per row
- 1 item per row

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/h2vHtudI1J8TKmopWwD2D-20260128-174719.png" size="80" width="1920" height="1160" position="center" darkWidth="1920" darkHeight="1160" showCaption="false"}

**Sort options** - choose how items are ordered:

- **Default** – Matches the order in the portal tree.
- **Manual** – Drag and drop items to define a custom order.
- **Alphabetical** – Sort A–Z or Z–A.
- **Date created** – Newest first or oldest first.

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/Uxi0o0I8YiE8zcZBIfLHG-20260128-174445.png" size="80" width="1920" height="1160" position="center" darkWidth="1920" darkHeight="1160" showCaption="false"}

**Display style** - choose how items appear in your documentation:

- **Link** – A compact list, ideal for large numbers of documents.
- **Card** – A visual layout with image, title, and description.

::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
![Link view of Link Grid items](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/S2ki6R4zi0cuGW5CimEHP-20260128-175053.png "Link view of Link Grid items")
:::

:::VerticalSplitItem
![Card view of Link Grid items](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/DretKScZcyN1zDyMBsTrm-20260128-175110.png "Card view of Link Grid items")
:::
::::

:::hint{type="info"}
### Card details

For **Card** display, the image, title, and description are automatically pulled from the document’s [SEO Meta Controls](docId\:E-aARn44KIsrXycjGAMZg) .

You can edit these values directly in each document’s settings under **SEO Meta Controls**. See the SEO Meta Controls documentation to learn how to update images, titles, and descriptions.
:::
:::::
::::::::

***

## Image Guide

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/fFVWmk1gxX-tjDfg6Z-kr_image-guide.png "Image Guide for Link Grid")

To ensure that your content is displayed properly, we recommend to create an image with a **height of 480px** and a **width of 1324px**. By following the [visible area guide](docId\:Z_VgvWiFBolvUazqD6vWM) below, you can ensure that your content is not cut off.

### Visible Area Guide

The main image has dimensions of 480px in height and 1324px in width.

::::Tabs
:::Tab{title="3 items / row"}
In the case of having **3 Link Grids** per row, the visible area will be **480px** in **height** and **860px in width**. This visible area will be centered within the main dimensions.

Please refer to the image below for a visual representation:

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/ypYZ53zBi5kh4s42ErngN_3perrow.png "Visible Area 3 Link Grids per row")
:::

:::Tab{title="2 items / row"}
When there are **2 Link Grids** per row, the visible area will be determined by the main dimensions.&#x20;

To provide a better understanding, please refer to the image below:

![2 Link Grids per row](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/WzWRX9svOFc3oazdOcUGN_2perrow.png "Visible Area 2 Link Grids per row")
:::

:::Tab{title="1 item / row"}
When there is only **1 Link Grid** per row, the visible area will be centered within the main dimensions. Specifically, it will have a width of 1324px and a height of 234px.&#x20;

To get a better understanding, please refer to the image below:

![Link Grid per row](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/PDlPPdo9SGDIM1fuPndHH_1perrow.png "Visible Area 1 Link Grid per row")
:::
::::

:::hint{type="info"}
To clarify, the primary content or logo should be positioned in this designated area.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/liJYjYkvJUMwyTyv5TpiX_arealogo.png "content positioning")
:::

Please find below a live demo how look the cover image and its behavior.

::::LinkArray{contentSource="CUSTOM"}
:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/rAFUifPkjwjyC0lbqKM4c_image-guide.png"}

:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/pK4P-nlFBux86p-jBYQTu_image-guide.png"}

:::
::::

## Markdown

Here's how to create a tab in your document using markdown code:

:::::WorkflowBlock
:::WorkflowBlockItem
**Create the Link Grid**
Start with the `::::link-array` line.
:::

:::WorkflowBlockItem
**Add a link card**
Each Link Grid content goes between `:::link-array-item` and `:::` markers.
:::

:::WorkflowBlockItem
**Choose the&#x20;**`headerType`****
You have two options for your header:

- `IMAGE`**:** This displays an image as your header background.
- `COLOR`**:** This allows you to use a solid color for your header.
:::

:::WorkflowBlockItem
**Add the appropriate attribute**

For `IMAGE` headers:

- Add the image URL as the value for the `headerImage` attribute.
- Example: `headerImage="https://placehold.co/600x400")`

For `COLOR` headers:

- Define the desired color using a hex code for the `headerColor` attribute.
- Example: `headerColor="#ff00FF"`
:::

::::WorkflowBlockItem
Add content inside of your link card.

:::hint{type="warning"}
**🚨   Attention!**

When using the triple colon (`:::`) syntax to create a nested markdown element, ensure that each parent element above it also has an extra colon (`:`) before its opening triple colon.
:::
::::
:::::

```markdown
## Link Array - Example

::::link-array
:::link-array-item{headerType="IMAGE" headerImage="https://placehold.co/600x400"}

- list item 1
- list item 2
:::
:::link-array-item{headerType="COLOR" headerColor="#ff00FF"}

- [ ] unchecked list box
- [x] checked list box
:::
::::
```

Here is the result:

::::LinkArray{attributes="[object Object]" contentSource="CUSTOM"}
:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/2YO-Z1cATRi0OGk8yZ99Y-20260127-192519.png"}
- list item 1
- list item 2
:::

:::LinkArrayItem{attributes="[object Object]" headerType="COLOR" headerColor="#ff00FF"}
- [ ] unchecked list box
- [x] checked list box
:::
::::

Check the [Use Markdown shortcuts](docId:9aaCRqJMq9JnYvzSgNOfs) page to see more markdown shortcuts for other blocks.

## Examples

Examples? For a Link Grid? It's like finding water in the ocean. You can't avoid it. Our docs are swimming with 'em! On this page there are 8 of them, plus images.

## Custom CSS

Throughout our extensive experience, we have been dedicated to helping customers personalize their documentation according to their unique preferences. Additionally, we have offered valuable assistance that we believe will also be of great benefit to you in crafting exceptional documentation for your product.

[See how Custom CSS works](docId\:d4gup0qqxInIgDThftqCn)

### Set link to be sticky at bottom

Set your links inside of the Link Grid to be sticky at the bottom of the card.

```css
<style>
    .ab-link-block-content-wrap .ab-link {
    position: absolute;
    bottom: 0;
    }
</style>
```

***

::::LinkArray{contentSource="CUSTOM"}
:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"}
:FontAwesome[]{icon="fa-solid fa-cubes"} &#x20;**&#x20;Find other blocks**

Discover new ways and blocks to create stunning and functional documentation pages.

[Check out all blocks](docId:6B0VTQTVUnMP93e-SZQ2p)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"}
:FontAwesome[]{icon="fa-solid fa-headset"}**&#x20; Need help?  ⬇️**

Use the **blue** **chat bubble&#x20;**&#x66;rom bottom right corner.

Or try **AI Chat** (from search box) for quick answers.
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"}
:FontAwesome[]{icon="fa-solid fa-hand-holding-heart"}**&#x20;  Your opinion matters**

Use the below feedback form, anonymously.

Or ask a question in **Q\&A section** and our team or AI will give you a solution.
:::
::::


[title] Headings
[path] EDITOR/Untitled/

[Headings](docId\:CH1EclxGmlPa-XaZAwY6u) organize your content into sections and establish a clear hierarchy throughout a document. They help readers quickly understand the structure of a page and navigate long-form content.

## Syntax

Headings use standard Markdown syntax.

```markdown
# Heading 1

## Heading 2

### Heading 3
```

Three heading levels are supported:

- `#` creates a first-level heading.
- `##` creates a second-level heading.
- `###` creates a third-level heading.

Use heading levels sequentially to maintain a logical document structure.

## Example

The following example creates a simple document outline using all supported heading levels.

```markdown
# Getting Started

Introduction and overview.

## Installation

Steps for installing the application.

### Requirements

Prerequisites and dependencies.
```


[title] File
[path] EDITOR/Editor Blocks/

File block allows you to embed files directly into your page. This is particularly useful for sharing any type of documents without requiring users to leave your content

## Why use it?

- **Enhanced collaboration**
  Share files with your team or clients directly within your document.
- **Improved user experience**
  Provide a seamless way for readers to view and download files.
- **Attach supporting documents**
  Add PDFs, spreadsheets, or presentations to provide additional context or evidence.

## How to use file block?

::::WorkflowBlock
:::WorkflowBlockItem
Type `/` to open Archbee block menu
:::

:::WorkflowBlockItem
Search for **File** block and click to insert insert

![](https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-CFFBbi1M807AdOTwicP7j-20240902-131041.png)
:::

:::WorkflowBlockItem
Choose a file from [File Manager](docId\:xgoBbCfl4DcvFc1HFK619) or paste your file link.
:::
::::

:::hint{type="warning"}
<font color="#fcb900">⚠️</font>  **Allowed files**

Images (.png, .jpg, .jpeg, .gif, etc.) are not allowed to be user in file block.
:::

## Examples

::File{src="https://archbee-doc-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-UgK-DHNrp5MhfYQuDLRyB-20240902-130737.pdf" label="Welcome to Archbee 🤓 - Archbee Documentation and Help Center.pdf"}

***

::::LinkArray{contentSource="CUSTOM"}
:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"}
:FontAwesome[]{icon="fa-solid fa-cubes"} &#x20;**&#x20;Find other blocks**

Discover new ways and blocks to create stunning and functional documentation pages.

[Check out all blocks](docId:6B0VTQTVUnMP93e-SZQ2p)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"}
:FontAwesome[]{icon="fa-solid fa-headset"}**&#x20; Need help?  ⬇️**

Use the **blue** **chat bubble&#x20;**&#x66;rom bottom right corner.

Or try **AI Chat** (from search box) for quick answers.
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"}
:FontAwesome[]{icon="fa-solid fa-hand-holding-heart"}**&#x20;  Your opinion matters**

Use the below feedback form, anonymously.

Or ask a question in **Q\&A section** and our team or AI will give you a solution.
:::
::::


[title] OpenAPI/Swagger
[path] EDITOR/Editor Blocks/API docs blocks/

We also support OpenAPI/Swagger specifications out of the box.



:::Swagger
```json
{
  "headers": [],
  "jsonFileLocation": "https://petstore.swagger.io/v2/swagger.json"
}
```
:::

***

::::LinkArray{contentSource="CUSTOM"}
:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"}
:FontAwesome[]{icon="fa-solid fa-cubes"} &#x20;**&#x20;Find other blocks**

Discover new ways and blocks to create stunning and functional documentation pages.

[Check out all blocks](docId:6B0VTQTVUnMP93e-SZQ2p)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"}
:FontAwesome[]{icon="fa-solid fa-headset"}**&#x20; Need help?  ⬇️**

Use the **blue** **chat bubble&#x20;**&#x66;rom bottom right corner.

Or try **AI Chat** (from search box) for quick answers.
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"}
:FontAwesome[]{icon="fa-solid fa-hand-holding-heart"}**&#x20;  Your opinion matters**

Use the below feedback form, anonymously.

Or ask a question in **Q\&A section** and our team or AI will give you a solution.
:::
::::


[title] Expandable headings
[path] EDITOR/Untitled/

[Expandable heading](docId\:aJpn6HeMcswfb9RR4hDHZ) blocks let users collapse and expand sections of content. They are useful for FAQs, optional details, and long reference pages where readers may not need to see all information at once.

## Syntax

You can add this component using either Markdown or MDX.

::::Tabs
:::Tab{title="Markdown"}
```markdown
:::::ExpandableHeading
# Expandable Heading 1
This is the largest expandable heading. Click to collapse or expand.
:::::

:::::ExpandableHeading
## Expandable Heading 2
A medium expandable heading. Use it for subsections that users can toggle.
:::::

:::::ExpandableHeading
### Expandable Heading 3
The smallest expandable heading. Good for optional details or FAQ items.
:::::
```
:::

:::Tab{title="MDX"}
```javascript
<ExpandableHeading>
# Expandable Heading 1
This is the largest expandable heading. Click to collapse or expand.
</ExpandableHeading>

<ExpandableHeading>
## Expandable Heading 2
A medium expandable heading. Use it for subsections that users can toggle.
</ExpandableHeading>

<ExpandableHeading>
### Expandable Heading 3
The smallest expandable heading. Good for optional details or FAQ items.
</ExpandableHeading>
```
:::
::::

Expandable Heading blocks support three heading levels:

- `#`&#x20;
- `##`&#x20;
- `###`&#x20;

The heading itself becomes the clickable element, while all content beneath it remains collapsible until the next heading or the end of the block.


[title] Notify on document changes
[path] DOCUMENTS/

To keep up with constant changes to a document, you can choose to receive notifications whenever there's an edit to your document.

Open your desired document, click the three-dot menu in the editor and, from the **Document options**, click on **Subscribe to changes**.

:::hint{type="info"}
🔔

You have to do this for each and every document you want to receive notifications for.
:::

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/dc-nzVh0mzYvOePL5ts_0_subscribe-light.png "Subscribe to changes")

Now, whenever somebody in your organization makes an edit to that document, you will receive an in-app notification under the 🔔 icon in the top left corner.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/8iIVp6nOUJltTpqsBczP5_notificaiton-light.png "Notifications")


[title] Image
[path] EDITOR/Editor Blocks/

Spice up your documentation with eye-catching images. The Image block lets you add visuals that complement your text and make your content more engaging.

## Why to use it?

- **Break up the text**
  Images can make your documents more visually appealing and easier to read.
- **Tell a story**
  Images can convey emotions, ideas, and concepts more effectively than words alone.
- **Add context**
  Images can provide additional information or context to your content.
- **Improve engagement**
  Visuals can make your documents more engaging and interesting.

## How to use image block?

::::WorkflowBlock
:::WorkflowBlockItem
Type `/` to open Archbee block menu
:::

:::WorkflowBlockItem
Search for **Image** block and click to insert insert

![](https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-ALxCSQqDnYWb33bCRh8u_-20240902-145716.png)
:::

:::WorkflowBlockItem
Choose a image from [File Manager](docId\:xgoBbCfl4DcvFc1HFK619) or paste your image link. By default, you will upload an image for light theme.
:::

:::WorkflowBlockItem
Adjust your image. You can scale the image **from 10% to 100%** width size of the content widht.

You can alight the image to **left**, **right** or **center&#x20;**&#x6F;f the content container.
:::

:::WorkflowBlockItem
**Opltionally** — we recomment you to add:

- **Image Caption**
  To create context, improve SEO, and enhance accessibility
- **Alt Text**
  Provide a textual description for visually impaired users and SEO
- **Dark Mode Image**
  Reduce eye strain & improve accessibility on dark mode theme, and create a modern look.
:::
::::

![](https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-4rV4ADyqvME1qRWck-Gtz-20240902-145041.png)

## Examples of Using Image Blocks

- **Product showcases**
  Use high-quality images to highlight your products or services.
- **Tutorials**
  Include step-by-step visual guides to make instructions easier to follow.
- **Blog posts**
  Add relevant images to break up the text and enhance the overall reading experience.
- **Infographics**
  Create visually appealing infographics to present data or complex information.
- **Mood boards**
  Use images to create mood boards or inspiration boards for design projects.

***

::::LinkArray{contentSource="CUSTOM"}
:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"}
:FontAwesome[]{icon="fa-solid fa-cubes"} &#x20;**&#x20;Find other blocks**

Discover new ways and blocks to create stunning and functional documentation pages.

[Check out all blocks](docId:6B0VTQTVUnMP93e-SZQ2p)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"}
:FontAwesome[]{icon="fa-solid fa-headset"}**&#x20; Need help?  ⬇️**

Use the **blue** **chat bubble&#x20;**&#x66;rom bottom right corner.

Or try **AI Chat** (from search box) for quick answers.
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"}
:FontAwesome[]{icon="fa-solid fa-hand-holding-heart"}**&#x20;  Your opinion matters**

Use the below feedback form, anonymously.

Or ask a question in **Q\&A section** and our team or AI will give you a solution.
:::
::::


[title] WYSIWYG Menu
[path] EDITOR/

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/HJ_1wpr13cbzemIH7A8Rl-20250919-155758.gif)

The **WYSIWYG** (What You See Is What You Get) menu is your go-to toolbar for formatting and editing your content in Archbee. It's packed with tools that allow you to customize the appearance of your text.

## Why to use it?

- **Quick and easy formatting**
  Apply bold, italic, underline, and other text styles with a simple click.
- **Consistent styling**
  Maintain a uniform look throughout your document by using the menu's formatting options.
- **Visual editing**
  See the changes you make in real-time, ensuring your content looks exactly as you intended.
- **Accessibility**
  Use the menu to add headings, subheadings, and lists to improve readability and accessibility.

## How to use the WYSIWYG menu?

:::::WorkflowBlock
:::WorkflowBlockItem
**Highlight any text**

You have 3 option to do this:

- Drag & select any text with your cursor to highlight it
- Double-click to highlight a word
- Triple-click to to highlight an entire paragraph/row
:::

::::WorkflowBlockItem
The WYSIWYG menul will appear above the highlighted text. From here you have the option to change the text into:

- Heading 1
- Heading 2
- Heading 3
- **Bold&#x20;**
- *Italic*
- *Underline*
- ~~Strike~~

:::BlockQuote
&#x20;\- Code Paragraph
:::

- `Text Code`
- <font color="#2166ae">Text Color</font>
- [Links](https://www.archbee.com)
- Bullet list

1. Number list

- [ ] Check list



Check [here more about lists.](docId\:D02_VQ5GNbt-SUeqoTQ3g) &#x20;

You can also [add inline comments](docId\:HcZnXsyrbk0GWr8B1kL7r) on the highlighted text. Check [here](docId\:HcZnXsyrbk0GWr8B1kL7r) for more details.
::::
:::::

:::hint{type="info"}
ℹ️ &#x20;**&#x20;Note**

You can choose to have links open in the same tab or a new tab, based on your preference.
:::


[title] Vertical split
[path] EDITOR/Untitled/

[Vertical Split](docId\:VTOI7mkPJHKCQCC4xOAty) blocks arrange content into two side-by-side columns. They are useful for comparisons, layouts with supporting information, or presenting code alongside explanations.

## Syntax

You can add this component using either Markdown or MDX.

::::Tabs
:::Tab{title="Markdown"}
```markdown
:::::VerticalSplit{layout="middle"}
::::VerticalSplitItem
Left content.
::::
::::VerticalSplitItem
Right content.
::::
:::::
```
:::

:::Tab{title="MDX"}
```javascript
<VerticalSplit layout="middle">
  <VerticalSplitItem>
    Left content.
  </VerticalSplitItem>
  <VerticalSplitItem>
    Right content.
  </VerticalSplitItem>
</VerticalSplit>
```
:::
::::

Vertical Split blocks support three layout options:

- `left`, creates a wider left column.
- `middle`, creates two equally sized columns.
- `right`, creates a wider right column.

Each layout requires exactly two `VerticalSplitItem` blocks.

## MDX Example

The following examples demonstrate the three available layout options.

### Equal Columns (`middle`)

```javascript
<VerticalSplit layout="middle">
  <VerticalSplitItem>

  ### Left Column

  This column takes up equal space with the right column.

  </VerticalSplitItem>
  <VerticalSplitItem>

  ### Right Column

  Perfect for comparing features, showing before/after, or code + explanation.

  </VerticalSplitItem>
</VerticalSplit>
```

### Left-heavy Layout (`left`)

```javascript
<VerticalSplit layout="left">
  <VerticalSplitItem>

  ### Main Content

  The left column is wider — use this when the left side has the primary content and the right side has supplementary info.

  </VerticalSplitItem>
  <VerticalSplitItem>

  <hint type="info">
  This sidebar provides extra context.
  </hint>

  </VerticalSplitItem>
</VerticalSplit>
```

### Right-heavy Layout (`right`)

```javascript
<VerticalSplit layout="right">
  <VerticalSplitItem>

  **Quick links:**
  - [Tabs](/tabs)
  - [Tables](/tables)

  </VerticalSplitItem>
  <VerticalSplitItem>

  ### Detailed Explanation

  The right column is wider — use this when the right side has the primary content.

  </VerticalSplitItem>
</VerticalSplit>
```


[title] Branches & Reviews
[path] DOCUMENTS/

:::hint{type="warning"}
🚧&#x20;**&#x20;Work in progress...**
:::

We’re excited to roll out the **Branching System (Beta)** and open it up for users to try. This release marks a major milestone, bringing Git-style workflows directly into Archbee.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/DcbohinmgMiE7hdTbu2_m-20260203-001519.jpg)

You can now create branches for your documentation, work on changes in isolation, and merge updates when they’re ready. This gives teams a much stronger foundation for organizing drafts, planning documentation releases, and managing parallel work streams, all without relying on external Git repositories.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/WWXm5ebYE2A84ZpbhjIZ_-20260202-224102.jpg)

The branching system works with both **Archbee native projects** and **GitHub-connected repositories**, and it includes built-in conflict resolution so teams can collaborate confidently without dealing with traditional Git complexity.

:::hint{type="info"}
**ℹ️ Beta notes:**

- Enable it when creating a space by selectin&#x67;**&#x20;Branches and Reviews System**
- Available only for **newly created spaces**
- You cannot switch existing spaces to branching during the Beta
:::


[title] Create a document
[path] DOCUMENTS/

To add a new document inside a Space, click the `➕` plus icon in the left navigation panel or use the `CMD/CTRL + M` shortcut.a

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/aF8QGADAMfmnJpO1bercz_create-doc-light.png "Add a new doc")

Add a title to your document and continue writing your content. Alternatively, import a file.

Bear in mind that new document is automatically created when you import a file.

:::hint{type="warning"}
📝

If you [import multiple files](docId\:fK50ZyIJGXY-U9Ql7PZ9b), that will generate a new document for each imported file.
:::

## Move document

You've created your document but now you realize that it needs to be moved to a different space. After all, docs are a living, breathing organism, right? 😃

Drag-and-drop your document to the desired spot or space.

Alternatively, from the **three-dot menu** next to each document, click **Move to another space** and then select where you want to move that document.

## Delete/archive document

:::hint{type="warning"}
When you want to delete/archive a document, make sure that you don't forget to hit **Publish space**, otherwise the document will still be present on public docs.
:::


[title] AI external sources
[path] SPACES/

The **AI External Sources** feature helps you provide context to AI from outside resources.

Let's say you have already created your first Archbee docs and activated the AI add-on.

:::hint{type="info"}
If you don't have the add-on, you need to purchase it. Navigate to your **Organization settings&#x20;**> **Subscription&#x20;**& **Billing&#x20;**&#x61;nd look for the **AI add-on** and continue with your purchase.
:::

You might also have other product-related articles/resources that can help polish the LLM response, e.g., a blog where you share best practices and information about your product.

To set it up, navigate to **Space settings** -> **AI features**. Check the *External sources* section.&#x20;

Here, you can add links or resources from other documentation providers you want to feed into AI so we can start crunching the data. This can take a few minutes, depending on the volume of data passed.

For more info, click the *See how it works* tooltip on the left side of the AI features window.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/xJLofA9oUhxTIuZozj4c4_aiext-website-light.png "Add link to external sources")

### Refresh external sources

The system updates external sources periodically but if you want to propagate a faster change from your resources, click the **Refresh external sources** button, and the system will start updating it immediately.

:::hint{type="warning"}
*Ensure that everything is correct first*, and then click the **Refresh external sources** button. Note that you can refresh the content once every 6 hours.
:::


[title] GETTING STARTED
[path] /


[title] Mermaid diagrams
[path] EDITOR/Editor Blocks/

Another option to create diagrams is to use our [Mermaid](http://mermaid.js.org/) integration. Mermaid is a markdown-like syntax for building diagrams, ERD, UML, class, sequences and more.

Simply start writing the `(mermaid)` shortcut or just add it from the `/` menu.

See it in action in our example diagram below 😄

```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
```

***

::::LinkArray
:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"}
:FontAwesome[]{icon="fa-solid fa-cubes"} &#x20;**&#x20;Find other blocks**

Discover new ways and blocks to create stunning and functional documentation pages.

[Check out all blocks](docId:6B0VTQTVUnMP93e-SZQ2p)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"}
:FontAwesome[]{icon="fa-solid fa-headset"}**&#x20; Need help?  ⬇️**

Use the **blue** **chat bubble&#x20;**&#x66;rom bottom right corner.

Or try **AI Chat** (from search box) for quick answers.
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"}
:FontAwesome[]{icon="fa-solid fa-hand-holding-heart"}**&#x20;  Your opinion matters**

Use the below feedback form, anonymously.

Or ask a question in **Q\&A section** and our team or AI will give you a solution.
:::
::::


[title] Lists
[path] EDITOR/Untitled/

[Lists](docId\:D02_VQ5GNbt-SUeqoTQ3g) organize related items into a clear, easy-to-read structure. Archbee supports unordered lists, ordered lists, nested lists, and task lists using standard Markdown syntax.

## Syntax

Lists use standard Markdown syntax.

```markdown
- Unordered item
  - Nested item

1. Ordered item
2. Second item

- [ ] Unchecked task
- [x] Completed task
```

Use hyphens (`-`) for unordered lists, numbers (`1.`) for ordered lists, and square brackets (`[ ]` or `[x]`) for task lists.

Nested items are created by indenting child elements.

## Examples

The following examples demonstrate the different list types supported in Archbee.

### Unordered list

```markdown
- First item
- Second item
  - Nested item
  - Another nested item
- Third item
```

### Ordered list

```markdown
1. Install the CLI
2. Create a new project
3. Write your docs
4. Preview locally
5. Publish
```

### Checklist

```markdown
- [ ] Set up `archbee.json` configuration
- [ ] Add documentation pages
- [ ] Configure navigation tree
- [ ] Customize branding and colors
- [ ] Publish to production
```


[title] Workflow
[path] EDITOR/Editor Blocks/

We designed the **Workflow** block to help you create and organize step-by-step processes in your documentation.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/rxY4Ub_WsSPxd6PXjUUm0_workflow-light01.png "Workflow block")

This powerful block supports seamless integration of other blocks within each item of the workflow, allowing you to further create detailed and visually appealing process documentation.

## Why to use it?

- **Enhanced Clarity**
  By breaking down processes into manageable steps, you improve readability and comprehension for your audience.
- **Improved Organization**
  The Workflow block provides a structured framework for your content, making it easier to navigate and understand.
- **Visual Appeal**
  The block's visually appealing design enhances the overall presentation of your documentation.
- **Flexibility**
  The Workflow block supports nested blocks, allowing you to add additional details and context within each step.

## How to use the workflow block?

::::::WorkflowBlock
:::WorkflowBlockItem
### Insert a Workflow block

- Press `/` on an empty paragraph to open Archbee blocks menu, type `workflow` and press enter. You can also scroll to find the block.
- You can type directly `(workflow)` in an empty paragraph to change it to workflow block.
- Click within the step and start typing to create your first step. You can style the content however you like using the [WYSIWYG Menu](docId\:WBvFMF8cfYoJgkqNrJVIG).

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/Gw-umM09gX7BEDKcPuv4K_workflow-light03.png "Select Workflow")
:::

:::WorkflowBlockItem
### Add steps

- Use the **+ Add workflow item** button to create additional steps.
- To edit a step, simply click on it and make your changes.
:::

::::WorkflowBlockItem
### Reorder steps

Click on move arrows ( **↕** ) and drag & drop steps to rearrange their order within the workflow.

:::hint{type="info"}
The steps in your Workflow block will **automatically renumber** as you reorder them.
:::
::::

::::WorkflowBlockItem
### Delete steps

1. Click on a step you want to delete.
2. Remove all the content inside of this step.
3. Press **Backspace** delete the step.

:::hint{type="info"}
The steps in your Workflow block will **automatically renumber** as you reorder them.
:::
::::

:::::WorkflowBlockItem
### Add nested blocks

Within a step you can add nested content blocks (e.g., images, code, etc.).

Press `/` on an empty paragraph, inside of a step, to open Archbee blocks menu. Here, you can add:

::::LinkArray{contentSource="CUSTOM"}
:::LinkArrayItem
Basic Blocks

- [Headings](docId\:CH1EclxGmlPa-XaZAwY6u)&#x20;
- [Expandable Headings](docId\:aJpn6HeMcswfb9RR4hDHZ)&#x20;
- [Lists](docId\:D02_VQ5GNbt-SUeqoTQ3g)&#x20;
- [Table](docId\:XISmEqbPiMGonZxHooHwZ)&#x20;
- [Button](docId\:JDAXu7IBxBA1jW3KHOrOp)&#x20;
- [Callout](docId\:c-sJUb-iR1V0j8c_BKSmC)&#x20;
- [Horizontal Divider](docId\:YUthnHc9mNprZRTwXPB4L)&#x20;
- [Vertical Split](docId\:VTOI7mkPJHKCQCC4xOAty)&#x20;
- [Link Grid](docId\:Z_VgvWiFBolvUazqD6vWM)&#x20;
- [Tabs](docId\:nIaGbRRi7rJFXXCkkHd1c)&#x20;
:::

:::LinkArrayItem
Media Blocks

- [File](docId\:t1Ky085LzcMKkp3H9EBA_)&#x20;
- [Image](docId\:MfIBZf9K-Ya8z3ldzQ37V)&#x20;
- [Video](docId\:B2Ip7DJZj3gHcRxc42rIL)&#x20;
- [Map](docId:_6bL0kZA7bB9RgcNylSWS)&#x20;
:::

:::LinkArrayItem
Developer Blocks

- [Code editor: multi-language](docId:_DmwEwV5w9YcnVMlcUI53)&#x20;
- [Mermaid diagrams](docId\:fRhB6aopNdkyYjeQDeJLG)&#x20;
- [TeX Equation](docId\:W4KY8zdZZGYouNMTXuLiT)&#x20;
- [API endpoints](docId\:JwrgiyTgiu8c_7ml3Hna8)&#x20;
- [Changelog](docId\:s9KuKIUE8z2e4Y1X4V1gB)&#x20;
:::
::::

Also, most of our integrations work inside workflow block. You can add embeds from other tools like Loom, Figma, Miro, Lucidcharts, and more.

Check the [Embeded Blocks](docId\:ejEgS_viSAOk25-lby1x0) page for more info.


:::::
::::::

## Examples

We know you've seen plenty of workflow blocks in our documentation, but this one's a cut above the rest.

:::::WorkflowBlock
:::WorkflowBlockItem
***Choose Your Cut***

- **Quality&#x20;**— Opt for a prime cut like ribeye, sirloin, or porterhouse.
- **Thickness&#x20;**— Aim for a steak that's at least 2.5 cm (1 inch) thick for optimal tenderness and juiciness.
:::

:::WorkflowBlockItem
***Preparation***

- **Pat Dry&#x20;**— Remove excess moisture with paper towels.
- **Season&#x20;**— Generously sprinkle with salt and freshly ground black pepper.
- **Let It Rest&#x20;**— Allow the steak to sit at room temperature for about 30 minutes.
:::

:::WorkflowBlockItem
***Cooking***

- **Heat&#x20;**— Preheat your grill or skillet to a high temperature (around 450°C/840°F).
- **Sear&#x20;**— Cook for 3-4 minutes per side for medium-rare, or adjust according to your preference.
- **Rest&#x20;**— Let the steak rest for 5-10 minutes before serving.
:::

::::WorkflowBlockItem
***Enjoy!***

- **Slice&#x20;**— Cut the steak against the grain for tender slices.
- **Serve&#x20;**— Pair with your favorite sides like roasted potatoes, grilled asparagus, or a side salad.

:::hint{type="success"}
👨‍🍳  Enjoy the juicy, flavorful steak 🥩 you've expertly prepared.
:::
::::
:::::

***

::::LinkArray{contentSource="CUSTOM"}
:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"}
:FontAwesome[]{icon="fa-solid fa-cubes"} &#x20;**&#x20;Find other blocks**

Discover new ways and blocks to create stunning and functional documentation pages.

[Check out all blocks](docId:6B0VTQTVUnMP93e-SZQ2p)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"}
:FontAwesome[]{icon="fa-solid fa-headset"}**&#x20; Need help?  ⬇️**

Use the **blue** **chat bubble&#x20;**&#x66;rom bottom right corner.

Or try **AI Chat** (from search box) for quick answers.
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"}
:FontAwesome[]{icon="fa-solid fa-hand-holding-heart"}**&#x20;  Your opinion matters**

Use the below feedback form, anonymously.

Or ask a question in **Q\&A section** and our team or AI will give you a solution.
:::
::::


[title] Fold or expand categories/folders
[path] DOCUMENTS/

When you add folders/categories to your documentation site, you may want to keep them folded or expanded, depending on your preferences or style guide you're following.

## How does this work?

By default, a folder/category is **expanded** when you preview the live page after publishing.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/IEEzURPhJ6dENhRzsyrBl_editor-view-light.png "Fold on public")

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/XGon5GgeNRYJXrff9IhI2_docs-view-light.png "Docs site view")

**If you want to fold the folder/category, follow these steps:**

::::WorkflowBlock
:::WorkflowBlockItem
Click on the **three-dot menu&#x20;**&#x6E;ext to the folder/category name
:::

:::WorkflowBlockItem
Click **Make folded by default on public**
:::

:::WorkflowBlockItem
Publish your changes to preview the results
:::
::::

If you wish to go back to expanded view, click **Make expanded by default on public**.


[title] Notification Center
[path] EDITOR/

The Notification Center allows users to view all their notifications in one centralized place conveniently.&#x20;

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/qzXCEhikF69b9_FW4hkMx_image.png" size="50" width="368" height="164" position="center" showCaption="false"}

### Accessing Notifications

- Acess the **bell icon** located at the **top-left corner** of the page :FontAwesome[]{icon="fa-solid fa-bell"}&#x20;
- Clicking the **bell icon** will open a dropdown list displaying all notifications received, organized by the time they were triggered
- Notifications include:
  - Ping team members
  - Mentions in comments or documents
  - Questions received on documents
  - Review requests
  - Updates and changes on documents

Users can click on specific notifications to navigate to the related document.

### Managing Notification Preferences via e-mail

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/jspmhJAHxHBpxsz75TMUV_image.png" size="50" width="1688" height="1214" position="center" showCaption="false"}

Users have full control over their notifications through **Notification Center**:

1. Navigate to **User Preferences > Notifications**.
2. From this section, users can enable or disable notifications for various categories. Disabling this setting, the e-mail will not longer be generated but the notification still received.
   - **Editor mentions**&#x20;
   - **Pings from team members**
   - **Review Requests**
   - **Questions & Answers**
   - **Verify Documents**

Each notification type has an option to receive updates via **email.&#x20;**&#x53;imply check or uncheck the box to manage preferences.

[title] Glossary
[path] EDITOR/Reusables/

![](https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-jgoX0bjbxla1YOkjvq6Us-20250304-124208.jpg)

The  helps to improve both **the reader's experience** and **the accuracy of your content**. By allowing you to define and manage **keywords**, **terms**, or **expressions**, the Glossary ensures that complex terms are clearly explained throughout your documents.

## Managing the Glossary terms

::::WorkflowBlock
:::WorkflowBlockItem
### Navigate to the Glossary Tab

- Navigate to the Dynamic Components tab from the bottom left menu
- Select the **Glossary** tab.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/xF4pbeeNJju_lilZBIaoQ_image.png)

Here, you will be able to create, manage, and view all your defined glossary terms.
:::

:::WorkflowBlockItem
### Creating a Glossary Term

- To create a new term, enter the desired word in the "`Term`" field and its definition in the "`Definition`" field.
- Click on "`+ Create`" button
- Your Term will be added in a `Glossary table`

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/V4U4GCfpfRtpIPv6l6k9d_image.png)
:::

:::WorkflowBlockItem
### Using Glossary Terms in the Editor

- In the Editor, simply type `{{`. This will trigger a dropdown menu showing all the available glossary terms that you’ve defined.
- From the list, select the term you want to insert. This will automatically add the term into your content.
- Once a glossary term is inserted in the content, the term will appear as a clickable word.
- When readers hover over the term, a tooltip will appear with its definition, providing a helpful explanation.

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/zHGEmpkdNEjC1gP_XxoeJ_image.png" size="50" width="824" height="786" position="center" showCaption="false"}
:::

:::WorkflowBlockItem
**Glossary Management**

- To edit an existing term, click on the :FontAwesome[]{icon="fa-solid fa-pencil"}**&#x20; Edit** icon next to the term in the Glossary table (you can update both the "Term" and "Definition" as needed).
- If you no longer need a glossary term, you can remove it by clicking the :FontAwesome[]{icon="fa-solid fa-trash-can"}**&#x20;Delete** icon next to the term, in Glossary table.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/c6t9V61DZXSfUCKwKXc0w_image.png)
:::
::::

## Benefits of Using the Glossary Feature

- **Improved User Experience**
  Readers can easily understand specialized terms without leaving the page.
- **Increased Accuracy**
  Define precise terms that will be consistently used across your documents.
- **Efficiency**
  Once a term is defined in the Glossary, it can be reused without the need to repeatedly explain it.


[title] Reusables
[path] EDITOR/


[title] GraphQL
[path] EDITOR/Editor Blocks/API docs blocks/

Here's a live **GraphiQL** component that you can use to play around with an API:

:::GraphiQL
```json
{
  "endpoint": "https://app.archbee.com/api/graphql",
  "query": "{\n  status,\n  people\n}"
}
```
:::

***

::::LinkArray
:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"}
:FontAwesome[]{icon="fa-solid fa-cubes"} &#x20;**&#x20;Find other blocks**

Discover new ways and blocks to create stunning and functional documentation pages.

[Check out all blocks](docId:6B0VTQTVUnMP93e-SZQ2p)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"}
:FontAwesome[]{icon="fa-solid fa-headset"}**&#x20; Need help?  ⬇️**

Use the **blue** **chat bubble&#x20;**&#x66;rom bottom right corner.

Or try **AI Chat** (from search box) for quick answers.
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"}
:FontAwesome[]{icon="fa-solid fa-hand-holding-heart"}**&#x20;  Your opinion matters**

Use the below feedback form, anonymously.

Or ask a question in **Q\&A section** and our team or AI will give you a solution.
:::
::::


[title] API docs blocks
[path] EDITOR/Editor Blocks/

Many software companies have their developers or technical writers update documentation manually, which can be prone to errors and subsequently lead to customer churn.

At Archbee, we strongly believe that API documentation should always be generated from code and this is why we have native integrations with Swagger and GraphQL.

Read on to understand why it's awesome and how you can use it for your company.

::::LinkArray
:::LinkArrayItem
## <font color="#2166AE">  </font>

[API endpoints](docId\:JwrgiyTgiu8c_7ml3Hna8)
:::

:::LinkArrayItem
## <font color="#2166AE"> </font>

[OpenAPI/Swagger](docId\:BKf0SkSgsYaIMm6EK1CPb)
:::

:::LinkArrayItem
## <font color="#2166AE"> </font>

[GraphQL](docId\:HcRIpOFvmBp0Pr3Xj8Mhj)
:::
::::


[title] Buttons
[path] EDITOR/Untitled/

[Button](docId\:JDAXu7IBxBA1jW3KHOrOp) blocks create prominent calls-to-action that link to other pages or external websites.

## Syntax

You can add this component using either Markdown or MDX.

::::Tabs
:::Tab{title="Markdown"}
```markdown
:::::CtaButton{label="Click Me" externalHref="https://example.com" openInNewTab="true"}
:::
```
:::

:::Tab{title="MDX"}
```javascript
<CtaButton
  label="Click Me"
  externalHref="https://example.com"
  openInNewTab="true"
/>
```
:::
::::

Buttons support the following properties:

- `label` defines the text displayed on the button.
- `externalHref` specifies the destination URL.
- `openInNewTab` controls whether the link opens in a new browser tab.

## MDX example

The following example creates a button that links users to the Archbee documentation.

```html
<CtaButton
  label="Go to Archbee Docs"
  externalHref="https://www.archbee.com/docs"
  openInNewTab="true"
/>
```


[title] Code editor: multi-language
[path] EDITOR/Untitled/

[Code editor: multi-language](docId:_DmwEwV5w9YcnVMlcUI53) blocks group multiple code snippets into a single container with a language switcher. They are useful for presenting examples in different programming languages without taking up additional space.

## Syntax

You can add this component using either Markdown or MDX.

::::Tabs
:::Tab{title="Markdown"}
````markdown
:::CodeblockTabs

```javascript
const greeting = 'Hello, world!'
console.log(greeting)
```

```python
greeting = "Hello, world!"
print(greeting)
```

```bash
echo "Hello, world!"
```

:::
````
:::

:::Tab{title="MDX"}
````javascript
<CodeblockTabs>

```javascript
const greeting = 'Hello, world!'
console.log(greeting)
```

```python
greeting = "Hello, world!"
print(greeting)
```

```bash
echo "Hello, world!"
```

</CodeblockTabs>
````
:::
::::

Each fenced code block inside a `CodeblockTabs` container becomes a separate tab. The tab title is automatically generated from the language identifier of the code block, such as `javascript`, `python`, or `bash`.

If you only need to display a single snippet, use a standard fenced code block instead.

````markdown
```javascript
const x = 1
```
````


[title] Callouts
[path] EDITOR/Untitled/

[Callout](docId\:c-sJUb-iR1V0j8c_BKSmC) blocks highlight important information using colored containers. They are useful for displaying tips, confirmations, warnings, and critical notices.

## Syntax

You can add this component using either Markdown or MDX.

::::Tabs
:::Tab{title="Markdown"}
```markdown
:::::hint{type="info"}
Your content here.
:::
```
:::

:::Tab{title="MDX"}
```javascript
<hint type="info">
Your content here.
</hint>
```
:::
::::

Callouts support the following types:

- `info`
- `success`
- `warning`
- `danger`

## MDX example

The following example creates four different callout types.

```html
<hint type="info">
Use **info** callouts for helpful tips and additional context.
</hint>

<hint type="success">
Use **success** callouts for positive outcomes or confirmations.
</hint>

<hint type="warning">
Use **warning** callouts for things users should be careful about.
</hint>

<hint type="danger">
Use **danger** callouts for critical warnings or destructive actions.
</hint>
```


[title] Changelog
[path] EDITOR/Untitled/

[Changelog](docId:0rGxak3VYBvD660Ymmbz7) blocks organize release notes into categorized entries. They are useful for communicating new features, improvements, bug fixes, breaking changes, and known issues.

## Syntax

You can add this component using either Markdown or MDX.

::::Tabs
:::Tab{title="Markdown"}
```markdown
:::Changelog{title="Release Title"}
::ChangelogItem{type="added" description="What was added"}
::ChangelogItem{type="fixed" description="What was fixed"}
:::
```
:::

:::Tab{title="MDX"}
```javascript
<Changelog title="Release Title">
  <ChangelogItem type="added" description="What was added"/>
  <ChangelogItem type="fixed" description="What was fixed"/>
  <ChangelogItem type="improved" description="What was improved"/>
  <ChangelogItem type="broken" description="What broke or was deprecated"/>
  <ChangelogItem type="knownIssue" description="Known issues"/>
</Changelog>
```
:::
::::

Changelog items support the following types:

- `added`
- `fixed`
- `improved`
- `broken`
- `knownIssue`

## MDX example

The following example creates a changelog for a product release with multiple categorized updates.

```javascript
<Changelog title="v2.0.0 — Multi-Space Support">
  <ChangelogItem type="added" description="Multi-space navigation with navbar switcher"/>
  <ChangelogItem type="added" description="Per-site appearance overrides (colors, template, fonts)"/>
  <ChangelogItem type="improved" description="Hot reload now updates config changes in real time"/>
  <ChangelogItem type="fixed" description="Code drawer not appearing on API endpoint pages"/>
  <ChangelogItem type="knownIssue" description="Duplicate heading slugs in table of contents"/>
</Changelog>

<Changelog title="v1.5.0 — Docusaurus Support">
  <ChangelogItem type="added" description="Auto-detect and render Docusaurus projects"/>
  <ChangelogItem type="added" description="Blog directory as separate space"/>
  <ChangelogItem type="improved" description="Custom CSS extraction from Docusaurus themes"/>
  <ChangelogItem type="fixed" description="TypeScript config files crashing on load"/>
  <ChangelogItem type="broken" description="Deprecated: --no-public flag replaced with --private"/>
</Changelog>
```


[title] Horizontal Divider
[path] EDITOR/Editor Blocks/

![](https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-DAVFp7TYyWYGS3qQVb1xL-20240820-092945.png)

A Horizontal Divider is like a pause button for your content. It's a simple line that separates different sections of your document, making it easier to read and understand. Think of it as a visual break that helps your readers catch their breath.

## When to use it

- **To separate sections**

  Divide your content into clear and distinct blocks.
- **To create visual hierarchy**

  Emphasize important sections or create a sense of progression.
- **To improve readability**

  Break up long blocks of text for easier digestion.

## How to add a Horizontal Divider block

There are two ways to insert a horizontal divider in editor:

1. Type `/` to opent the Archbee block menu, then search for **horizontal divider**.
   ![](https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-fokFqAayVI5b-3OrSATcx-20240820-091800.png "Add Horizontal Divider block")
2. Use the markdown shortcut: `---` + `space bar`

Check [here](docId:9aaCRqJMq9JnYvzSgNOfs) for more markdown shortcuts.


***

::::LinkArray
:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"}
:FontAwesome[]{icon="fa-solid fa-cubes"} &#x20;**&#x20;Find other blocks**

Discover new ways and blocks to create stunning and functional documentation pages.

[Check out all blocks](docId:6B0VTQTVUnMP93e-SZQ2p)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"}
:FontAwesome[]{icon="fa-solid fa-headset"}**&#x20; Need help?  ⬇️**

Use the **blue** **chat bubble&#x20;**&#x66;rom bottom right corner.

Or try **AI Chat** (from search box) for quick answers.
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"}
:FontAwesome[]{icon="fa-solid fa-hand-holding-heart"}**&#x20;  Your opinion matters**

Use the below feedback form, anonymously.

Or ask a question in **Q\&A section** and our team or AI will give you a solution.
:::
::::


[title] Vertical Split
[path] EDITOR/Editor Blocks/

![](https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-yLur2NS-7n5n6p1g7iEKd-20240820-123417.png "Vertical Split")

It splits your content into two side-by-side columns, giving you the flexibility to present information in a visually engaging way. It's like having two canvases to work with, side by side.

## When to use it

- **Compare and contrast**
- Showcase similarities and differences between two topics or products.
- **Create side-by-side content**
  Display related information together, such as features and benefits.
- **Improve readability**
- Break up long sections of text with visual elements.
- **Showcase multiple examples**
- Present different options or variations side by side.

## How to Use the Vertical Split Block

::::WorkflowBlock
:::WorkflowBlockItem
Type `/` to open Archbee block menu
:::

:::WorkflowBlockItem
Search for **Vertical Split** block and click to insert insert

![](https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-tdJQA3ikGzMdBk2aoa-XP-20240820-122615.png "Add Vertical Split block")
:::

:::WorkflowBlockItem
Choose the width proportions form upper right corner.&#x20;
You have 3 options:

- **30/70&#x20;**&#x73;plit&#x20;
- **50/50&#x20;**&#x73;plit
- **70/30** split

![](https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-tGxQGApOOav0c1n0B3EhB-20240820-122917.png "Width Proportions")
:::

:::WorkflowBlockItem
Feel free to add your content. You can style the content however you like using the [WYSIWYG Menu](docId\:WBvFMF8cfYoJgkqNrJVIG) or even insert other blocks, like:

- [Headings](docId\:CH1EclxGmlPa-XaZAwY6u)&#x20;
- [Expandable Headings](docId\:aJpn6HeMcswfb9RR4hDHZ)&#x20;
- [Lists](docId\:D02_VQ5GNbt-SUeqoTQ3g)&#x20;
- [Button](docId\:JDAXu7IBxBA1jW3KHOrOp)&#x20;
- [Callout](docId\:c-sJUb-iR1V0j8c_BKSmC)&#x20;
- [Horizontal Divider](docId\:YUthnHc9mNprZRTwXPB4L)&#x20;
- [Minitaskers](docId\:VYT5x0nyqUpzGwz906R56)&#x20;
- [File](docId\:t1Ky085LzcMKkp3H9EBA_)&#x20;
- [Image](docId\:MfIBZf9K-Ya8z3ldzQ37V)&#x20;
- [Video](docId\:B2Ip7DJZj3gHcRxc42rIL)&#x20;
- [Map](docId:_6bL0kZA7bB9RgcNylSWS)&#x20;
- [Code editor: multi-language](docId:_DmwEwV5w9YcnVMlcUI53)&#x20;
- [Embed Examples](docId\:ejEgS_viSAOk25-lby1x0)&#x20;
:::
::::

## Examples

:::::::Tabs
:::::Tab{title="Compare Plans"}
**Compare plans&#x20;**— Clearly outline the features, pricing, and benefits of different plans in a side-by-side comparison.


::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
![](https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-HR2x2FQS9ERSjKWv5k9F9-20240820-121406.png)

Standard features to manage and distribute documentation.

<font color="#2166ae">  </font> Unlimited readers <font color="#2166ae">  </font> Unlimited project spaces <font color="#2166ae">  </font> Public or private portals <font color="#2166ae">  </font> Custom domain & branding <font color="#2166ae">  </font> Custom JavaScript <font color="#2166ae">  </font> Password protection
:::

:::VerticalSplitItem
![](https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-OiNhXRKDFgchzLmC6_N5L-20240820-121406.png)

Advanced features and full branding for scaling documentation.

<font color="#2166ae">  </font> Everything in Growing <font color="#2166ae">  </font> Complete branding control <font color="#2166ae">  </font> Review system <font color="#2166ae">  </font> Reusable content & variables <font color="#2166ae">  </font> Versioning & localization <font color="#2166ae">  </font> Advanced team access control <font color="#2166ae">  </font> Advanced reader access control
:::
::::

Check more details on [https://www.archbee.com/pricing](https://www.archbee.com/pricing) page.
:::::

::::::Tab{title="Step-by-step guide"}
**Step-by-step guide&#x20;**— Show visual instructions or code snippets in one column, while providing written explanations in the other (for How-to guides you can use [Workflow](docId\:tNgOuV2y9_9uT1vnWHqXJ) block).


:::::VerticalSplit{layout="right"}
::::VerticalSplitItem
Discover how Archbee can help you deliver documentation that answers questions for end-users, devs and team.

Book a slot and chat to our Head of Product for a walk-through. (Definitely not a sales call!)

:::CtaButton{label="Book a demo" externalHref="https://www.archbee.com/book-a-demo" openInNewTab="true"}

:::
::::

:::VerticalSplitItem
![](https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-P4quRkSsH1zD2O8sNJhmM-20240820-115459.png)
:::
:::::
::::::

:::::Tab{title="Do's and Don'ts"}
**Do's and Don'ts&#x20;**— Clearly outline best practices and potential pitfalls in one column, and the corresponding explanations or consequences in the other.

::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
<font color="#3b9f0f">D</font><font color="#3b9f0f">o</font>

![](https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-cTuj-hMen2jBVWghk7eIK-20240820-113751.png)

✅  Main CTA stands out against everyting else
✅  Second CTA is less visible
:::

:::VerticalSplitItem
<font color="#eb1418">Don't</font>

![](https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-QdYNL7rDqOiPWR40bnl5A-20240820-113800.png)

❌  No natural hierarchy
❌  No visual trigger or mixed feelings
:::
::::
:::::

:::::Tab{title="FAQ section"}
::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
**Will using Archbee make me rich?**
:::

:::VerticalSplitItem
We can't promise that, but it's worth a shot.

After all, if it doesn't make you a millionaire, at least you'll have a really fancy-looking documentation.

And let's be honest, who needs money when you can have compliments on your [documentation portal that answers your user's questions with AI](docId:1tOWnw572B2YbhvcxyZCm)?
:::
::::
:::::
:::::::

***

:::hint{type="info"}
**🧠   Remember&#x20;**

The key to effective use of a vertical split is balance. Ensure the content in each column complements the other and contributes to the overall message of your document.&#x20;

Experiment with different content combinations to find what works best for your audience.
:::

***

::::LinkArray{contentSource="CUSTOM"}
:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"}
:FontAwesome[]{icon="fa-solid fa-cubes"} &#x20;**&#x20;Find other blocks**

Discover new ways and blocks to create stunning and functional documentation pages.

[Check out all blocks](docId:6B0VTQTVUnMP93e-SZQ2p)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"}
:FontAwesome[]{icon="fa-solid fa-headset"}**&#x20; Need help?  ⬇️**

Use the **blue** **chat bubble&#x20;**&#x66;rom bottom right corner.

Or try **AI Chat** (from search box) for quick answers.
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"}
:FontAwesome[]{icon="fa-solid fa-hand-holding-heart"}**&#x20;  Your opinion matters**

Use the below feedback form, anonymously.

Or ask a question in **Q\&A section** and our team or AI will give you a solution.
:::
::::


[title] Use Markdown shortcuts
[path] EDITOR/

Archbee's editor supports Markdown syntax and it's super easy to use! 😎

| **Markdown**         | **Syntax**                          |
| -------------------- | ----------------------------------- |
| Link Markdown        | `[label](www.go.com)` + `space bar` |
| Divider Markdown     | `---` + `space bar`                 |
| Heading 1            | `#` + `space bar`                   |
| Heading 2            | `##` + `space bar`                  |
| Heading 3            | `###` + `space bar`                 |
| Checklist            | `[]` + `space bar`                  |
| Quote                | `>`                                 |
| Inline Code Markdown | `` `text` ``                        |
| Bold Markdown        | `**text**`                          |
| Underline Markdown   | `__text__`                          |
| Italic Markdown      | `*text*`                            |
| Italic Markdown      | `_text_`                            |
| Strike Markdown      | `~~text~~`                          |
| Numbered List        | `1.` + `space bar`                  |
| Bulleted List        | `-` + `space bar`                   |
| Bulleted List        | `*` + `space bar`                   |
| Add code snippet     | ` ``` `                             |

On top of the standard Markdown syntax, there are shortcuts you can use to render custom blocks in Archbee:

- [Callout](docId\:c-sJUb-iR1V0j8c_BKSmC)&#x20;
- [Tabs](docId\:nIaGbRRi7rJFXXCkkHd1c)&#x20;
- [Link Grid](docId\:Z_VgvWiFBolvUazqD6vWM)&#x20;
- [Code editor: multi-language](docId:_DmwEwV5w9YcnVMlcUI53)&#x20;
  - [With a single tab](docId:_DmwEwV5w9YcnVMlcUI53)&#x20;
  - [Without language](docId:_DmwEwV5w9YcnVMlcUI53)&#x20;
  - [With multiple tabs and languages](docId:_DmwEwV5w9YcnVMlcUI53)&#x20;
- [Code drawers](docId:9rc9lvIrREZCwra8j4lit)&#x20;
- [Changelog](docId\:s9KuKIUE8z2e4Y1X4V1gB)&#x20;


[title] API endpoints
[path] EDITOR/Editor Blocks/API docs blocks/

We also recognize that not all companies provide standardized APIs, so we built an in-house widget to let you describe to your team or customers what your API looks like.

Additionally, it's super useful when working together with external teams, where you need to communicate an API specification, and instead of providing a JSON file, you provide a document with this widget, and let it describe anything from URL, Parameters, Cookies, Request structure, Response structure, etc.

You can add one by typing `(api)` in the editor or clicking the API icon in a new row.

***

:::ApiMethodV2
```json
{
  "tab": "examples",
  "url": "https://api.cakes.com/v1/cakes/:id",
  "name": "Cakes API",
  "method": "POST",
  "request": {
    "pathParameters": [
      {
        "kind": "required",
        "name": "id",
        "type": "string",
        "description": "ID of the cake to get, \n for free of course."
      }
    ],
    "queryParameters": [
      {
        "kind": "required",
        "name": "recipe",
        "type": "string",
        "description": "The API will do its best to find \n a cake matching the provided recipe."
      },
      {
        "kind": "required",
        "name": "gluten",
        "type": "boolean",
        "description": "Whether the cake should be \n gluten-free or not."
      }
    ],
    "headerParameters": [
      {
        "kind": "required",
        "name": "X-Auth-Token",
        "type": "string",
        "description": "Authentication token to track \n down who is emptying our stocks."
      }
    ],
    "formDataParameters": []
  },
  "results": {
    "languages": [
      {
        "id": "mNZW47TKMdx5VBY_A7w-y",
        "code": "{\n    \"name\": \"Cake's name\",\n    \"recipe\": \"Cake's recipe name\",\n    \"cake\": \"Binary cake\"\n}",
        "language": "200"
      },
      {
        "id": "4txTa0_LO1TWO7FOVvFjj",
        "code": "{\n    \"message\": \"Ain't no cake like that.\"\n}",
        "language": "404"
      }
    ],
    "selectedLanguageId": "mNZW47TKMdx5VBY_A7w-y"
  },
  "examples": {
    "languages": [
      {
        "id": "5x2tfkoh7utDmGpv45DOA",
        "code": "fetch(\"https://api.cakes.com/v1/cakes/:id\", {\n  \"method\": \"POST\",\n  \"headers\": {\n    \"Accept\": \"application/json\"\n  }\n})\n.then(response => {\n  console.log(response);\n})\n.catch(err => {\n  console.error(err);\n});",
        "language": "javascript"
      },
      {
        "id": "sDqk0BbLTuvGBkZUjLsSv",
        "code": "const fetch = require('node-fetch');\n\nlet url = 'https://api.cakes.com/v1/cakes/:id';\nlet options = {\n  method: 'POST', \nheaders: {\n    Accept: 'application/json',\n  }\n};\nfetch(url, options)\n  .then(res => res.json())\n  .then(json => console.log(json))\n  .catch(err => console.error('error:' + err));",
        "language": "nodejs"
      },
      {
        "id": "G4ZGYdLoiDVDuj2yhZVt6",
        "code": "curl --request POST\n  --url https://api.cakes.com/v1/cakes/:id \n  --header 'Accept: application/json'",
        "language": "curl"
      },
      {
        "id": "s6TUVImaWbitxzfW9NgLm",
        "code": "import requests\n\nurl = \"https://api.cakes.com/v1/cakes/:id\"\nheaders = {\"Accept\": \"application/json\"}\nresponse = requests.request(\"GET\", url, headers=headers)\nprint(response.text)",
        "language": "python"
      },
      {
        "id": "AWzqoYUXp7zqI-QoObWAZ",
        "code": "const fetch = require('node-fetch');\n\nlet url = 'https://api.cakes.com/v1/cakes/:id';\nlet options = {method: 'POST', headers: {Accept: 'application/json'}};\nfetch(url, options)\n  .then(res => res.json())\n  .then(json => console.log(json))\n  .catch(err => console.error('error:' + err));",
        "language": "ruby"
      }
    ],
    "selectedLanguageId": "5x2tfkoh7utDmGpv45DOA"
  },
  "responses": [
    {
      "statusCode": 200,
      "description": "Cake successfully retrieved.",
      "jsonExample": "{\n    \"name\": \"Cake's name\",\n    \"recipe\": \"Cake's recipe name\",\n    \"cake\": \"Binary cake\"\n}"
    },
    {
      "statusCode": 404,
      "description": "Could not find a cake matching this query.",
      "jsonExample": "{\n    \"message\": \"Ain't no cake like that.\"\n}"
    }
  ],
  "description": "This endpoint allows you to obtain free cakes.",
  "currentNewParameter": {
    "label": "Path Parameter",
    "value": "pathParameters"
  },
  "hasTryItOut": true,
  "autoGeneratedAnchorSlug": "cakes-api",
  "legacyHash": "uR6Ob1_8v48ocI1ix7eYI"
}
```
:::

***

:::ApiMethodV2
```json
{
  "tab": "examples",
  "url": "https://api.cakes.com",
  "name": "Add Cake",
  "method": "PUT",
  "request": {
    "pathParameters": [],
    "queryParameters": [],
    "headerParameters": [],
    "bodyDataParameters": [
      {
        "kind": "required",
        "name": "id",
        "type": "string",
        "description": "ID of the cake to get"
      }
    ],
    "formDataParameters": []
  },
  "results": {
    "languages": [
      {
        "id": "ujXlls271GisHxHhB4Vuq",
        "code": "",
        "language": "100"
      },
      {
        "id": "yJFwqLNqQZ1CqWmbDWVSV",
        "code": "{\n    \"name\": \"Cake's name\",\n}",
        "language": "200"
      },
      {
        "id": "veFsTjk4UScAb9yR7AK6Y",
        "code": "{\n    \"message\": \"Ain't no cake like that.\"\n}",
        "language": "404"
      }
    ],
    "selectedLanguageId": "ujXlls271GisHxHhB4Vuq"
  },
  "examples": {
    "languages": [
      {
        "id": "a7SyxH465CLSN6X0xbe4g",
        "code": "fetch(\"https://api.cakes.com\", {\n  \"method\": \"GET\",\n  \"headers\": {\n    \"Accept\": \"application/json\"\n  }\n})\n.then(response => {\n  console.log(response);\n})\n.catch(err => {\n  console.error(err);\n});",
        "language": "javascript"
      },
      {
        "id": "48WTucfgCh18gcuyiTY-h",
        "code": "A simple text.",
        "language": "none"
      }
    ],
    "selectedLanguageId": "a7SyxH465CLSN6X0xbe4g"
  },
  "description": "Add a new cake",
  "currentNewParameter": {
    "label": "Body Parameter",
    "value": "bodyDataParameters"
  },
  "hasTryItOut": true,
  "autoGeneratedAnchorSlug": "add-cake",
  "legacyHash": "ZeFKbNEVwtwvB6gFp8448"
}
```
:::

It's VERY flexible letting your team describe in detail any type of HTTP endpoint.

We're also working on making it interactive, so your customers can actually make the request from here.

***

::::LinkArray{contentSource="CUSTOM"}
:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"}
:FontAwesome[]{icon="fa-solid fa-cubes"} &#x20;**&#x20;Find other blocks**

Discover new ways and blocks to create stunning and functional documentation pages.

[Check out all blocks](docId:6B0VTQTVUnMP93e-SZQ2p)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"}
:FontAwesome[]{icon="fa-solid fa-headset"}**&#x20; Need help?  ⬇️**

Use the **blue** **chat bubble&#x20;**&#x66;rom bottom right corner.

Or try **AI Chat** (from search box) for quick answers.
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"}
:FontAwesome[]{icon="fa-solid fa-hand-holding-heart"}**&#x20;  Your opinion matters**

Use the below feedback form, anonymously.

Or ask a question in **Q\&A section** and our team or AI will give you a solution.
:::
::::


[title] Workflows
[path] EDITOR/Untitled/

[Workflow](docId\:k4PDPZ_n6XEOQLKItvXwq) blocks present a sequence of steps with numbered indicators. They are useful for installation guides, tutorials, onboarding flows, and any process that should be completed in order.

## Syntax

You can add this component using either Markdown or MDX.

::::Tabs
:::Tab{title="Markdown"}
```markdown
:::::WorkflowBlock
::::WorkflowBlockItem
Step Title

Step content.
::::
:::::
```
:::

:::Tab{title="MDX"}
```javascript
<WorkflowBlock>
  <WorkflowBlockItem>
    Step Title

    Step content.
  </WorkflowBlockItem>
</WorkflowBlock>
```
:::
::::

Each `WorkflowBlockItem` represents a single step in the process. The first line is used as the step title, while the remaining content becomes the step description.

Workflow items can contain standard Markdown formatting, including inline code, lists, links, and other supported components.

## MDX Example

The following example creates a four-step onboarding workflow.

```javascript
<WorkflowBlock>
  <WorkflowBlockItem>
  Install the CLI

  Run `npm install -g @archbee/cli` to install the Archbee CLI globally.
  </WorkflowBlockItem>

  <WorkflowBlockItem>
  Create a project

  Run `archbee new my-docs` to create a new documentation project.
  </WorkflowBlockItem>

  <WorkflowBlockItem>
  Start the dev server

  Run `archbee dev` to start the local preview at `localhost:3000`.
  </WorkflowBlockItem>

  <WorkflowBlockItem>
  Deploy

  Build and deploy your docs to production.
  </WorkflowBlockItem>
</WorkflowBlock>
```


[title] Link grids
[path] EDITOR/Untitled/

[Link Grid](docId\:Z_VgvWiFBolvUazqD6vWM) blocks organize content into responsive card layouts. They are useful for creating landing pages, navigation hubs, documentation indexes, and collections of related resources.

## Syntax

You can add this component using either Markdown or MDX.

::::Tabs
:::Tab{title="Markdown"}
```markdown
:::::LinkArray{contentSource="CUSTOM" itemsPerRow="3"}
::::LinkArrayItem{headerType="COLOR" headerColor="#hex"}
Card content.
::::
:::::
```
:::

:::Tab{title="MDX"}
```javascript
<LinkArray contentSource="CUSTOM" itemsPerRow="3">
  <LinkArrayItem headerType="COLOR" headerColor="#2166AE">
    Card content.
  </LinkArrayItem>
</LinkArray>
```
:::
::::

Link Grid cards support three header styles:

- No header for a simple card layout.&#x20;
- `COLOR`, using the `headerColor` property.&#x20;
- `IMAGE`, using the `headerImage` property.&#x20;

The `itemsPerRow` property controls how many cards are displayed on each row.

## MDX example

The following example demonstrates the three available card styles.

### Plain cards

```javascript
<LinkArray contentSource="CUSTOM" itemsPerRow="3">
  <LinkArrayItem>

  **Getting Started**

  Learn the basics of setting up your documentation project.

  </LinkArrayItem>
  <LinkArrayItem>

  **Configuration**

  Customize every aspect of your docs with `archbee.json`.

  </LinkArrayItem>
  <LinkArrayItem>

  **Templates**

  Choose from 4 built-in templates to match your brand.

  </LinkArrayItem>
</LinkArray>
```

### Colored header cards

```javascript
<LinkArray contentSource="CUSTOM" itemsPerRow="3">
  <LinkArrayItem headerType="COLOR" headerColor="#2166AE">

  **API Reference**

  Complete endpoint documentation with examples.

  </LinkArrayItem>
  <LinkArrayItem headerType="COLOR" headerColor="#16A34A">

  **Guides**

  Step-by-step tutorials for common tasks.

  </LinkArrayItem>
  <LinkArrayItem headerType="COLOR" headerColor="#DC2626">

  **Troubleshooting**

  Solutions to common issues and FAQ.

  </LinkArrayItem>
</LinkArray>
```

### Image header cards

```javascript
<LinkArray contentSource="CUSTOM" itemsPerRow="3">
  <LinkArrayItem headerType="IMAGE" headerImage="https://images.archbee.com/K_JWZranXy1tD6qvlG2v6-YOw4gia62kkE1bvECH6iX-20250910-182430.png?format=webp">

  **Visual Docs**

  Add images and media to your documentation.

  </LinkArrayItem>
  <LinkArrayItem headerType="IMAGE" headerImage="https://images.archbee.com/K_JWZranXy1tD6qvlG2v6-_tiGuKOk_9dziwY-l92FX-20250910-190316.png?format=webp">

  **Code Examples**

  Syntax-highlighted code with copy support.

  </LinkArrayItem>
  <LinkArrayItem headerType="IMAGE" headerImage="https://images.archbee.com/K_JWZranXy1tD6qvlG2v6-Vjd5vTfjNgJi8V0mulhgV-20250910-190329.png?format=webp">

  **API Blocks**

  Interactive API endpoint documentation.

  </LinkArrayItem>
</LinkArray>
```


[title] Code drawer
[path] EDITOR/Untitled/

[Code drawer](docId:9rc9lvIrREZCwra8j4lit) blocks display request examples and response samples in the right column of a two-column layout. Use them to build interactive API documentation.

## Syntax

You can add this component using either Markdown or MDX.

::::Tabs
:::Tab{title="Markdown"}
```markdown
::::CodeDrawer{title="Endpoint Name"}
:::CodeblockTabsExamples
(Code blocks with request examples)
:::
:::CodeblockTabsResponses
(Code blocks with response examples)
:::
::::
```
:::

:::Tab{title="MDX"}
```javascript
<CodeDrawer title="Endpoint Name">
  <CodeblockTabsExamples>
    (Code blocks with request examples)
  </CodeblockTabsExamples>
  <CodeblockTabsResponses>
    (Code blocks with response examples)
  </CodeblockTabsResponses>
</CodeDrawer>
```
:::
::::

A code drawer consists of two sections:

- `CodeblockTabsExamples` for request examples.&#x20;
- `CodeblockTabsResponses` for response samples.&#x20;

Each section can contain one or more fenced code blocks. When multiple code blocks are present, they are automatically grouped into language tabs.

Code drawers are rendered in the right column when used inside a two-column layout.

## MDX example

The following example creates a code drawer with request examples in JavaScript, Python, and Bash, along with successful and error responses.

````javascript
<CodeDrawer title="Create a User">
  <CodeblockTabsExamples>

  ```javascript
  const response = await fetch('https://api.example.com/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer sk_live_xxx'
    },
    body: JSON.stringify({
      name: 'Jane Doe',
      email: 'jane@example.com',
      role: 'admin'
    })
  })
  const user = await response.json()
  ```

  ```python
  import requests

  response = requests.post('https://api.example.com/users', json={
      'name': 'Jane Doe',
      'email': 'jane@example.com',
      'role': 'admin'
  }, headers={
      'Authorization': 'Bearer sk_live_xxx'
  })
  user = response.json()
  ```

  ```bash
  curl -X POST https://api.example.com/users \
    -H "Content-Type: application/json" \
    -H "Authorization: Bearer sk_live_xxx" \
    -d '{"name":"Jane Doe","email":"jane@example.com","role":"admin"}'
  ```

  </CodeblockTabsExamples>

  <CodeblockTabsResponses>

  ```json
  {
    "id": "usr_abc123",
    "name": "Jane Doe",
    "email": "jane@example.com",
    "role": "admin",
    "createdAt": "2026-04-01T10:00:00Z"
  }
  ```

  ```json
  {
    "error": "Validation failed",
    "message": "Email already exists",
    "code": 409
  }
  ```

  </CodeblockTabsResponses>
</CodeDrawer>
````


[title] Editor Blocks
[path] EDITOR/

Imagine Archbee blocks as the building blocks for your documentation.&#x20;

They are like Legos that you can use to create your documentation exactly how you want it.

There are all sorts of blocks to choose from, so you can add whatever you need to make your documentation informative and easy to understand.

## Basic blocks

::::LinkArray{contentSource="CUSTOM"}
:::LinkArrayItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/JauLZ1Oizt-Y7_UDRqLm5_heading.png)

[Headings](docId\:CH1EclxGmlPa-XaZAwY6u)
:::

:::LinkArrayItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/gDmWoe9X755t-7Y35cd1z_expheading.png)

[Expandable Headings](docId\:aJpn6HeMcswfb9RR4hDHZ)&#x20;
:::

:::LinkArrayItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/k-5-_jIzL6TNlt2Bg06Md_tables.png)

[Table](docId\:XISmEqbPiMGonZxHooHwZ)
:::

:::LinkArrayItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/yEwpsMymjgtmqNdlfOZLW_list.png)

[Lists](docId\:D02_VQ5GNbt-SUeqoTQ3g)
:::

:::LinkArrayItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/3m1b4YhBdxRYGGiOOl1lk_button.png)

[Button](docId\:JDAXu7IBxBA1jW3KHOrOp)
:::

:::LinkArrayItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/NlvpHlGgcjScxkBvj7VCV_callout.png)

[Callout](docId\:c-sJUb-iR1V0j8c_BKSmC)
:::

:::LinkArrayItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/8yUzk2lbkxtDOoQU6O16W_horizontal.png)

[Horizontal Divider](docId\:YUthnHc9mNprZRTwXPB4L)
:::

:::LinkArrayItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/XJSDrqzo3tVKMEyY_1BYW_vertical.png)

[Vertical Split](docId\:VTOI7mkPJHKCQCC4xOAty)
:::

:::LinkArrayItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/e_Kc4I346cVt6e527VrTw_tasker.png)

[Minitaskers](docId\:VYT5x0nyqUpzGwz906R56)
:::

:::LinkArrayItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/C5-KP-ilwN-9DJNT2ytMT_linkcard.png)

[Link Grid](docId\:Z_VgvWiFBolvUazqD6vWM)
:::

:::LinkArrayItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/0FijwysNZCLXbOdY_jnd9_workflow.png)

[Workflow](docId\:tNgOuV2y9_9uT1vnWHqXJ)
:::

:::LinkArrayItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/IG7oJshrgYV7FlWmDSXFC_tabs.png)

[Tabs](docId\:nIaGbRRi7rJFXXCkkHd1c)
:::
::::

## Media blocks

::::LinkArray{contentSource="CUSTOM"}
:::LinkArrayItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/oBbHKDlXjRBBpbHkzDkWy_file.png)

[File](docId\:t1Ky085LzcMKkp3H9EBA_)
:::

:::LinkArrayItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/5ACLHAesNTebnOrdmSa2H_image.png)

[Image](docId\:MfIBZf9K-Ya8z3ldzQ37V)
:::

:::LinkArrayItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/-StrZ27zcLYbPhRomPBOR_video.png)

[Video](docId\:B2Ip7DJZj3gHcRxc42rIL)
:::

:::LinkArrayItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/YLAnYzB2CDujzivtjURA4_map.png)

[Map](docId:_6bL0kZA7bB9RgcNylSWS)
:::
::::

## Developer blocks

::::LinkArray{contentSource="CUSTOM"}
:::LinkArrayItem
![](https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-0w3hjTzf9Hi5syrpmroob-20240730-100115.png)

[Code editor](docId:_DmwEwV5w9YcnVMlcUI53)
:::

:::LinkArrayItem
![](https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-YaW2e5a676616ZVdpLs_--20240730-100114.png)

[Code drawers](docId:9rc9lvIrREZCwra8j4lit)
:::

:::LinkArrayItem
![](https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-Zj8E8BesPJZProMZVkPiK-20240730-100115.png)

[API docs](docId\:tSO7ZcTHK-Dvx9rUP2FYL)&#x20;
:::

:::LinkArrayItem
![](https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-4ajmOJAd3KbjceI9Z48ky-20240730-100115.png)

[OpenAPI/Swagger](docId\:BKf0SkSgsYaIMm6EK1CPb)
:::

:::LinkArrayItem
![](https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-ttBhPwgHLP7Iv5KF8vw3g-20240730-100114.png)

[GraphQL](docId\:HcRIpOFvmBp0Pr3Xj8Mhj)
:::

:::LinkArrayItem
![](https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-MmZojtBTmne-Qh639Hv8n-20240730-100114.png)

[Mermaid diagrams](docId\:fRhB6aopNdkyYjeQDeJLG)
:::

:::LinkArrayItem
![](https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-7IJlkztgeuTnB8yMnqyzQ-20240730-102629.png)

[TeX Equation](docId\:W4KY8zdZZGYouNMTXuLiT)
:::

:::LinkArrayItem
![](https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-q42F8Tl585GOvNxNsQIOl-20240730-100114.png)

[Changelog](docId\:s9KuKIUE8z2e4Y1X4V1gB)
:::
::::

## Embed blocks

Most of our integrations work inside the editor. You can add embeds from other tools like Loom, Figma, Miro, Lucidcharts, and more.

Check the [Embed Examples](https://www.archbee.com/docs/embed-examples) page for more info.

## Content Snippets

Reusable blocks of content that you can insert into multiple documents. Create them once, then easily add them wherever needed, saving time and ensuring consistency across your documentation.

Check the [Content snippets](docId:1OcdY_lvhrvPzF35HwgHu) page for more info.

[title] How to use the Editor
[path] EDITOR/

First of all, welcome! 👋

The Editor is like your second home and you need to know where everything is at all times.&#x20;

That's why it's important that we highlight a few main concepts to set you on your merry way:

- Enter in edit mode by pressing on  :FontAwesome[]{icon="fa-solid fa-pen"}**&#x20; Edit**  button or use the `Ctrl` / `Cmd` + `E` shortcut. You can use the same shortcut or to press on  :FontAwesome[]{icon="fa-solid fa-eye"}**&#x20; Preview &#x20;**&#x62;utton to lock your document and to see how it looks before publishing it.&#x20;
  - If you have Review System enabled, check [here](docId:3cwwi9judh8iykkPcQbDl) for more details.
- Use forward slash `/` to add a new content block (see all blocks [here](docId:6B0VTQTVUnMP93e-SZQ2p)).
  There are four categories:
  1. **Basic** - with multiple blocks that help you format documents
  2. **Media** - use these to import files, images, embed Youtube or Vimeo videos
  3. **Developer** - you will use these when you write software documentation because you will leverage:
     - [Code editor: multi-language](docId:_DmwEwV5w9YcnVMlcUI53)
     - [Mermaid diagrams](docId\:fRhB6aopNdkyYjeQDeJLG)
     - [API endpoints](docId\:JwrgiyTgiu8c_7ml3Hna8)
     - [OpenAPI/Swagger](docId\:BKf0SkSgsYaIMm6EK1CPb)
     - [GraphQL](docId\:HcRIpOFvmBp0Pr3Xj8Mhj)
  4. **Embed** - most of our integrations work inside the editor. You can add embeds from other tools like Loom, Figma, Miro, Lucidcharts, and more. Check the [Embed Examples](docId\:ejEgS_viSAOk25-lby1x0) page for more info.
- Write using [Markdown shortcuts](docId:9aaCRqJMq9JnYvzSgNOfs) and check the keyboard shortcuts by pressing `Ctrl` or `Cmd` + `/`
- Use [WYSIWYG Menu](docId\:WBvFMF8cfYoJgkqNrJVIG) for formatting options on each piece of text when you **highlight** or **double-click**.
- Start [Using @ Mentions and dynamic links](docId\:xpKLRqkncGbUJqSi9XweS) after you add more documents to link between them.

:::hint{type="success"}
Copy-pasting text maintains the formatting, and what's super neat about it is that you can add images this way (instead of importing them).

Also, when you paste markdown, the editor automatically recognizes it and renders the format correctly.
:::


[title] EDITOR
[path] /


[title] Callout
[path] EDITOR/Editor Blocks/

![](https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-bfoxdxKthix6HFJHa4V3v-20240814-212217.png)

Think of a **callout** as a tiny, attention-seeking spotlight for your most important or interesting content. It's like a digital sticky note that screams, *"Hey, look at me!".&#x20;*&#x49;t's a versatile block that can be used to highlight tips, warnings, best practices, or just about anything you want to emphasize.

## Why to use callouts?

- **Highlight Key Information**
  Is there something super important your users need to know? A callout is your megaphone.
- **Provide Helpful Tips**
  Want to be the documentation hero? Drop some helpful tips in callouts.
- **Warn About Potential Issues**
  Prevent user tears by using callouts for warnings.
- **Add a Touch of Personality**
  Callouts can be your secret weapon for injecting some personality into your docs.

:::hint{type="info"}
**😎  Pro Tip**

Use callouts sparingly. Too many and they lose their impact. It's like shouting at someone - it works for a while, but then it just gets annoying.
:::

## How to use the callout block?

::::WorkflowBlock
:::WorkflowBlockItem
Type `/` to open Archbee block menu
:::

:::WorkflowBlockItem
Search for **Callout** block and click to insert insert
:::

:::WorkflowBlockItem
Choose the callout style

- **ℹ️  Info &#x20;**—**&#x20;&#x20;**&#x46;or general information, tips, or quick facts.
- **✅  Success &#x20;**—**&#x20;&#x20;**&#x54;o celebrate accomplishments, highlight positive outcomes, or simply spread good vibes.
- <font color="#fcb900">⚠️</font>**&#x20; Warning &#x20;**—**&#x20;&#x20;**&#x54;o alert users to potential issues, cautionary notes, or important considerations.
- **🛑  Danger**  —**&#x20;&#x20;**&#x46;or critical alerts, urgent messages, or situations that require immediate attention.

![](https://archbee-image-uploads.s3.amazonaws.com/HCIek7I0UxvyNHQ0EFzVX-zV7r0yId4A90qn1yY26dG-20250218-123012.png)
:::

:::WorkflowBlockItem
Feel free to add your content. You can style the content however you like using the [WYSIWYG Menu](docId\:WBvFMF8cfYoJgkqNrJVIG) or even insert other blocks, like:

- [Headings](docId\:CH1EclxGmlPa-XaZAwY6u)&#x20;
- [Expandable Headings](docId\:aJpn6HeMcswfb9RR4hDHZ)&#x20;
- [Lists](docId\:D02_VQ5GNbt-SUeqoTQ3g)&#x20;
- [Button](docId\:JDAXu7IBxBA1jW3KHOrOp)&#x20;
- [Horizontal Divider](docId\:YUthnHc9mNprZRTwXPB4L)&#x20;
- [File](docId\:t1Ky085LzcMKkp3H9EBA_)&#x20;
- [Image](docId\:MfIBZf9K-Ya8z3ldzQ37V)&#x20;
- [Video](docId\:B2Ip7DJZj3gHcRxc42rIL)&#x20;
:::
::::

![](https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-dS1JVN4jX6oHXj_iDiqIk-20240814-181528.png "Add callout block")

## Markdown

Want to add callouts to your documentation directly through Markdown? We've got you covered you!

Archbee supports a specific Markdown syntax with triple colons (`:::`). With this method, you simply type `:::hint` followed by an optional `style` attribute to define the callout type (info, warning, success or danger).&#x20;

Use the following Markdown to generate a callout block:

```markdown
## Hints

:::hint{style="info"}
We would love you to contribute to `@octokit/rest`, pull requests are very welcome! Please see CONTRIBUTING.md for more information.
:::

:::hint{style="warning"}
We would love you to contribute to `@octokit/rest`, pull requests are very welcome! Please see CONTRIBUTING.md for more information.
:::

:::hint{style="success"}
We would love you to contribute to `@octokit/rest`, pull requests are very welcome! Please see CONTRIBUTING.md for more information.
:::

:::hint{style="danger"}
We would love you to contribute to `@octokit/rest`, pull requests are very welcome! Please see CONTRIBUTING.md for more information.
:::
```

:::hint{type="info"}
We would love you to contribute to `@octokit/rest`, pull requests are very welcome! Please see CONTRIBUTING.md for more information.
:::

Alternatively, use this flavor of Markdown to generate a callout block.

```markdown
{% hint style="info" %}
some hint
{% endhint %}

```

Check the [Use Markdown shortcuts](docId:9aaCRqJMq9JnYvzSgNOfs) page to see more markdown shortcuts for other blocks.

## Examples

Here are some examples to show you the callout block:

- **ℹ️  Info**

:::hint{type="info"}
**ℹ️    Did you know? &#x20;**

Archbee is so good, it'll make you question your life choices.&#x20;

Like, why didn't you start using it sooner?
:::



- ✅  **Success**

:::hint{type="success"}
**🎉    You did it!**

You've mastered the art of callouts.

Now go forth and create amazing documentation that will blow your competitors out of the water.
:::



- <font color="#fcb900">⚠️</font>**&#x20; Warning**

:::hint{type="warning"}
<font color="#fcb900">**🚧**    </font>**Heads up!**

Using too many callouts can be distracting. Use them wisely, or your readers might start to ignore them altogether.
:::



- 🛑  **Danger**

:::hint{type="danger"}
<font color="#ff0004">🚨</font>  &#x20;**&#x20;Uh-oh!**

If you're seeing this, something has gone terribly wrong. 🫣

Probably not with Archbee though, **we're perfect. 💅✨**

Blame the coffee. ☕️
:::



***

::::LinkArray{contentSource="CUSTOM"}
:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"}
:FontAwesome[]{icon="fa-solid fa-cubes"} &#x20;**&#x20;Find other blocks**

Discover new ways and blocks to create stunning and functional documentation pages.

[Check out all blocks](docId:6B0VTQTVUnMP93e-SZQ2p)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"}
:FontAwesome[]{icon="fa-solid fa-headset"}**&#x20; Need help?  ⬇️**

Use the **blue** **chat bubble&#x20;**&#x66;rom bottom right corner.

Or try **AI Chat** (from search box) for quick answers.
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"}
:FontAwesome[]{icon="fa-solid fa-hand-holding-heart"}**&#x20;  Your opinion matters**

Use the below feedback form, anonymously.

Or ask a question in **Q\&A section** and our team or AI will give you a solution.
:::
::::


[title] Content snippets
[path] EDITOR/Reusables/

## Add a Content snippet

::::WorkflowBlock
:::WorkflowBlockItem
In the bottom left corner, click on the **Reusables → Content Snippets** tab
:::

:::WorkflowBlockItem
In the new window, you can now define your content snippets or edit the existing ones if you have already defined them
:::

:::WorkflowBlockItem
Add the title and your snippet, then click on the **Save content snippet** button
:::

:::WorkflowBlockItem
Go back to the editor and type `/`
:::

:::WorkflowBlockItem
Go to the new content snippet tab and select it
:::
::::

## Edit a content snippet

::::WorkflowBlock
:::WorkflowBlockItem
Click on the **Reusables → Content snippet** tab (alternatively, click on the badge name of the content snippet inside the editor)
:::

:::WorkflowBlockItem
Look for the content snippet you want to change and select it from the list on the left
:::

:::WorkflowBlockItem
Change content and click on **Save content snippet** to update it
:::

:::WorkflowBlockItem
If you want to delete a content snippet, click on the trash icon
:::
::::

:::hint{type="danger"}
**IMPORTANT❗**

When you want to delete a content snippet, make sure to remove it from other documents where you have referenced it. We've made things easier for you → a red box should appear letting you know that this content snippet is no longer available and you should remove it.
:::

## Content snippets in action

::embed[]{url="https://youtu.be/U-tGFfXwgww"}


[title] Document Tags
[path] EDITOR/Reusables/

:::hint{type="success"}
`Document tags` help you easily categorize, find, and understand your content faster.
:::

## How to Create a Tag

1. Go to **Reusables** → **Document Tags**.
2. In the "Create Tag" section:
   - Enter a **Tag Name**.
   - Optionally, add a **Description** to explain what the tag is for.
   - Choose a **Color** to visually identify your tag.
   - Click on **+Create&#x20;**&#x62;utton
   - ✅ Your tag will now appear in the Document Tags list and be ready for use!

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/GjBdzoos9P4QlPHEkp5TD_image.png)

## How to Add a Tag to a Document

1. Open the document you want to tag.
2. On the right-hand navigation panel, find the **Document Tags** section.
3. Click **Add Tag** and select the tag you created.
4. The tag will now be attached to your document!

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/bBAa0avocdpMyKiraKQ7b_image.png)

:::hint{type="warning"}
To quickly locate the tags, use the Search feature where you can sort by `Tags`
:::

## Why Use Document Tags?

- Quickly filter and locate documents.
- Group related content together.
- Help your team understand the purpose of each document at a glance.

Start tagging today to make your documentation cleaner and more powerful! 🚀

[title] Starting a Document from External Sources
[path] DOCUMENTS/

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/QhFBSH5pLHdBF6KViQy_L_image.png "Smart Document Creation: Templates, AI, and Syncing from External Apps")

Whether you want to start with a predefined template, link your  content from Google Docs or Confluence, or leverage AI for assistance, this feature gives you full flexibility to get started in seconds.

**When creating a new document, you can:**

- Start with a template for structured content ✅
- Sync from Google Docs or Confluence to import existing documents ✅
- Write with AI for quick content generation ✅

# Start with a Template

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/z32ZpA5nc0FIa3H9eL9Sk_image.png)

:::hint{type="info"}
Start a new document and press 'Start with a template' option
:::

- Choose from a variety of *pre-designed templates&#x20;*&#x74;ailored to different documentation needs.
- Templates ensure *consistent formatting and structure*, saving you time and effort.
- You can *edit the document freely* after selecting a template.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/raAMDny8alflsjL4ciz3q_image.png)

# Sync Content from External Apps

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/cKHoDXrk2M7IeSO395mK1_image.png)

## Google docs integration:

- Directly *import documents from Google Docs* into our editor.
- A file selection interface lets you *choose the document* you wish to import.
- Once imported, the document syncs with a Google doc. Any changes will be updated in Archbee

### Steps for integration

::::WorkflowBlock
:::WorkflowBlockItem
Click on the Google Docs icon
:::

:::WorkflowBlockItem
You'll be redirected to our Integrations page -> Click on "Connect with Google Docs"
:::

:::WorkflowBlockItem
Connect with your Google docs account and Allow Archbee access
:::

:::WorkflowBlockItem
Once integrated, go back to your Archbee page and select a file from your Google Docs list
:::
::::

## Confluence Integration

- Easily *link Confluence documents* to your workspace.
- Simply *paste the Confluence document URL* into the provided input field.
- Your linked content will be *imported automatically*, allowing you to continue editing in our documentation editor.

### Steps for integration

::::WorkflowBlock
:::WorkflowBlockItem
Click on the Confluence integration icon
:::

:::WorkflowBlockItem
You'll be redirected to our Integrations page -> Click on "Confluence" tab
:::

:::WorkflowBlockItem
Add your Confluence username and the API key created here:[https://id.atlassian.com/manage-profile/security/api-tokens ](https://id.atlassian.com/manage-profile/security/api-tokens)and save it

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/NT6IoLYm9gyHrR-lMOBky_image.png)
:::

:::WorkflowBlockItem
Once integrated, go back to your Archbee page and paste your Document from Confluence:

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/2xnjSFcsklgteQlAmhYIA_image.png)
:::
::::

# Write with AI

- Our AI-powered assistant helps you generate structured content from scratch.
- You maintain full control over the AI-generated content and can edit it as needed.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/EV2FwvZhtEMueZzpX782P_image.png)


[title] Convert a doc to a Category
[path] DOCUMENTS/

## How do I build a document tree?

:::::VerticalSplit{layout="right"}
::::VerticalSplitItem
It's easy-peasy! You can build document trees by a simple drag-and-drop. Click on any document, hold and move it under a different document of your choosing.

You will see that the document you moved is now a child document, whereas the one one above is the parent doc.

With Archbee, you can create a parent doc and nest multiple documents under it.

When you use a document as a parent, we recommend that you add content.&#x20;

If you still want to group documents under Categories, **you should convert a doc to a Category** (which works like a folder - there is no content).

:::hint{type="info"}
You can add as many child documents to a parent **as you want**.&#x20;

We **don't have a limit&#x20;**&#x74;o the number of nested documents.
:::


::::

:::VerticalSplitItem
::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/DbsUFtWJPZcFwy_I9GT0I_category-light.png" darkSrc="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/qUeP-NsjyHhj88iuUCGu1_category-dark.png" size="90" width="560" height="1360" darkWidth="560" darkHeight="1360" position="center" caption="The Archbee User Guide has different sections." showCaption="true"}
:::
:::::

## How to convert a doc to a Category \[Folder]

::::WorkflowBlock
:::WorkflowBlockItem
Click the  `+` to **add** a new document&#x20;
:::

:::WorkflowBlockItem
Click on the **three-dot menu**  `⋮`  to open the Space/Document menu
:::

:::WorkflowBlockItem
Click on **Convert to a category**

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/dUNPQgP_EaxNQCKuQyD7w_create-light.png "Convert doc to category")
:::

:::WorkflowBlockItem
**Add a title** to your category
:::

:::WorkflowBlockItem
Use **drag & drop&#x20;**&#x74;o nest documents under the Category
:::
::::

:::hint{type="danger"}
**❗**

When converting a doc to a category, all of its content will be lost.&#x20;
:::

***

## Fold or expand categories/folders

When you add folders/categories to your documentation site, you may want to keep them folded or expanded, depending on your preferences or style guide you're following.

### How does this work?

By default, a folder/category is **expanded** when you preview the live page after publishing.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/IEEzURPhJ6dENhRzsyrBl_editor-view-light.png "Fold on public")

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/XGon5GgeNRYJXrff9IhI2_docs-view-light.png "Docs site view")

**If you want to fold the folder/category, follow these steps:**

::::WorkflowBlock
:::WorkflowBlockItem
Click on the **three-dot menu&#x20;**&#x6E;ext to the folder/category name
:::

:::WorkflowBlockItem
Click **Make folded by default on public**
:::

:::WorkflowBlockItem
Publish your changes to preview the results
:::
::::

If you wish to go back to expanded view, click **Make expanded by default on public**.


[title] Draft & Reviews System
[path] DOCUMENTS/

*The Review System gives teams control over documentation quality through a dedicated Reviewer role, ensuring all changes are approved before being published.*

***

## Overview

The Review System is an editing mode for writing and managing documentation. When enabled, all document changes go through a structured draft-and-approval flow instead of being applied directly.

An Administrator can enable or disable it per space from **Space Settings → General -> Choose Edit Mode**.&#x20;

![]()

When creating a new space, you can choose which editing mode suits it best — use the Review & Draft System for spaces that require content approval, or keep Free Edit mode for faster, unrestricted editing. This can be changed at any time from the space settings.

Key behaviors at a glance:

- Only one draft can exist per document at any given time.
- Drafts are visible and editable by all users, but only Reviewers can merge or discard them.
- When a space is published, only the **Main** version of a document is published — **never the draft**.

This lets you enforce a review process for public-facing portals while keeping internal team spaces unrestricted for faster edits.

## How to enable the Draft & Reviews System

::::WorkflowBlock
:::WorkflowBlockItem
Open your **Space Dashboard**.
:::

:::WorkflowBlockItem
Navigate to **Space Settings → General**.
:::

:::WorkflowBlockItem
Under the **Edit Mode** section, select your preferred editing mode.
:::
::::

![]()

## Edit, review, and merge documents

Once the Review System is enabled, the editing flow of a document will change. You will now have to create a draft for each doc you want to modify. A document can only have one draft active and will be available for everyone to see and edit.

::::WorkflowBlock
:::WorkflowBlockItem
Go to any document and enter Draft mode by clicking the `Edit Draft` button from the doc options bar

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/ZrhIhqlhVQt7uRM4p7AcV_edit-draft-light.png)
:::

:::WorkflowBlockItem
A draft is created, and now you can start editing the doc. You can see above the doc title that you have 2 versions of the current doc: Original and Draft.&#x20;

Every time you navigate to a doc, you will see the Orginal version. If you want to edit, manually switch to the Draft version

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/1UbDUadFrH1DQjm9ZKK87_orig-draft-light.png)
:::

:::WorkflowBlockItem
While editing a draft, click the `Review` button on the right side of the doc options bar to:

1. View Diff
2. Request Review
3. Review & Merge

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/FRfPvEresLwADgoekDY3O_rev-menu-light.png)
:::

:::WorkflowBlockItem
View Diff - this option will open a new window where you can see all the changes made to the draft compared to the original.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/V-1J6LnnYhR6qFCae-NoI_diff-light.png)
:::

:::WorkflowBlockItem
Request Review - this option will send a notification to the users with Review permissions on this Space. Use this when you completed your work and you need validation from a Reviewer.

If you are a Reviewer and receive this notification, just click on it and it will take you to the mentioned doc.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/MepykmwTI8TLrs8407NAh_rev-notification-light.png)
:::

:::WorkflowBlockItem
Review & Merge - this option is only available to users with Review permissions.

If you are a Reviewer and want to Review & Merge or Discard a Draft, click on this option, and a new window will open with a Diff view of the changes and 2 buttons: Discard Draft and Merge Draft.

Clicking on Discard will delete the Draft and return to Original version

Clicking on Merge the Draft will replace the Original version.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/2fQB8ja2pEQh1nGJwYsgJ_merge-light.png)
:::
::::

## Review and Publish

While Review System is enabled for a Space, a new step is added before you publish.

The Publish button is now replaced with Review & Publish.&#x20;

Review & Publish is a new window that will allow you to review all changes made since the last publish of the Space.&#x20;

Here's how it works:

::::WorkflowBlock
:::WorkflowBlockItem
Documents - here, you will see a list of newly added docs and removed docs

This menu is purely informative, and you can not make any actions here about the documents.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/Hvf_eIO_mo-yhddXL8Qk4_publi-rev-light.png)
:::

:::WorkflowBlockItem
Drafts - this menu shows all docs that have a Draft active.&#x20;

If you have Review permissions, you can Merge the drafts directly from this menu and then publish the Space.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/Tf2jCjYwjfG2N1IIV_T7G_publi-rev-draft-light.png)
:::

:::WorkflowBlockItem
Space Settings - analyse changes made to Space Settings

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/OF-HD5aJ7IlTb2nA8NPBX_publi-rev-settings-light.png)
:::

:::WorkflowBlockItem
Navigate to your published content

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/Ybp1_5GPp7JTbzyY9pt1S_end-rev-light.png)
:::
::::




[title] Space group settings
[path] SPACES/

With **Space group settings**, you can manage settings for multiple spaces at once. This feature allows you to set up configurations for all the spaces in a space group collectively, so you don't have to update each one individually.

## Key features

- **Centralized settings management**
- Manage all settings for spaces within a space group from a single, dedicated section.
- **Automatic sync**
- Any changes made to the space group settings are automatically propagated to all current and new spaces within the group if the sync option is active.
- **Time-saving**
- It reduces the time and effort required to individually update settings for each space - especially beneficial for large documentation sites.

## Customize settings

:::hint{type="success"}
💡[How to create and manage Space Groups](docId:3WvwJduDFhTbA4wz9vJch)
:::

Once you have created a space group, navigate to the `⚙️` button next to your space group, and give it a desired name.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/t1476Qhp4kIJL_c9mfcKA_sgs-light.png "Space group name")

The changes will propagate to all new or existing spaces within a space group.

## Link/unlink your space group settings

By default, on space level, all settings are linked to your space group settings.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/RIJrl_0LLpxlNrCVKkLM8_sgs-unlink-light.png "Linked space group settings")

Click that `🔗` button to unlink if you want to change options per space level.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/M_LkNBATMQEaKrzFnNApY_sgs-link-light.png "Link/unlink button")


[title] SPACES
[path] /


[title] Create a Clone of a Space
[path] SPACES/

For customer-facing documentation, especially developer docs or API docs, **sometimes** you need multiple versions, all available at the same time.

For example, while new customers might be using v2 of your API, some of your existing customers will still be on v1 — so they need to read v1 documentation.

**Spaces Clone&#x20;**&#x69;s a feature to create an identical clone of a space, that you can then rename to v1 and then keep working on each version separately.

Along with hostname paths, with just a few clicks you can set up a system where multiple versions of the documentation are available.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/Eoe180-NPkN4UlrdI4Vxf_clone-light.png "Space Clone")


[title] Import Confluence pages
[path] SPACES/AI External Sources/

You can integrate AI with external Confluence pages. You must set credentials and the URL for a Confluence space from which we will ingest your documentation.

## Setup

- You need to set up an access token and provide it along with your Confluence username in order to authenticate the request. Then click **Connect with Confluence**.

:::hint{type="info"}
You can generate an API token in Atlassian via [this tutorial](https://support.atlassian.com/atlassian-account/docs/manage-api-tokens-for-your-atlassian-account/).
:::

- Follow these steps for each of your spaces separately:

1. Use the base part of your URL: `https://example.atlassian.net/wiki/`
2. You also need the `space key` for the space containing the pages to load as documents. You can find this when you navigate to your space URL e.g.`https://example.atlassian.net/wiki/spaces/{SPACE_KEY}`
3. Then click **Add Link**



![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/2CwHapbIBGKeN-vLALnpr_aiext-confluence-light.png "Import Confluence pages")


[title] HOSTED SPACES
[path] /


[title] AI Addon
[path] SPACES/

## Archbee AI Addon and features

Archbee AI Addon is an out-of-the-box, ready-to-use set of AI features.

With Archbee AI Addon, you will have access to [Ask AI](docId:1tOWnw572B2YbhvcxyZCm), [AI Write Assist](docId:1tOWnw572B2YbhvcxyZCm), [Generate Summary](docId:1tOWnw572B2YbhvcxyZCm), and [Shadow docs](docId:1tOWnw572B2YbhvcxyZCm)  features.

:::ExpandableHeading
### Ask AI

Once you activate Archbee AI Addon, we will create vector representations of your documents in the background.&#x20;

After that, the search function becomes overpowered with the "Ask AI" feature, where your team or customers get to ask natural language questions that have the context of the knowledge in your workspace.

Ask AI is available both for internal and external/published portals. Just click the Search box, ask a question, hit Enter, or click the Ask AI blue bar.

Once you get an answer from our AI, you can:

1. Continue the conversation and ask for more information if the provided answer is not satisfying
2. Use the Sources section at the end of the answer to navigate to the source documents
3. Use the Like/Dislike buttons on the right side to rate the answer - since Archbee AI is still in beta, this will significantly help us evaluate and improve our AI model

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/4Ku8X2ZCM0sJz-K6KzDI8_ask-light.png)
:::

:::::ExpandableHeading
### AI Write Assist

The AI Write Assistant can be used only if you enable the Archbee AI Addon from the Integration page.

**How you can use it:**

1. Open the AI Write Assistant menu(block menu) by clicking the 3 or 6 dots on the left of a paragraph
2. You can now interact with our AI Write Assistant using the chat box, just like ChatGPT.

::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/2yiPkhyBprsp5kpPE_D1C_menuai-light.png)
:::

:::VerticalSplitItem
::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/Md_q4OVB2CftnpvWv5oBX_rewrite-light.png" darkSrc="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/by5rky4iUqZKGjmn7pii5_rewrite-dark.png" size="98" width="1896" height="1896" darkWidth="1896" darkHeight="1896" position="center" showCaption="false"}


:::
::::

**AI Write Assistant options**:

1. **Fix grammar and spelling** -> This will open the chat box and will provide an AI-verified version of the text inside the paragraph. You can continue chatting and improving this version in the same chat box
2. **Rewrite with AI&#x20;**-> This will open an empty chat box, with the context of the text inside the paragraph, and you can perform different operations using our AI(translate, summarize, expand, etc.)
3. **Make it shorter** -> This will open the chat box and will provide a summarised version of your paragraph content. You can continue chatting with our AI to improve the content

**Chat box options**

Once you reach the AI Write Assistant chat box, you can perform multiple operations:

1. Use it to generate content using our AI, just like you do with chat GPT
2. After you get your desired answer, use the buttons below the answer to:
   - **Accept & Replace** - replace the content of your paragraph with the current AI answer
   - **Try again** - Resend the same query to AI
   - **Dismiss** - close the AI chat box and delete the conversation
3. Use the 3 dots menu on the right side of each answer to:
   - **Copy to clipboard**
   - **Accept & Replace** previous responses
4. Change tone: use our Change Tone dropdown to select the tone in which our AI will respond
5. Use our shortcut buttons to send queries to our AI: **Summarize**, **Make it longer**, etc.
:::::

:::ExpandableHeading
### Generate Summary

Summary generation is an AI feature included in the Archbee AI addon. Using Generate Summary, our AI will summarize your article briefly and post it at the beggining of the article, just below the title. This is useful when you have complex articles and consider users may benefit from a short summary at the beginning.

Once a summary is generated, you can Regenerate it, Remove it, or manually Edit the summary by just clicking inside the text box.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/hJ1E_z9TJQPwvy8G5_8QC_summary-light.png)
:::

::::::ExpandableHeading
### Shadow Docs

Shadow Docs Folder is a feature used for keeping documents private and, at the same time, sending them to our AI Search function for indexing.

Here's how it works:

1. Create the **Shadow docs folder** inside of your space;
2. Add your content there. Here are some potential use cases:
   - You have `code files` that you want to keep private from your readers, but you also want the Ask AI Search to be able to respond to your users based on those code files;
   - You hav&#x65;*&#x20;draft\&bulk notes/docs/articles/etc.* that are not in a readable or presentable form, and they are not suited to be presented to users, but still, the information inside is valuable, and you want the Ask AI Search to be able to answer to your users;
3. All docs inside a Shadow Docs folder will be sent to the Ask AI Search to be indexed. This means that if you publish your Space, your users will not see these files, but the AI Search Assistant will have their context and can provide answers based on them;

:::hint{type="info"}
The files inside the Shadow Docs will **NOT** be shown to users when you publish your Space. This applies for both *Publish to Preview* and *Publish to Production;*
:::

**Possible use cases:**

- You have code files that you want to keep private from your readers, but you also want the AI Search to be able to respond to your users based on those code files;
- You have draft\&bulk notes/docs/articles/etc. that are not in a readable or presentable form, and they are not suited to be presented to users, but still, the information inside is valuable, and you want the AI Search to be able to answer to your users;

**How to enable Shadow Docs**

:::::WorkflowBlock
:::WorkflowBlockItem
Open Space menu by clicking the 3 vertical dots  (  :FontAwesome[]{icon="fa-solid fa-ellipsis-vertical"}), near the Settings (:FontAwesome[]{icon="fa-solid fa-gear"})
:::

:::WorkflowBlockItem
Click on **Create Shadow Docs folder**&#x20;

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/ZMWMgk_v4yyD3Z7NrWK8J_create-shadow-light.png)
:::

::::WorkflowBlockItem
Add required docs to ***Shadow Docs*** folder.

The **Shadow Docs** folder will act like a regular folder:

- You can **drag\&drop&#x20;**&#x66;iles to it;
- You can **create docs** directly inside from the ➕ button near it's name;
- You can **archive** it if you no longer need it;

:::hint{type="info"}
**🛟  We covered you!**

If you archive it, you can re-create the Shadow Docs folder from the Space's menu (3 dots menu), or to **recover** the old folder from archives.
:::

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/ymaxwRdqvs1bHgjDci1nd_shadow-light.png" darkSrc="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/_aSztXLFTPqroD1SfU7KA_shadow-dark.png" size="98" width="1896" height="1896" darkWidth="1896" darkHeight="1896" position="center" showCaption="false"}
::::
:::::
::::::

## Enable / Disable Archbee AI Addon

::::WorkflowBlock
:::WorkflowBlockItem
Go to your [workspace settings](https://app.archbee.com/settings/team-integrations) and select, below th&#x65;**&#x20;AI Addon**, Enabled or Disabled, and click the Save button.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/b-lBRIL5a1O-0TLiLY_Gt_configuration-light.png)
:::

:::WorkflowBlockItem
Disable Archbee AI for a Specific space -> If you have sensitive data or private docs in one or more spaces, and you want to keep them private (while other Spaces are integrated with Archbee AI), go to Space Settings and deactivate the integration.

The Space that will have Archbee AI deactivated from Space Settings will not be indexed, and the content inside this space will not be available via Ask AI or AI Write Assistant features.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/FXs3HMCHD9VB3cQukdTGW_ai-settings-light.png)
:::
::::

## Tokens

You get an included number of tokens with your AI Addon, as mentioned on the [pricing page](https://www.archbee.com/pricing) in the FAQ section at the bottom. These tokens are consumed every time you use our AI features based on the volume of text processed.

We will charge for the extra consumed tokens if you exceed the included tokens.
You can see the consumption and extra costs in Organization Settings.
You can set limits for your extra consumption. If the limit is hit, we will deactivate AI for you.

## Security and Privacy

We use Microsoft Azure OpenAI API service for all LLM & AI features. The content in your workspace and queries will be sent to Azure OpenAI API.&#x20;

Read Microsoft’s [data privacy policy](https://learn.microsoft.com/en-us/legal/cognitive-services/openai/data-privacy).

:::hint{type="info"}
Extract from Microsoft's data privacy policy(as presented on 22 Sept 2023):

*Your prompts (inputs) and completions (outputs), your embeddings, and your training data:*
**
*are NOT available to other customers.*
*are NOT available to OpenAI.*
*are NOT used to improve OpenAI models.*
*are NOT used to improve any Microsoft or 3rd party products or services.*
*are NOT used for automatically improving Azure OpenAI models for your use in your resource (The models are stateless, unless you explicitly fine-tune models with your training data).*
*Your fine-tuned Azure OpenAI models are available exclusively for your use.*
*The Azure OpenAI Service is fully controlled by Microsoft; Microsoft hosts the OpenAI models in Microsoft’s Azure environment and the Service does NOT interact with any services operated by OpenAI (e.g. ChatGPT, or the OpenAI API).*
:::


[title] How to set up logo and accent colors
[path] SPACES/

Brand and customize your docs website using the appearance settings.&#x20;

To reach them, follow these steps:

::::WorkflowBlock
:::WorkflowBlockItem
Choose a space and click on the settings ( ⚙️ )
:::

:::WorkflowBlockItem
Click on **Apperance** tab fro&#x6D;*&#x20;Shared Public Docs Settings&#x20;*&#x67;roup
:::

:::WorkflowBlockItem
Here you will find the banding options, like:

- [Accent Color](docId:2q8gsBL4jt42EKVYrITCd)
- [Logo](docId:2q8gsBL4jt42EKVYrITCd)
- [Favicon](docId:2q8gsBL4jt42EKVYrITCd)
- [Logo URL Redirect](docId:2q8gsBL4jt42EKVYrITCd)&#x20;
- along with other options for the portal template
:::
::::

## How to set up a Logo

Go to the **Appearance** tab and upload your Logo. The Logo should be &#x61;**&#x20;.png&#x20;**&#x69;mage with a **3:1 aspect ratio**.

*Transparent background is recommended for clarity.*

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/__lPBM0R_CT69JkxxDsEV_logo-light.png)

## How to set up an accent color

Go to **Appearance** tab and set your **accent color** (light/dark mode) from here:

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/UOES9NgkaQi_K-7i-zdAB_accent-light.png)

## How to set up Favicon

Go to **Appearance** tab and upload your **Favicon**.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/iDi5WN-f4pNnDJTOas6Lt_fav-light.png)

## Logo redirect URL

If you want your Logo to be **redirected to a custom page**, you can use the following option:

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/Q6seIBxe5rNPmfhd1BkJn_redirect-light.png)


[title] Lists
[path] EDITOR/Editor Blocks/

Archbee has three types of lists:

::::LinkArray{contentSource="CUSTOM"}
:::LinkArrayItem{headerType="COLOR" headerColor="#D8E5F5"}
- [Bulleted lists](docId\:D02_VQ5GNbt-SUeqoTQ3g)
:::

:::LinkArrayItem{headerType="COLOR" headerColor="#4283c7"}
1. [Numbered lists](docId\:D02_VQ5GNbt-SUeqoTQ3g)
:::

:::LinkArrayItem{headerType="COLOR" headerColor="#2166AE"}
- [ ] [Checklists](docId\:D02_VQ5GNbt-SUeqoTQ3g)
:::

:::LinkArrayItem

:::
::::

## Bulleted lists

You can add a bulleted list by typing `-` (dash) and space at the beginning of a new row.

Here's one:

- a bulleted list item
- and the second one
  - and an indented one
    - a super indented one
- back to square 1

## Numbered lists

Numbered lists work exactly like bulleted lists, except you can add them by typing `1.` (one and dot) at the beginning of a new row.

Here's one:

1. a numbered list
   1. going deeper
   2. stay the course
      1. Mariana Trench? Don't do this...
2. going back
3. end of story



:::hint{type="info"}
<font color="#2166ae">**PR**</font><font color="#2166ae">**O TIP** </font>😎

Alternatively, you can add images inside both **Bulleted lists** or **Numbered lists&#x20;**&#x62;y creating a list of items and typing / inside it. This will let you add an image to a list item together with text:

1. type / inside a list item

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/PGbow5INWdycSKcDtANf9_bullet-light.png" darkSrc="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/1_6Mam8gbiiMA8h_cUZXY_bullet-dark.png" size="100" width="1520" height="572" darkWidth="1520" darkHeight="572" position="center" caption="Add image to list" showCaption="true" indent="2"}

2. Embed or upload your file inside the list and continue
:::

## Checklists

:::hint{type="warning"}
Availavle only in the editor, not clickable in public spaces
:::

Checklists work precisely like the other two, except you can check items on or off.&#x20;
You can add a checklist by typing `[]` in the editor or clicking the checklist icon in a new row.

Here's one:

- [x] 2019
- [x] 2020
- [x] 2021
- [x] Q1 WIP
- [ ] Q2 WIP

## Important

:::hint{type="warning"}
Above, we've shown you how to add lists but now you wonder *"How do I exit the list?"...&#x20;***You exit the list by hitting enter twice at the end of the list item**.

The first enter introduces a new empty list item and then the second enter removes the empty list item and moves on to a new paragraph.
:::

We feel this is important to share because usually all editors (from Microsoft Word to Google Docs) work this way but many people are unaware and it seems like a hard UX not knowing this.

## Indenting

To indent a list, press `TAB` on a new list item. To de-indent a list, press `SHIFT+TAB`.&#x20;



***

::::LinkArray{contentSource="CUSTOM"}
:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"}
:FontAwesome[]{icon="fa-solid fa-cubes"} &#x20;**&#x20;Find other blocks**

Discover new ways and blocks to create stunning and functional documentation pages.

[Check out all blocks](docId:6B0VTQTVUnMP93e-SZQ2p)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"}
:FontAwesome[]{icon="fa-solid fa-headset"}**&#x20; Need help?  ⬇️**

Use the **blue** **chat bubble&#x20;**&#x66;rom bottom right corner.

Or try **AI Chat** (from search box) for quick answers.
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"}
:FontAwesome[]{icon="fa-solid fa-hand-holding-heart"}**&#x20;  Your opinion matters**

Use the below feedback form, anonymously.

Or ask a question in **Q\&A section** and our team or AI will give you a solution.
:::
::::


[title] Templates
[path] DOCUMENTS/

With Archbee, you get a few out-of-the-box templates for **Engineering**, **Marketing**, **Product**, **Sales**, or **Executive**.

## How to use it?

Templates and your custom templates will show up whenever you add a new document.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/n0kJNM9-jQzL6kg14RJsa-20250923-101507.gif)

When you click to use a template, you can preview its content and decide whether you want to use it.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/9karLFreJ9_3CF3adkZEM-20250923-101845.gif)

## Manage Templates

Additionally, you can create your own templates for your team.&#x20;

To do so:

:::::WorkflowBlock
:::WorkflowBlockItem
Go to **Reusables**.
:::

:::WorkflowBlockItem
Select **Templates** tab.

From here, you can delete older templates, to manage who have acces to them or to see where are them used.
:::

:::WorkflowBlockItem
Hit the **Add a new template** button.&#x20;
:::

::::WorkflowBlockItem
Okay, now it's time to just go ahead and write your stuff!

You can also use some other features here, like:

- All [Editor Blocks](docId:6B0VTQTVUnMP93e-SZQ2p) available in main editor
- [Find & Replace](docId\:RGgEfgBAD2HfM31VTe6H6)&#x20;
- [AI Write Assist](docId:1tOWnw572B2YbhvcxyZCm)&#x20;

:::hint{type="info"}
🧠  **Remember**&#x20;

Make sure to save the template once you're done with your writing!
:::
::::
:::::

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/oDNd-yKl8TD_vAZFbu8Xe-20250923-103339.gif)

## Available Templates

Here's a full list of system templates:

::::LinkArray{contentSource="CUSTOM"}
:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/2Qj5BpVNVKj_FVqsi_SoD-20250923-105115.png"}
[Tech Specification](docId\:ATXSB_XJpocZv67Hl_KHm)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/L6pXly6oXxGzmfETZA9Jp-20250923-105157.png"}
[Docker cheatsheet](docId\:dz7GCTWtNWnxT71XHmCqo)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/XcAFqLdMrpR53N1tFeHJC-20250923-105234.png"}
[Launch checklist](docId\:zxnQbSS4ic0eZQsDU-nU7)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/-sCcAHNe_RRsmF-Tk6qgN-20250923-105305.png"}
[Client Kickoff](docId:9mCBTugxqvzZbCrxfEKEk)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/5aqe3rQERlRrsrPAlsGQx-20250923-105337.png"}
[Meeting Notes](docId\:X0dNazoSY09wjIovGd6bq)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/nzH3uxOfXgX8dZ0QA_5-n-20250923-105549.png"}
[Project Proposal](docId\:QRW5jJTk_SlF8ucnPVEr8)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/icyWijv_x0WrCF3j1DG8A-20250923-105821.png"}
[Project Retrospective](docId\:Zjiy1VMRCmsP_IxQDaQlO)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/YYykwwE_buhGSzkxSqCve-20250923-105856.png"}
[Post mortem](docId:06ulxXH68hEKMmNu41WEM)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/8PjlTR8mgSmF0t3GgZ32i-20250923-105928.png"}
[Investor Letter](docId\:nfAL9NcoUOLnFvvsBftNh)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/Dmr6XXYPxaBDFGTyW41eJ-20250923-110033.png"}
[Quarterly OKRs](docId\:edp9oOt0OHqY88iQqippZ)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/gHeolvmJ7x6qH-TOqntVm-20250923-110106.png"}
[Monthly Sales Recap](docId:4UBqCSanCBdq3jYXRz9XJ)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/EhicB51sJGKwsrqch8_uu-20250923-110152.png"}
[Marketing styleguides](docId\:TmSr9iUYIX23IK97v4Aq_)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/rHU6KwRnfat2C3JJgEG4f-20250923-110222.png"}
[User persona](docId\:xwCTs6yiiXcoeNqA2xyLM)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/YW40vM7NEAv-WpLpBwG53-20250923-110256.png"}
[Competitor watch](docId\:vGqYtEokj52mphUkViUut)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/igNgRDt06IeXAa-HCnP4Z-20250923-110330.png"}
[Social Media Policy](docId:6xyptXGpLyzZwZ_HWd4Bg)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/OeDFGrb1L6WJFjC21uNo8-20250923-110405.png"}
[Marketing project](docId\:aySD_pG2imNxsMbXbs2xL)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/vdRKeGx1-fHD2G5pbRxIE-20250923-110437.png"}
[SEO Checklist](docId\:JOvqb7Vxw_7XVkfYZAJ6n)&#x20;
:::
::::


[title] Organization Export
[path] PUBLIC API/Organization/

{
  "id": "Y_rWQzgYylYU2Pef1qTV1",
  "type": "api-oas-v2",
  "data": {
    "method": "GET",
    "url": "https://api.archbee.com/api/public-api/team/export",
    "servers": [
      {
        "url": "https://api.archbee.com/api/public-api/team/export",
        "description": "Archbee API Server"
      }
    ],
    "name": "Organization Export",
    "description": "<p>Export assets, spaces with documents, team and user data from Archbee given <code>teamId</code>. Use <code>--output &#x3C;export_file_path></code></p>",
    "contentType": "application/json",
    "request": {
      "pathParameters": [],
      "headerParameters": [
        {
          "name": "accept",
          "type": "string",
          "kind": "optional",
          "description": "Generated from available response content types",
          "enum": [
            "application/zip",
            "application/json"
          ],
          "default": "application/zip"
        },
        {
          "kind": "required",
          "name": "Content-Type",
          "type": "string",
          "example": "application/json",
          "description": ""
        }
      ],
      "queryParameters": [],
      "bodyDataParameters": [
        {
          "kind": "required",
          "name": "body",
          "type": "object",
          "description": "",
          "schema": [
            {
              "name": "teamId",
              "kind": "required",
              "type": "string",
              "description": "Team id for which the export is computed.",
              "example": "21-character__string0"
            },
            {
              "name": "exportThisSpaceOnly",
              "kind": "optional",
              "type": "boolean",
              "description": "<p>OPTIONAL, use this if you want to export data only from the space with docSpaceId.</p>",
              "example": true
            },
            {
              "name": "exportAsLink",
              "kind": "optional",
              "type": "boolean",
              "description": "<p>OPTIONAL, use this if you want to get a link to the zip archive.</p>",
              "example": true
            }
          ],
          "isExpanded": true
        }
      ],
      "formDataParameters": [],
      "oAuthParameters": [
        {
          "id": "bearerAuth",
          "name": "bearerAuth",
          "kind": "optional",
          "type": "http",
          "description": "<p>Requires the <code>Authorization</code> header in the form <code>Authorization: Bearer {base64(docSpaceId~apiKey)}</code> Where the token is base64 encoding of docSpaceId, tilde, and apiKey.</p>",
          "scheme": "bearer"
        }
      ],
      "cookieParameters": []
    },
    "responses": [
      {
        "statusCode": "200",
        "description": "Successful export",
        "jsonExample": "",
        "isExpanded": true
      },
      {
        "statusCode": "400",
        "description": "Invalid request",
        "jsonExample": "",
        "isExpanded": true,
        "schema": [
          {
            "kind": "optional",
            "type": "object",
            "description": "",
            "customType": "Response400",
            "schema": [
              {
                "name": "status",
                "kind": "optional",
                "type": "string<OK | Not OK>",
                "description": "Response Status",
                "example": "Not OK",
                "enum": [
                  "OK",
                  "Not OK"
                ]
              },
              {
                "name": "messages",
                "kind": "optional",
                "type": "array",
                "description": "Array of messages",
                "example": "[\"Some error message\"]",
                "itemType": "string",
                "customType": "string[]",
                "itemExample": "Some error message",
                "itemDefault": ""
              }
            ],
            "modelRef": "#/components/schemas/Response400",
            "isExpanded": true
          }
        ]
      }
    ],
    "hasXCodeSamples": false
  },
  "children": [
    {
      "text": ""
    }
  ]
}
[title] Insights
[path] HOSTED SPACES/

![](https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-6dQ5fyDRhdNobilfF-2jB-20241021-202403.png)

The Insights tab provides detailed Analytics data for your published sites, helping you track user engagement and optimize content. This guide will walk you through each of the features in the Insights tab so you can fully interpret and analyze the data.

## Insights Tab components

### Traffic

The **Traffic** section offers a summary of how users are interacting with your site. Key metrics include:

- **Total Views :&#x20;**&#x49;dentify trends in total views
- **Average Time** **:** Assess user engagement
- **Unique Visits** **:&#x20;**&#x4D;onitor unique visits
- **Bounce Rate :&#x20;**&#x55;nderstand the Bounce Rate

These metrics help you evaluate your site’s performance and user engagement and compare data over time.

[Get more info about Traffic tab](docId\:O2ZFFL4YUphSHuEUGt_63)&#x20;

### Document feedback

The **Document feedback** tab is designed to help you gather and track input from visitors who read your public documentation. This feature allows users to provide feedback in the form of votes(Thumbs Up/Thumbs Down) and, optionally comments on each document. It enables you to understand how well your content is meeting user needs and where improvements may be needed.

[How Document Feedback works](docId:-0t_hWhL6Niet6VsDwOaK) @document f

### Search

The **Search** section tracks search queries enter by users on your published site. This feature gives insight into the types of information users are actively seeking, helping you understand their needs and behaviors.

[Get more info about Search analytics](docId\:qQKnaTo9ji8FuJYJDxYPP)&#x20;

### Ask Ai

The **Ask AI&#x20;**&#x74;ab tracks all historical queries made through the [Ask AI](docId:1tOWnw572B2YbhvcxyZCm) feature. This provides an overview of common or recurring questions users ask when they interact with the AI, helping you fine-tune the system's responses.

:::hint{type="warning"}
AI addon is required for this feature
:::

[Get more info about Ask AI analytics](docId\:o3yJYz9BIFWu6bow6t7ri)&#x20;

### Questions & answers

Th&#x65;**&#x20;Questions & Answers&#x20;**&#x74;ab tracks all historical conversations made through the [Questions & Answers Section](docId\:f_25pN_k5w_obW2C0qVxg)  feature. This provides an overview of the questions being asked by users(internal/external) on your docs.

:::hint{type="warning"}
QnA addon is required for this feature
:::

[Get more details about Questions & Answers analytics](docId:5aLRX8uIS-Q7f4tkr7T5z)&#x20;


[title] SEO Meta Controls
[path] HOSTED SPACES/

To improve SEO performance, you can control the SEO meta attributes of each document.

Each document has specific inputs for the meta URL Key, Title, Description, and Image.

The new controls are not required. If you don't set them, we'll generate what we can from the document name.

## Permalinks and SEO settings

These options are at the document level. So you need to click on the three dots (**&#x20;⋮** ) on the top right side and pick SEO Meta Controls.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/AC0SNoK4w8-ZbX0jGWJeB_seo-option-light.png)

Add a relevant title, change the URL, write a meta description or upload an image for previews.

- **URL KEY** - the URL path
- **Title** - The title can be different than the title of the document. This is where you can optimize for SEO keywords.
- **Description** - the Meta Description is usually shown on the search engine results page.
- **Preview Image** - the image used for preview when sharing the links.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/lplvN8bK-cF7S_5FKakM9_seo-modal-light.png "Archbee SEO meta controls")

## Indexable by search engine

In the Space settings -> General tab, you will see the option to turn off the `noindex `attribute.

By default, the `Indexable by search engines (if public)` is turned on, but you can disable it and restrict search engine crawlers from indexing your website.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/UywnIdjtSY_I0oxudYwGj_seo-search-light.png "Indexable by search engines")






[title] Ask AI
[path] HOSTED SPACES/Insights/

:::hint{type="warning"}
AI addon is required for this feature
:::

### Data Visualization:

The Ask AI historical conversations are displayed visually in the chart allowing you to observe the trends over time. This chart helps track the frequency and types of questions users are asking the AI, understanding user needs and common topics in interest.

### Search query history table:

The Ask AI tab provides a detailed table view of historical AI interactions. This table includes the following key columns:

- **Search Query** - Display the specific question the user entered when interacting with the AI
- **Replies&#x20;**- Shows the AI-generated responses provided to each user query
- **Up Votes** - Indicates the number of times users positively rated the AI’s response,
- **Down Votes -&#x20;**&#x49;ndicates the number of times users negatively rated the AI’s response

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/G0MNYSshPTYSr8q0ulEBG_image.png)

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/_HSCGVCLXVsNPO4PJgnFP_image.png)


[title] Publish a Space to Domain
[path] HOSTED SPACES/

After [setting up a domain for your space](docId\:PhPdT07jvT42ScfHSTlHu), `publish mode` gets activated automatically.

The docs site is generated on the fly when you publish. We use a global CDN, so your documentation site is faster, providing a better user experience and SEO.

Publish mode also activates clean URLs removing any randomly generated components in the URLs that you see in the preview.

You can control the [SEO Meta Controls](docId\:E-aARn44KIsrXycjGAMZg) for each document if that's what you want.


[title] Import Content
[path] PUBLIC API/Doc/

{
  "id": "JxbbvvREEQVKJsGJUUmzK",
  "type": "api-oas-v2",
  "data": {
    "method": "POST",
    "url": "https://api.archbee.com/api/public-api/import-content",
    "servers": [
      {
        "url": "https://api.archbee.com/api/public-api/import-content",
        "description": "Archbee API Server"
      }
    ],
    "name": "Import Content",
    "description": "<p>Create new Doc from imported markdown file. In case of zip file, create a new docTree and keeps archived tree structure.</p>",
    "contentType": "application/json",
    "request": {
      "pathParameters": [],
      "headerParameters": [
        {
          "name": "accept",
          "type": "string",
          "kind": "optional",
          "description": "Generated from available response content types",
          "enum": [
            "application/json"
          ],
          "default": "application/json"
        },
        {
          "kind": "required",
          "name": "Content-Type",
          "type": "string",
          "example": "multipart/form-data",
          "description": "",
          "default": "multipart/form-data"
        }
      ],
      "queryParameters": [],
      "bodyDataParameters": [],
      "formDataParameters": [
        {
          "kind": "required",
          "name": "file",
          "type": "file",
          "example": "upload file",
          "description": "<p>Markdown file (.md) or archive (.zip) containing multiple markdown files.</p>",
          "default": "@markdowns.zip",
          "format": "binary"
        },
        {
          "kind": "optional",
          "name": "type",
          "type": "string<markdown>",
          "example": "markdown",
          "description": "Type of import file. Only markdown supported for now on this route.",
          "default": "markdown",
          "enum": [
            "markdown"
          ]
        }
      ],
      "oAuthParameters": [
        {
          "id": "bearerAuth",
          "name": "bearerAuth",
          "kind": "optional",
          "type": "http",
          "description": "<p>Requires the <code>Authorization</code> header in the form <code>Authorization: Bearer {base64(docSpaceId~apiKey)}</code> Where the token is base64 encoding of docSpaceId, tilde, and apiKey.</p>",
          "scheme": "bearer"
        }
      ],
      "cookieParameters": []
    },
    "responses": [
      {
        "statusCode": "200",
        "description": "Import OK status",
        "jsonExample": "",
        "isExpanded": true,
        "schema": [
          {
            "kind": "optional",
            "type": "object",
            "description": "Import OK status",
            "schema": [
              {
                "name": "status",
                "kind": "optional",
                "type": "string<OK>",
                "description": "Response Status",
                "example": "OK",
                "enum": [
                  "OK"
                ]
              },
              {
                "name": "data",
                "kind": "optional",
                "type": "object",
                "description": "",
                "example": "",
                "schema": [
                  {
                    "name": "docId",
                    "kind": "optional",
                    "type": "string",
                    "description": "<p>Created Doc id (first doc in case of archive tree).</p>",
                    "example": "21-character__string0"
                  }
                ]
              }
            ],
            "isExpanded": true
          }
        ]
      },
      {
        "statusCode": "400",
        "description": "Invalid request",
        "jsonExample": "",
        "isExpanded": true,
        "schema": [
          {
            "kind": "optional",
            "type": "object",
            "description": "",
            "customType": "Response400",
            "schema": [
              {
                "name": "status",
                "kind": "optional",
                "type": "string<OK | Not OK>",
                "description": "Response Status",
                "example": "Not OK",
                "enum": [
                  "OK",
                  "Not OK"
                ]
              },
              {
                "name": "messages",
                "kind": "optional",
                "type": "array",
                "description": "Array of messages",
                "example": "[\"Some error message\"]",
                "itemType": "string",
                "customType": "string[]",
                "itemExample": "Some error message",
                "itemDefault": ""
              }
            ],
            "modelRef": "#/components/schemas/Response400",
            "isExpanded": true
          }
        ]
      }
    ],
    "hasXCodeSamples": false
  },
  "children": [
    {
      "text": ""
    }
  ]
}
[title] Discard suggestion document
[path] PUBLIC API/Suggest Change/

{
  "id": "fBOP3xJzK9_3X1saAyyB0",
  "type": "api-oas-v2",
  "data": {
    "method": "POST",
    "url": "https://api.archbee.com/api/public-api/suggest-change/discard",
    "servers": [
      {
        "url": "https://api.archbee.com/api/public-api/suggest-change/discard",
        "description": "Archbee API Server"
      }
    ],
    "name": "Discard suggestion document",
    "description": "<p>Discard and delete a suggestion document without merging it into the base document. The suggestion document must have a docId starting with 'SUGGEST-'.</p>",
    "contentType": "application/json",
    "request": {
      "pathParameters": [],
      "headerParameters": [
        {
          "name": "accept",
          "type": "string",
          "kind": "optional",
          "description": "Generated from available response content types",
          "enum": [
            "application/json"
          ],
          "default": "application/json"
        },
        {
          "kind": "required",
          "name": "Content-Type",
          "type": "string",
          "example": "application/json",
          "description": ""
        }
      ],
      "queryParameters": [],
      "bodyDataParameters": [
        {
          "kind": "required",
          "name": "body",
          "type": "object",
          "description": "",
          "schema": [
            {
              "name": "docId",
              "kind": "required",
              "type": "string",
              "description": "<p>The ID of the suggestion document to discard. Must start with 'SUGGEST-'.</p>",
              "example": "SUGGEST-21character_string"
            }
          ],
          "isExpanded": true
        }
      ],
      "formDataParameters": [],
      "oAuthParameters": [
        {
          "id": "bearerAuth",
          "name": "bearerAuth",
          "kind": "optional",
          "type": "http",
          "description": "<p>Requires the <code>Authorization</code> header in the form <code>Authorization: Bearer {base64(docSpaceId~apiKey)}</code> Where the token is base64 encoding of docSpaceId, tilde, and apiKey.</p>",
          "scheme": "bearer"
        }
      ],
      "cookieParameters": []
    },
    "responses": [
      {
        "statusCode": "200",
        "description": "Suggestion successfully discarded",
        "jsonExample": "",
        "isExpanded": true,
        "schema": [
          {
            "kind": "optional",
            "type": "object",
            "description": "",
            "schema": [
              {
                "name": "status",
                "kind": "optional",
                "type": "string",
                "description": "",
                "example": "OK"
              }
            ],
            "isExpanded": true
          }
        ]
      },
      {
        "statusCode": "400",
        "description": "Bad Request",
        "jsonExample": "",
        "isExpanded": true,
        "schema": [
          {
            "kind": "optional",
            "type": "object",
            "description": "",
            "customType": "Response400",
            "schema": [
              {
                "name": "status",
                "kind": "optional",
                "type": "string<OK | Not OK>",
                "description": "Response Status",
                "example": "Not OK",
                "enum": [
                  "OK",
                  "Not OK"
                ]
              },
              {
                "name": "messages",
                "kind": "optional",
                "type": "array",
                "description": "Array of messages",
                "example": "[\"Some error message\"]",
                "itemType": "string",
                "customType": "string[]",
                "itemExample": "Some error message",
                "itemDefault": ""
              }
            ],
            "modelRef": "#/components/schemas/Response400",
            "isExpanded": true
          }
        ]
      }
    ],
    "hasXCodeSamples": false
  },
  "children": [
    {
      "text": ""
    }
  ]
}
[title] External Links
[path] HOSTED SPACES/

External links are a way to wire your current space with different external resources like, Home, Sign Up page, etc.

They show up in the top right corner if any are set on the current space.

## How to set up External Links

::::WorkflowBlock
:::WorkflowBlockItem
Click on the gear icon ⚙️  for settings, then go to the **External Links** tab, under **Space Connections** section
:::

:::WorkflowBlockItem
Start building the External Links:

1. Add a Button label (e.g., Sign Up, Home)
2. Add Button URL
3. Click the blue <font color="#2166ae">**+ Add Button**</font>;
:::

:::WorkflowBlockItem
Repeat the add the process, until you add all your desired External Links
:::

:::WorkflowBlockItem
Exit the Space Settings window, and publish the space, and they'll be propagated
:::
::::

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/TiTlExisMLyRLfY3EvOQA_image.png)

Once published you will be able to see the changes on public spaces. Here's how it looks for your readers:

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/qBE1-E4PnlqNTmOdweTtP_external-show-light.png "External Links view on Stripey template")


[title] Merge suggestion into main document
[path] PUBLIC API/Suggest Change/

{
  "id": "YQp2pQNcBHD5ieXbBiw4Z",
  "type": "api-oas-v2",
  "data": {
    "method": "POST",
    "url": "https://api.archbee.com/api/public-api/suggest-change/merge",
    "servers": [
      {
        "url": "https://api.archbee.com/api/public-api/suggest-change/merge",
        "description": "Archbee API Server"
      }
    ],
    "name": "Merge suggestion into main document",
    "description": "<p>Merge a suggestion document into the base document. The suggestion document must have a docId starting with 'SUGGEST-'.</p>",
    "contentType": "application/json",
    "request": {
      "pathParameters": [],
      "headerParameters": [
        {
          "name": "accept",
          "type": "string",
          "kind": "optional",
          "description": "Generated from available response content types",
          "enum": [
            "application/json"
          ],
          "default": "application/json"
        },
        {
          "kind": "required",
          "name": "Content-Type",
          "type": "string",
          "example": "application/json",
          "description": ""
        }
      ],
      "queryParameters": [],
      "bodyDataParameters": [
        {
          "kind": "required",
          "name": "body",
          "type": "object",
          "description": "",
          "schema": [
            {
              "name": "docId",
              "kind": "required",
              "type": "string",
              "description": "<p>The ID of the suggestion document to merge. Must start with 'SUGGEST-'.</p>",
              "example": "SUGGEST-21character_string"
            }
          ],
          "isExpanded": true
        }
      ],
      "formDataParameters": [],
      "oAuthParameters": [
        {
          "id": "bearerAuth",
          "name": "bearerAuth",
          "kind": "optional",
          "type": "http",
          "description": "<p>Requires the <code>Authorization</code> header in the form <code>Authorization: Bearer {base64(docSpaceId~apiKey)}</code> Where the token is base64 encoding of docSpaceId, tilde, and apiKey.</p>",
          "scheme": "bearer"
        }
      ],
      "cookieParameters": []
    },
    "responses": [
      {
        "statusCode": "200",
        "description": "Suggestion successfully merged",
        "jsonExample": "",
        "isExpanded": true,
        "schema": [
          {
            "kind": "optional",
            "type": "object",
            "description": "",
            "schema": [
              {
                "name": "status",
                "kind": "optional",
                "type": "string",
                "description": "",
                "example": "OK"
              }
            ],
            "isExpanded": true
          }
        ]
      },
      {
        "statusCode": "400",
        "description": "Bad Request",
        "jsonExample": "",
        "isExpanded": true,
        "schema": [
          {
            "kind": "optional",
            "type": "object",
            "description": "",
            "customType": "Response400",
            "schema": [
              {
                "name": "status",
                "kind": "optional",
                "type": "string<OK | Not OK>",
                "description": "Response Status",
                "example": "Not OK",
                "enum": [
                  "OK",
                  "Not OK"
                ]
              },
              {
                "name": "messages",
                "kind": "optional",
                "type": "array",
                "description": "Array of messages",
                "example": "[\"Some error message\"]",
                "itemType": "string",
                "customType": "string[]",
                "itemExample": "Some error message",
                "itemDefault": ""
              }
            ],
            "modelRef": "#/components/schemas/Response400",
            "isExpanded": true
          }
        ]
      }
    ],
    "hasXCodeSamples": false
  },
  "children": [
    {
      "text": ""
    }
  ]
}
[title] Template 1
[path] HOSTED SPACES/Custom Landing Page/Landing page templates/

:::hint{type="info"}
This is a white-label template. To make it match your brand and style you need to do further customisations on the provided template
:::

### How it looks:

Use the below link to see what the white-label template looks like. Keep in mind that every color/logo/placeholder can be customized to match your style & branding.

[https://vpft1m.csb.app/](https://vpft1m.csb.app/)

### Custom code files:

:::hint{type="info"}
Tip: Use the :FontAwesome[]{icon="fa-solid fa-copy"} Copy button on the top-right of the code editor to copy all code
:::

We added the custom code for you to use in the code editor below. See how to use it [here](docId\:x0t9gO5mazn2uKSgR03X3)

:::CodeblockTabs
Index.html

```html
<!-- START Include headers -->
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
/>
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
/>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"
  crossorigin="anonymous"
></script>
<!-- END Include headers-->

<!-- START NOT NEEDED -->
<link rel="stylesheet" href="/style.css" />
<script src="/script.js"></script>
<!-- END NOT NEEDED -->

<!-- START Landing page -->
<div class="body">
  <header class="header">
    <div class="search-bar">
      <div class="search-form">
        <input class="form-control" type="text" placeholder="Search..." />
        <button class="search-button">
          <span class="material-symbols-outlined"> search </span>
        </button>
      </div>
      <button class="close-icon">
        <span class="material-symbols-outlined"> close </span>
      </button>
    </div>
    <div class="logo-bar">
      <div class="container">
        <div class="logo-bar-inner">
          <a class="logo" href=""
            ><img
              src="https://placehold.co/130x74/2166ae/FFF?text=Your%20logo%20here"
              alt="logo"
          /></a>
          <div class="search-wrape mobile">
            <button class="search-btn">
              <span class="material-symbols-outlined"> search </span>
            </button>
          </div>
          <div class="toggle-icon">&nbsp;</div>
        </div>
      </div>
    </div>
    <div class="navigation-menu">
      <div class="container">
        <div class="nav-menu">
          <nav>
            <ul>
              <li><a href="">LINK</a></li>
              <li><a href="">LINK</a></li>
              <li><a href="">LINK</a></li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </header>
  <section class="home-banner">
    <div class="banner-width container">
      <div class="banner-wrape">
        <div class="banner-row">
          <div class="banner-col-sm">
            <div class="banner-wrape">
              <div class="banner-text">
                <h1>Title <strong>Subtitle</strong></h1>
              </div>
            </div>
          </div>
          <div class="banner-col-lg">
            <div class="banner-image">
              <figure>
                <img
                  src="https://placehold.co/1115x530/2166ae/FFF?text=Banner%20Image"
                  alt="banner-img"
                />
              </figure>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="intro-section">
    <div class="container">
      <div class="intro-width">
        <div class="intro-text">
          <h2>Intro title</h2>
          <h5>Intro subtitle</h5>
          <p>
            Some intro description. Lorem ipsum dolor, sit amet consectetur
            adipisicing elit. Doloremque id mollitia dolorum quam. Aspernatur
            omnis vitae debitis consequatur aliquam exercitationem facilis? Vero
            maiores aut dignissimos aspernatur quod pariatur odit quasi!
          </p>
        </div>
      </div>
    </div>
  </section>
  <section class="info-section">
    <div class="container">
      <div class="info-parent">
        <div class="overview-data">
          <div class="overview-row">
            <div class="overview-col">
              <div class="overview-wrape">
                <div class="overview-box">
                  <h3>Title</h3>
                  <p>Subtitle</p>
                  <a class="btn-default" href="">Browse</a>
                </div>
              </div>
            </div>
            <div class="overview-col">
              <div class="overview-wrape">
                <div class="overview-box">
                  <h3>Title</h3>
                  <p>Subtitle</p>
                  <a class="btn-default" href="">Explore</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="framework-data">
          <div class="framework-row">
            <div class="framework-col">
              <div class="framework-wrape">
                <div class="framework-box">
                  <figure>
                    <img
                      src="https://placehold.co/103x124/2166ae/FFF?text=Your%20icon"
                      alt="framework-icon-1"
                    />
                  </figure>
                  <div class="framework-text">
                    <h4>Title</h4>
                    <p>Description</p>
                    <a class="start-btn" href="">Start &gt;</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="framework-col">
              <div class="framework-wrape">
                <div class="framework-box">
                  <figure>
                    <img
                      src="https://placehold.co/103x124/2166ae/FFF?text=Your%20icon"
                      alt="framework-icon-2"
                    />
                  </figure>
                  <div class="framework-text">
                    <h4>Title</h4>
                    <p>Description</p>
                    <a class="start-btn" href="">Start &gt;</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="framework-col">
              <div class="framework-wrape">
                <div class="framework-box">
                  <figure>
                    <img
                      src="https://placehold.co/103x124/2166ae/FFF?text=Your%20icon"
                      alt="framework-icon-3"
                    />
                  </figure>
                  <div class="framework-text">
                    <h4>Title</h4>
                    <p>Description</p>
                    <a class="start-btn" href="">Start &gt;</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="buttons-link-section">
    <div class="container">
      <div class="buttons-link-group">
        <div class="buttons-link">
          <a class="btn-default" href="">Button</a>
        </div>
      </div>
    </div>
  </section>
  <footer class="footer">
    <div class="container">
      <div class="footer-wrape">
        <a class="foot-logo" href="#"
          ><img
            src="https://placehold.co/130x74/2166ae/FFF?text=Your%20logo%20here"
            alt="logo"
        /></a>
      </div>
    </div>
    <div class="copyright">
      <div class="container">
        <div class="copyright-inner">
          <p>
            &copy; Copyright 2023 | | <a href="#">Link</a> |
            <a href="#">Link</a> | <a href="#">Link</a> by
            <a href="#">Nobody</a>
          </p>
          <ul>
            <li>
              <a href=""
                ><span class="material-symbols-outlined"> grid_guides </span>
              </a>
            </li>
            <li>
              <a href=""
                ><span class="material-symbols-outlined"> grid_guides </span>
              </a>
            </li>
            <li>
              <a href=""
                ><span class="material-symbols-outlined"> grid_guides </span>
              </a>
            </li>
            <!-- Your social links -->
          </ul>
        </div>
      </div>
    </div>
  </footer>
</div>
<!-- END Landing page-->

```

Script.js

```javascript
/*! jQuery v1.12.4 | (c) jQuery Foundation | jquery.org/license */
$(document).ready(function () {
  $(".toggle-icon").click(function () {
    $(".nav-menu").toggleClass("show");
  });
});

$(document).ready(function () {
  $(".search-btn").click(function () {
    $(".header").addClass("show-search");
  });
  $(".close-icon").click(function () {
    $(".header").removeClass("show-search");
  });
});

```

Style.css

```css
:root {
  --accent-color: #2166ae;
  --link-primary: #656565;
  --link-accent: var(--accent-color);
  --text-primary: #000;
  --text-secondary: #fff;
  --text-accent: var(--accent-color);
  --sub-title-color: #6f6f6f;
  --primary-background: #fff;
  --secondary-background: #f3f3f3;
  --accent-background: var(--accent-color);
  --foter-background: #363839;
  --copyright-background: #282a2b;
  --copyright-text: #8c8989;
  --copyrigth-link: #bfbfbf;
  --border-color: #e5e5e5;
}

.body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  color: #333;
  font-family: "Work Sans", sans-serif;
}

/* comman */
html {
  scroll-behavior: smooth;
  font-size: 62.5%;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/*comman-area*/
ol,
ul {
  margin: 0;
  padding: 0;
}
img {
  display: block;
}
a {
  text-decoration: none;
  transition: all 0.5s ease;
}
a:focus,
a:hover,
a:active {
  text-decoration: none;
  outline: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  margin: 0;
}
p {
  margin: 0;
  font-size: 16px;
  color: #222;
  line-height: 24px;
}
figure {
  margin: 0;
}
img {
  max-width: 100%;
  height: auto;
}
button:focus {
  outline: none;
  box-shadow: none;
}
.btn:hover,
.btn:focus {
  background-color: var(--accent-color);
  color: #fff;
  border-color: var(--accent-color);
}
.container {
  margin: 0 auto;
  width: 100%;
}

.toggle-icon {
  display: none;
  cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
  width: 30px;
  height: 2px;
  background-color: #626c70;
  margin: 6px 0;
  transition: 0.4s;
}
.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-4px, 6px);
  transform: rotate(-45deg) translate(-4px, 6px);
}
.change .bar2 {
  opacity: 0;
}
.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-5px, -8px);
  transform: rotate(45deg) translate(-5px, -8px);
}

.mobile {
  display: none;
}

/* Navigation */
.logo-bar {
  padding: 20px 0;
  border-bottom: 1px solid var(--border-color);
}
.logo-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navigation-menu {
  padding: 0 0;
}
.nav-menu {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.nav-menu ul {
  list-style: none;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.nav-menu ul li {
  margin: 0 22px 0 0;
}
.nav-menu ul li a {
  color: var(--link-primary);
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
  padding: 12px 0;
}
.nav-menu ul li a:hover {
  color: var(--link-accent);
}

.search-btn {
  background-color: transparent;
  border: none;
  cursor: pointer;
  width: 18px;
  transition: all 0.5s ease;
}
.search-btn:hover {
  opacity: 0.5;
}

/* banner */
.home-banner {
  padding: 20px 0 20px 0;
}
.banner-width {
  max-width: 1040px;
  width: 100%;
  margin: 0 auto;
}
.banner-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 0;
}
.banner-col-sm {
  width: 50%;
  padding: 0 0;
}
.banner-col-lg {
  width: 50%;
  padding: 0 0;
}
.banner-wrape {
  min-height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 0;
}
.banner-text {
  max-width: 490px;
  padding: 0 30px 0 0;
  margin: 0 0;
  width: 100%;
}
.banner-text h1 {
  font-size: 4rem;
  line-height: 70px;
  color: var(--text-secondary);
}
.banner-text h1 strong {
  font-weight: normal;
}

/* intro section*/
.intro-section {
  padding: 3rem 0;
}
.intro-width {
  width: 100%;
  margin: 0 auto;
}
.intro-text h2 {
  font-size: 3.2rem;
  margin: 0 0 3rem 0;
  line-height: 1.14;
}
.intro-text h5 {
  font-size: 20px;
  color: var(--sub-title-color);
  line-height: 1.3;
}
.intro-text p {
  font-size: 17px;
  line-height: 1.7em;
  margin-top: 10px;
}

/* info-section */
.info-section {
  padding: 2.6rem 0 0 0;
  background-color: var(--secondary-background);
}
.overview-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.overview-col {
  width: 50%;
}
.overview-wrape {
  width: 100%;
  min-height: 334px;
  background-color: var(--primary-background);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 1px 10px 5px 1px #ededed;
  padding: 20px;
  margin: 0 0 30px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.overview-box {
  text-align: center;
}
.overview-box h3 {
  font-size: 3.2rem;
  margin: 0 0 30px 0;
}
.overview-box p {
  color: var(--sub-title-color);
  max-width: 280px;
  width: 100%;
  font-size: 20px;
  margin: 0 auto 30px auto;
}
.btn-default {
  padding: 12px 29px;
  font-size: 16px;
  color: var(--text-secondary);
  border: 2px solid var(--accent-color);
  letter-spacing: 1px;
  background-color: var(--accent-color);
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 5px;
  display: inline-block;
  text-align: center;
}
.btn-default:hover {
  border: 2px solid var(--accent-color);
  color: var(--accent-color);
  background-color: var(--text-secondary);
}

.framework-data {
  padding: 28px 0;
}
.framework-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 -10px;
}
.framework-col {
  width: 33.33%;
  padding: 0 10px;
}
.framework-box {
  background-color: var(--primary-background);
  margin: 0 0 30px 0;
  display: flex;
  flex-wrap: wrap;
}
.framework-box figure {
  width: 165px;
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background-color: var(--accent-color);
}
.framework-text {
  width: calc(100% - 165px);
  min-height: 100%;
  padding: 10px 10px 10px 15px;
}
.framework-text h4 {
  font-size: 20px;
  font-weight: bold;
  color: var(--accent-color);
  margin: 0 0 10px 0;
  min-height: 50px;
  display: flex;
  align-items: center;
}
.framework-text p {
  margin: 0 0 20px 0;
  font-size: 17px;
  line-height: 1.7em;
  min-height: 230px;
}
.start-btn {
  font-size: 16px;
  font-weight: bold;
  color: var(--accent-color);
}

.buttons-link-section {
  background-color: var(--secondary-background);
}
.buttons-link-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: row;
  min-height: 200px;
  padding: 15px 0;
  margin: 0 -25px;
}
.buttons-link {
  width: 25%;
  padding: 0 25px;
}
.buttons-link-group .btn-default {
  width: 100%;
  display: table;
}

.footer {
  background-color: var(--foter-background);
}
.footer-wrape {
  padding: 6.15rem 0;
}
.copyright {
  padding: 25px 0;
  background-color: var(--copyright-background);
  border-top: 1px solid #4b4c4d;
}
.copyright-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}
.copyright p {
  color: var(--copyright-text);
  font-size: 13px;
}
.copyright p a {
  color: var(--copyrigth-link);
}
.copyright ul {
  list-style: none;
  margin: 0;
}
.copyright ul li {
  margin: 0 5px 0 0;
  display: inline-block;
}
.copyright ul li a {
  color: var(--copyrigth-link);
}
.copyright ul li:last-child {
  margin-right: 0;
}
.copyright ul li a {
  display: block;
  width: 17px;
}

.header {
  position: relative;
}
.search-bar {
  max-width: 880px;
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  position: absolute;
  top: 0%;
  left: 0;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.8s ease;
  background-color: #fff;
  z-index: 111;
}
.search-form {
  position: relative;
  width: calc(100% - 50px);
}
.form-control {
  border: 1px solid #d2d2d2;
  border-radius: 0;
  color: #aaa9a9;
  font-size: 13px;
  background-color: #fff;
  width: 100%;
  height: 50px;
  opacity: 1;
}
.form-control::placeholder {
  color: #aaa9a9;
  font-size: 13px;
  opacity: 1;
}
.form-control:focus {
  border: 1px solid #d2d2d2;
  box-shadow: none;
  outline: none;
}
.search-bar .form-control {
  padding-left: 50px;
}

.search-button {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 100%;
  background-color: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.search-button img {
  width: 14px;
  opacity: 0.7;
}
.close-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  background-color: transparent;
  cursor: pointer;
  border: none;
  justify-content: center;
}
.close-icon img {
  width: 12px;
}

.show-search .search-bar {
  top: 50%;
  opacity: 1;
  visibility: visible;
}
.show-search .nav-menu {
  position: relative;
  z-index: -1;
  transition: all 0.8s ease;
  transform: translateY(50px);
}

.home-banner {
  position: relative;
}
.banner-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.15;
}
.home-banner::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--accent-color);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  mix-blend-mode: multiply;
}
.banner-wrape {
  position: relative;
  z-index: 11;
}

@media (min-width: 2001px) and (max-width: 2560px) {
  .container {
    max-width: 1300px !important;
  }
}
@media (min-width: 1801px) and (max-width: 2000px) {
  .container {
    max-width: 1300px !important;
  }
}
@media (min-width: 1551px) and (max-width: 1800px) {
  .container {
    max-width: 1300px !important;
  }
}
@media (min-width: 1300px) and (max-width: 1550px) {
  html {
    font-size: 55%;
  }
  .container {
    max-width: 1200px !important;
  }
  .logo-bar {
    padding: 20px 0;
  }

  .home-banner {
    padding: 40px 0 50px 0;
  }
  .banner-width {
  }
  .intro-section {
    padding: 60px 0;
  }
  .framework-box figure {
    width: 140px;
  }
  .framework-text {
    width: calc(100% - 140px);
  }
  .overview-box p {
    font-size: 18px;
  }

  .featured-videos-box h3 {
    font-size: 24px;
  }

  .buttons-link-group {
    margin: 0 -10px;
    min-height: 150px;
  }
  .buttons-link {
    padding: 0 10px;
  }
}
@media (min-width: 1200px) and (max-width: 1299px) {
  .container {
    max-width: 1150px !important;
  }

  html {
    font-size: 55%;
  }
  .container {
    padding: 0 15px;
  }
  .logo-bar {
    padding: 20px 0;
  }

  .home-banner {
    padding: 40px 0 50px 0;
  }
  .banner-width {
  }
  .intro-section {
    padding: 60px 0;
  }
  .framework-box figure {
    width: 140px;
  }
  .framework-text {
    width: calc(100% - 140px);
  }
  .framework-text h4 {
    font-size: 18px;
  }
  .overview-box p {
    font-size: 18px;
  }

  .featured-videos-box h3 {
    font-size: 24px;
  }

  .buttons-link-group {
    margin: 0 -10px;
    min-height: 150px;
  }
  .buttons-link {
    padding: 0 10px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .container {
    max-width: 950px !important;
  }
  html {
    font-size: 48%;
  }
  .container {
    padding: 0 15px;
  }
  .logo-bar {
    padding: 20px 0;
  }

  .home-banner {
    padding: 40px 0 50px 0;
  }
  .banner-width {
    padding: 0 15px;
    max-width: 950px;
  }
  .intro-section {
    padding: 60px 0;
  }
  .overview-box p {
    font-size: 18px;
  }
  .framework-col {
    width: 50%;
  }
  .featured-videos-box h3 {
    font-size: 24px;
  }

  .buttons-link-group {
    margin: 0 -10px;
    min-height: 150px;
  }
  .buttons-link {
    padding: 0 10px;
  }

  .intro-text p,
  .framework-text p,
  .featured-videos-title p {
    font-size: 16px;
  }

  .featured-videos-col {
    width: 50%;
    padding: 0 10px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .featured-videos-col {
    width: 50%;
    padding: 0 10px;
  }

  .container {
    max-width: 700px !important;
  }
  .show-search .nav-menu {
    z-index: 1;
    transition: all 0.8s ease;
    transform: translateY(0px);
  }
  html {
    font-size: 43%;
  }
  .container {
    padding: 0 15px;
  }
  .search-wrape {
    margin: 0 20px 0 auto;
    display: table;
  }
  .desktop {
    display: none;
  }
  .mobile {
    display: block;
  }
  .toggle-icon {
    display: block;
  }
  .nav-menu {
    display: none;
  }
  .nav-menu.show {
    display: block;
  }

  .logo-bar {
    padding: 15px 0;
  }
  .nav-menu ul li {
    width: 100%;
    margin: 0;
  }
  .nav-menu ul li a {
    border-bottom: 1px solid var(--border-color);
  }

  .home-banner {
    padding: 20px 0;
  }
  .banner-text {
    padding: 0;
  }
  .banner-text h1 {
  }
  .banner-width {
    max-width: 645px;
  }
  .intro-section {
    padding: 50px 0;
  }
  .overview-wrape {
    min-height: 285px;
  }
  .overview-box h3 {
    margin-bottom: 20px;
  }
  .overview-box p {
    font-size: 16px;
  }

  .framework-col {
    width: 100%;
  }
  .featured-videos-box {
    padding: 15px;
  }
  .featured-videos-box h3 {
    font-size: 22px;
    margin-bottom: 15px;
  }
  .featured-videos-box p {
    line-height: 20px;
    font-size: 14px;
    margin-bottom: 15px;
  }

  .buttons-link-group {
    min-height: 160px;
  }
  .buttons-link {
    width: 50%;
  }

  .intro-text p,
  .framework-text p,
  .featured-videos-title p {
    font-size: 16px;
  }
}
@media (min-width: 320px) and (max-width: 767px) {
  html {
    font-size: 42%;
  }
  .container {
    padding: 0 15px;
  }
  .search-wrape {
    margin: 0 20px 0 auto;
    display: table;
  }
  .show-search .nav-menu {
    z-index: 1;
    transition: all 0.8s ease;
    transform: translateY(0px);
  }
  .desktop {
    display: none;
  }
  .mobile {
    display: block;
  }
  .toggle-icon {
    display: block;
  }
  .nav-menu {
    display: none;
  }
  .nav-menu.show {
    display: block;
  }

  .logo-bar {
    padding: 15px 0;
  }
  .nav-menu ul li {
    width: 100%;
    margin: 0;
  }
  .nav-menu ul li a {
    border-bottom: 1px solid var(--border-color);
  }

  .home-banner {
    padding: 40px 0;
  }
  .banner-width {
    padding: 0 15px;
    max-width: 530px;
    width: 100%;
    margin: 0 auto;
  }
  .banner-col-sm,
  .banner-col-lg,
  .overview-col,
  .framework-col,
  .featured-videos-col {
    width: 100%;
  }
  .banner-text {
    margin: 0 auto;
    padding: 0;
    text-align: center;
  }

  .intro-section {
    padding: 3rem 0;
  }
  .intro-text h2 {
    font-size: 4rem;
  }
  .intro-text h5,
  .overview-box p {
    font-size: 18px;
  }

  .framework-box figure {
    width: 100%;
    min-height: 130px;
  }
  .framework-box figure img {
    height: 90px;
    object-fit: contain;
  }
  .framework-text {
    width: 100%;
    padding: 20px;
  }

  .buttons-link-group {
    min-height: 140px;
    margin: 0 -15px;
  }
  .buttons-link {
    width: 100%;
    margin: 5px 0;
    padding: 0 15px;
  }

  .foot-logo {
    margin: 0 auto;
    display: table;
  }
  .copyright-inner {
    text-align: center;
    justify-content: center;
  }
  .copyright ul {
    margin-left: 10px;
  }

  .banner-text h1 {
  }

  .intro-text p,
  .framework-text p,
  .featured-videos-title p {
    font-size: 16px;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  .container {
    max-width: 530px;
  }
}

```
:::


[title] Hosting Spaces on a sub folder
[path] HOSTED SPACES/

The default way to host documentation with Archbee is on your custom domain, e.g **docs.piedpiper.com**. To make docs available at your main domain at a sub folder like **https\://www\.piedpiper.com/docs**, you will need access to your webservers to be able to proxy requests to our systems.&#x20;

You will need to setup a default custom domain anyway, and then proxy to it from your main domain. We will take care that Google doesn't see it as duplicate by signalling it through a custom `canonical` tag.

## Step 1: Enter the optional proxy like in the picture below

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/3N80unCzlKaAcM2cSKh1m_hosted-sub-light.png)

:::hint{type="warning"}
While you're here, please make sure the URL path at **Step 5,** is the same one you set below in your webserver config.
:::

## Step 2: Here are a couple of samples from popular webservers on how to config it so that the proxying system works

### Nginx Server Config

```none
location /docs {
    proxy_ssl_server_name on;
    proxy_pass https://docs.piedpiper.com/docs
    proxy_set_header Host docs.piedpiper.com;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header "requested-by" "proxy";
}
```

### Apache Server Config

::::WorkflowBlock
:::WorkflowBlockItem
Ensure the following modules are installed and enabled:

```none
sudo a2enmod proxy
sudo a2enmod proxy_balancer
sudo a2enmod proxy_http
```
:::

:::WorkflowBlockItem
Add the following to the site configuration file under `/etc/apache2/sites-available`

For example:  `000-default.conf`

```javascript
SSLProxyEngine on
ProxyPass "/docs" "https://docs.piedpiper.com/docs"
ProxyPassReverse "/docs"  "https://docs.piedpiper.com/docs"
```

Our full domain test working config looks something like:

```none
<VirtualHost *:80>
   ServerName piedpiper.com
   DocumentRoot "/app"
   <Directory "/app">
       Options Indexes FollowSymLinks
       AllowOverride All
       Require all granted
   </Directory>

   SSLProxyEngine on
   ProxyPass "/docs"  "https://docs.piedpiper.com/docs
   ProxyPassReverse "/docs"  "https://docs.piedpiper.com/docs"
</VirtualHost>
```
:::

:::WorkflowBlockItem
Restart the Apache server:

For example, If you are using Apache on Linux:&#x20;

```none
$ sudo service apache2 restart
```
:::
::::


[title] Trello
[path] INTEGRATIONS/Embed Examples/

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/PsO_trGVe04Dz4f3EoBbE_archbee-trello.png" size="60" width="1200" height="676" position="center" showCaption="false"}

### What is Trello?

[Trello](https://trello.com/en) is a valuable collaboration tool that enhances project management by organizing tasks into visual boards. With Trello, you can quickly see project status, team responsibilities, and task progress, which boosts teamwork and efficiency. When integrated with Archbee, it further streamlines documentation and project tracking, making your workflow even smoother.

Imagine a white board, filled with lists of sticky notes, with each note as a task for you and your team. Now imagine that each of those sticky notes has photos, attachments from other data sources like BitBucket or Salesforce, documents, and a place to comment and collaborate with your teammates.

### Use Cases

Trello can be embedded on Archbee, to have an in-page To-Do list, in order for the writers to keep up with their tasks and if needed add new steps.

This enables users to collaborate in page, without the need to use multiple tabs or communication apps.

::trello{url="https://trello.com/embed/card?id=O8PyoCeM"}


[title] Authentication Pages
[path] HOSTED SPACES/

![](https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-IecdBwdwO2FiJXQDmTxyT-20241205-150851.png)

The Authentication pages option, allows you to create a fully customizable login page for users accessing your public portal.&#x20;

### Steps to Customize Your Authentication Page

:::::WorkflowBlock
:::WorkflowBlockItem
**Locate the "Authentication Pages" option**

- Navigate to Space Settings ->  Public Doc Settings -> Authentication Page(This is where you can start customizing your login page).

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/meHjcfcOWUH8W-dDa4mhD_image.png)
:::

:::WorkflowBlockItem
**Choose your page layout**

- **Only Authentication Form** - A straightforward one-column layout showing just the login form
- **Authentication Form and Image** - A two-column layout where you can add an image next to the login form for a more visually engaging design.
:::

:::WorkflowBlockItem
**Customize your Form Position**

- Decide whether the login form should appear on the **Left Side** or the **Right Side&#x20;**&#x6F;f the page. Choose the option you prefer.
:::

:::WorkflowBlockItem
**Select a Hero Image Theme**

- &#x20;Upload a Hero Image for **Light Mode&#x20;**&#x6F;&#x72;**&#x20;Dark Mode&#x20;**&#x64;epending of the overall style of your portal
:::

::::WorkflowBlockItem
:::hint{type="info"}
Want to change the look and feel? Edit the logo and accent colors in the Space Settings -> **Appearance** tab.
:::


::::
:::::




[title] Localization
[path] HOSTED SPACES/

Localization is a powerful feature that supports (i18n) across your spaces.

By default, every space has the **English** language, meaning all the labels displayed to users on the public documentation will be set in English. However, if your space targets a different language audience, fear not! We've got you covered with comprehensive language support.&#x20;

We consider that a language translation is just another version of a space, so the process of creating a space that supports a different language than English is similar to the [Version Links](docId\:fHqX4Nscf4gGNv9dI1Vsj) .

## How to set up Localization

:::::WorkflowBlock
::::WorkflowBlockItem
### Accessing Settings

- Click on the gear icon (⚙️) to access settings.
- Navigate to the **Version Links** tab under th&#x65;**&#x20;Space Connections** section.

:::hint{type="info"}
**ℹ️   For public documentations**

Make sure your documentation is **Public** and visible to everyone, before you start creating version links.

![](https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-lxs9fGwMIwgIKDOmxkW5c-20240903-093605.png)
:::
::::

:::WorkflowBlockItem
### Enabling Version Links

- Activate the version link feature for the desired space.
:::

:::WorkflowBlockItem
### Building Version Links

- Choose the space you want to Clone from. This allows the selection of the current space or its children.
- Select the version language. You can choose the following languages:
  - **🇺🇸   English**
  - **🇫🇷   French**
  - **🇩🇪   German**
  - **🇪🇸   Spanish**
  - **🇮🇹   Italian**
  - **🇵🇹   Portuguese**
  - **🇷🇺   Russian**
  - **🇰🇷   Korean**
  - 🇯🇵   **Japanese**
  - **🇹🇭   Thai**
  - **🇨🇳   Chinese**
  - **🇮🇩   Indonesian**
  - 🇳🇱   **Dutch**
  - 🇿🇦   **Afrikaans**
  - 🇵🇱   **Polish**
- Select the space language corresponding to the label.
- Click on <font color="#2166ae">**+ Create Version** </font> to proceed.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/1KEKHr53TqMhQ6njil4kl_locali-light.png)
:::

:::WorkflowBlockItem
### Repeat the Process

- Continue adding Version Links until your desired structure is achieved
:::

:::WorkflowBlockItem
### Finalizing Setup

- Exit the Space Settings window.
- Publish the space to propagate changes.
:::
:::::

:::hint{type="warning"}
**🧠   Remember!**

You have to **publish all clones/versions** in order to be visible on the public documentation.
:::

## Automatic Detection

We automatically detect if the Version Links are meant to translate a space or to define multiple product versions.

## Supported Languages

For the moment, we are supporting (English, French, German, Spanish, Italian, Portuguese, Russian, Korean, Japanese, Thai, Chinese and Indonesian).

## Viewing Changes

Once published, you will be able to see the changes in public spaces. The versions will be displayed based on the context. If the Space does contain a Space Link and also has multiple versions, it will be displayed in the Space Link Tab:

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/DnfwIqD8sr1CIVlqB900c_versions-light.png "Localization view on Stripey template")

Otherwise, it will appear above our search bar:

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/IVxnM2ZvMHSOFOF_-laeR_versions2-light.png "Localization view on Stripey template")

This solution provides great flexibility based on your organization's needs. We can create more complex setups, like wiring Spaces, with versions that need translation or vice-versa.

## User Guide Translation and Versioning

- Translate the Employee Handbook into multiple languages (e.g., English, French, Italian).
- Customize product versions for specific languages and markets.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/008YrKneA8jq0ThSaU6eV_versions3-light.png "Localization view on Stripey template")

##


[title] Custom CSS
[path] HOSTED SPACES/

Hosted and published Spaces can be customized using CSS.

Your CSS changes will only be included on your custom domain. When you preview your published Space, it will not be visible, so you need to publish it to Production.

::::WorkflowBlock
:::WorkflowBlockItem
Choose a space and click on the **Settings** icon ( ⚙️ ) to open th&#x65;**&#x20;Space Settings**
:::

:::WorkflowBlockItem
Look for the **Custom Code** tab on the Space Settings window
:::

:::WorkflowBlockItem
Go to the **Custom CSS** field
:::

:::WorkflowBlockItem
Type the **HTML \<style>** tags
:::

:::WorkflowBlockItem
**Save** your changes in the Custom CSS field.
:::
::::

```css
<style>

 /* add the CSS clases and the properties you want to change */
 
</style>
```

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/2Y_i_udgWZFnHrvVD6fNb_custom-css-light.png "Custom CSS")

:::hint{type="warning"}
For security reasons, custom code is only included on a custom domain.
:::

Across the DOM, you will find HTML elements with a CSS class that starts with `ab-`. You can target these classes to style the portal. **These classes are guaranteed never to change so that we don't break your styling when we update the system.**

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/Jx0_BnPB6o_t2ASi8Re3c_custom-code-class-light.png "ArchbeeDOM")

If the element you are trying to style does not have a class starting with `ab-`, we don't allow customization, and it's mostly to protect you from yourself. For example, if we change the structure, it might impact your styling.

Every element and block in the content section also has a similar class. Below you can find a list of the classes. If you want to check them, please open DevTools in your browser by right-clicking -> Inspect.&#x20;

This is a list of the current **available CSS classes:**&#x20;

:::BlockQuote
.ab-callout \{ }
.ab-changeloc \{ }
.ab-code-editor \{ }
.ab-minitasker \{ }
.ab-graphiql \{ }
.ab-horizontal-divider \{ }
.ab-jira \{ }
.ab-map \{ }
.ab-mermaid \{ }
.ab-vertical-split \{ }
.ab-vertical-split-item \{ }
.ab-video \{ }
.ab-checklist \{ }
.ab-blockquote \{ }
.ab-diagram \{ }
.ab-embed \{ }
.ab-file \{ }
.ab-iframe \{ }
.ab-html \{ }
.ab-image \{ }
.ab-ul-list \{ }
.ab-ol-list \{ }
.ab-list-item \{ }
.ab-list-item-child \{ }
.ab-table \{ }
.ab-space \{ }
.ab-collection \{ }
.ab-space-container \{ }
.ab-collection-container \{ }
.ab-top-navbar \{ }
.ab-search-input \{ }
.ab-public-search \{ }
.ab-space-content \{ }
.ab-collection-content \{ }
.ab-tree-navigation \{ }
.ab-tree-navigation-link \{ }
.ab-left-nav-chevron \{ }
.ab-tree-navigation-link-inactive \{ }
.ab-space-navigation \{ }
.ab-doc-name \{ }
.ab-h1 \{ }
.ab-h2 \{ }
.ab-h3 \{ }
.ab-expandable-heading \{ }
.ab-link \{ }
.ab-link-dynamic \{ }
.ab-nav-right \{ }
.ab-nav-right-text \{ }
.ab-bold \{ }
.ab-code \{ }
.ab-paragraph \{ }
.ab-footer-container \{ }
.ab-search-modal-header \{ }
.ab-search-modal-content \{ }
.ab-auth-jwt-button \{ }
.ab-auth-saml-button \{ }
.ab-windy-template \{ }
.ab-color-nav-template \{ }
.ab-booklet-template \{ }
:::

**OpenAPI** **CSS classes**

:::BlockQuote
.ab-openapi \{ }
.ab-open-api-param-name \{ }
.ab-open-api-param-expand-icon \{ }
.ab-open-api-param-type \{ }
.ab-open-api-param-description-wrap \{ }
.ab-open-api-param-example-wrap \{ }
.ab-open-api-param-custom-type \{ }
.ab-open-api-required-star \{ }
.ab-open-api-param-example-title \{ }
.ab-open-api-param-example \{ }
.ab-open-api-param-description-title \{ }
.ab-open-api-param-description \{ }
.ab-open-api-input-wrap \{ }
.ab-open-api-array-input-wrap \{ }
.ab-open-api-schema-wrap \{ }
:::

**BreadCrumbs classes**

:::BlockQuote
.ab-breadcrumb-item \{ }  *Each breadcrumb label*
.ab-breadcrumb-item-clickable \{ } *Breadcrumb that can be clicked to navigate*
.ab-breadcrumb-item-highlight \{ } *The currently active/highlighted breadcrumb*
.ab-breadcrumb-separator \{ } *The chevron icon between breadcrumbs*
.ab-breadcrumbs-wrapper \{ }	*The container around the entire breadcrumb bar*
.ab-breadcrumb-ellipsis \{ }	*The "..." shown when there are too many breadcrumbs*
:::



The dark mode adds a dark class at the top of the HTML tree, and you can use that to target dark mode styles.

For example, this is how you change the text to red in dark mode:

```css
<style>
    .dark .ab-paragraph {
         color: red !important ;  
    }
</style>
```


[title] Custom Landing Page
[path] HOSTED SPACES/

You can set up a **custom HTML** page to load instead of the first document - which is the default option when the docs site loads.

**To change the landing page option follow the next steps:**

::::WorkflowBlock
:::WorkflowBlockItem
Click on the **Space** you want to add a custom HTML landing page
:::

:::WorkflowBlockItem
Select the **Appearance** tab&#x20;
:::

:::WorkflowBlockItem
Scroll down to **Landing Page**
:::

:::WorkflowBlockItem
Select **Custom HTML**
:::

:::WorkflowBlockItem
**Add** your **HTML code&#x20;**&#x69;n **Landing page HTML&#x20;**&#x66;ield and hit **Save**.&#x20;
Keep in mind that this is your `index.html` file.
:::
::::

The Custom HTML supports [Handlebars](https://handlebarsjs.com/) and [Tailwind](https://tailwindcss.com/). You can interpolate some variables in the HTML template.

Here is the object that we pass to the template; you can render any of these variables:

:::CodeblockTabs
First level variables

```typescript
export interface PublicDocSpaceResponse {
  id: string
  name: string
  icon: string
  publicLogoURL: string
  darkPublicLogoURL: string
  publicTheme: 'light' | 'dark' | 'auto'
  contentLayout: 'one-column' | 'two-column'
  isIndexable: boolean
  template: 'booklet' | 'stripe' | 'widget'
  faviconURL: string
  landingPageHeaderText: string
  landingPageSubheaderText: string
  landingTemplate?: string
  footerTemplate?: string
  headerIncludes?: string
  jwtRedirectURL?: string
  hostingTitle: string
  showReadTime: boolean
  showLastUpdate: boolean
  showContributors: boolean
  showDocFeedback: boolean
  logoRedirectURL: string
  hostingColor: string
  darkHostingColor: string
  hostname: string
  hostnamePath: string
  proxyDomain: string
  isArchbeeBrandVisible: boolean
  i18nLanguage: string
  isAuthenticated: boolean
  showPdfBookLink: boolean
  pdfBookLink?: string
  createdAt: string
  spaceLinks: PublicSpaceLink[]
  externalLinks: PublicExternalLink[]
  versionLinks: PublicVersionLink[]
  publicDocsTree: PublicDocTreeResponse[]
}
```

Prop Interfaces

```typescript
export interface PublicDocTreeResponse {
  id: string
  name: string
  icon: string
  urlKey: string
  expanded?: boolean
  isCategory?: boolean
  categoryName?: string
  isLink?: boolean
  linkTitle?: string
  linkHref?: string
  linkOpensInNewTab?: boolean
  parentDocId?: string

  rightDoc?: PublicDocTreeResponse
  leftDoc?: PublicDocTreeResponse
  children: PublicDocTreeResponse[]
}

export type PublicSpaceLink = {
  label: string
  docSpaceId: string
  icon?: string
  versionLinks?: PublicVersionLink[]
  hasVersionsWithoutLinks?: boolean
}

export type PublicVersionLink = {
  label: string
  docSpaceId: string
  forkedFrom: string
  language: string
  versionLinks?: PublicVersionLink[]
}

export type PublicExternalLink = {
  label: string
  url: string
}
```
:::

This is an example html for rendering custom html in the landing page:

```html
<div class="flex flex-col justify-center items-center p-20">
  <div class="flex">
    <div class="font-semibold">publicLogoURL:</div>
    <img class="w-100" src="{{publicLogoURL}}" />
  </div>
  <div class="w-1/3">
    <h1 class="font-bold text-2xl">Props example</h1>
    
    <div class="flex">
      <div class="font-semibold">Id:</div>
      <div>{{ id }}</div>
    </div>
    
    <div class="flex">
      <div class="font-semibold">Name:</div>
      <div>{{ name }}</div>
    </div>
    
    <div class="flex">
      <div class="font-semibold">Icon:</div>
      <div>{{{ renderIcon icon }}}</div>
    </div>
    
    <div class="py-3">
      <p>Public Docs Tree:</p>
      <ol>
        {{#each publicDocsTree}}
        <li class="text-green-500">
          <a href="{{urlKey}}">
            <span class="font-semibold ">Name:</span>
            <span class="pl-3">{{name}}</span>
          </a>
          {{#if children}}
          <ul class="pl-4">
            {{#each children}}
            <li class="text-gray-500">
              <a href="{{urlKey}}">
                <span class="font-semibold ">Name:</span>
                <span class="pl-3">{{name}}</span>
              </a>
            </li>
            {{/each}}
          </ul>
          {{/if}}
        </li>
        {{/each}}
      </ol>
    </div>
  </div>
</div>
```

For a structure like this and an uploaded logo:

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/t4kCqi3UsLbZxU18egfrW_lp-hierarchy-light.png)

You should see something like this, with the above code:

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/GPQzw-88S7MWUsXcYTXvg_screen-shot-2022-09-02-at-131325.png)

## Custom functions for activating search

On a custom landing page you can build your own search input, but you'll also need a way to show the search modal — we've got you covered.

On the `` `window` `` object of the browser there are 2 methods you can call to control the search modal.

```javascript
// shows the search modal
window.showSearch()
// hides the search modal
window.hideSearch()
```

These functions are also available for usage in your custom scripts.

[title] Search
[path] HOSTED SPACES/Insights/

:::hint{type="info"}
The **Search Tab** tracks search queries entered by users on your published sites. This feature provides valuable insights into user behavior, allowing you to understand what types of information visitors are actively seeking. The data collected helps you tailor your content and optimize the user experience to better meet their needs.
:::

### Data Visualization:

The search data is presented visually in a chart, making it easier to spot trends over time. This chart helps in tracking the frequency and types of queries users are searching for, aiding in understanding overall user behavior.

### Search history table:

The Search tab offers a detailed table view of historical search queries. This table contains the following key columns

- **Search Query&#x20;**&#x20;Displays the specific words or phrases users entered in the search bar.
- **Searches**: Shows the number of times each query has been searched for on the site.
- **Docs Found**: Indicates the number of documents or results returned for each search query

![](https://archbee-image-uploads.s3.amazonaws.com/HCIek7I0UxvyNHQ0EFzVX-98TyVy-yKkhh2xWVcBnSW-20250218-132236.png)


[title] App documentation widget
[path] HOSTED SPACES/

Contextual documentation is embedded within your product where the user needs it most. The contextual docs widget helps users read the documentation without the need to browse the user guide portal in another window.

You can load specific articles or the entire user guide portal, which is a must-have for companies who want to increase product adoption and retention.

All you need to do is embed the HTML code generated under **Space settings** -> **Widget integration**.

# How the widget works

Check out the video below showing the widget in action:

::embed[]{url="https://www.youtube.com/watch?v=aVFVe7wUdWA"}

# How to implement the widget

To integrate the widget, follow these steps:

::::WorkflowBlock
:::WorkflowBlockItem
Select your **Space&#x20;**&#x69;nside the editor.
:::

:::WorkflowBlockItem
Click on the gear icon (⚙️) to get into **Settings.**
:::

:::WorkflowBlockItem
Go to **Widget integration.**
:::

:::WorkflowBlockItem
Click on the copy button, and paste the code into your `index.html` file, or in your application code.
:::
::::

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/1ODCzS1Qe9uLsuiEUilLN_widget-light.png "Copy app widget code")

Now, the widget will handle everything behind the scenes. Don't worry, everything is bundled and minified. It's a mere 56Kb download and it loads asynchronously, so your users won't feel a difference.

## Init event

In the `init` event, for the `spaceId` value, you can use the `spaceId` or the `PUBLISHED-{spaceId}`. This way you can use Spaces without publishing them, straight in your app.

Use `PREVIEW-{spaceId}` when you only want to publish a space to Preview and not on your domain.

| **Property**        | Type                 | **Description**                                                                                                                                                                                                                                                                                                                                                                                                                               | **Required** |
| ------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
| `spaceId`           | `string`             | Pass the desired id to load your docs.                                                                                                                                                                                                                                                                                                                                                                                                        | `required`   |
| `jwt`               | `string`             | Pass the jwt token in order to see jwt protected docs.                                                                                                                                                                                                                                                                                                                                                                                        | `optional`   |
| `shareableToken`    | `string`             | Pass the shareableToken from your private links to protect your docs.                                                                                                                                                                                                                                                                                                                                                                         | `optional`   |
| `widgetType`        | `'docs' \| 'search'` | Default value is `docs`. This opens the widget with the desired behaviour. `docs` type will open the widget with the default behaviour, `search` will open a search widget bar that shows a search bar with AI support (if included in your subscription).                                                                                                                                                                                    | `optional`   |
| `hideNavbar`        | `boolean`            | It shows or hides the top navbar from the widget modal. By default the navbar is visible. If you don't want to see the navbar, pass it with `true`value, otherwise just skip it.                                                                                                                                                                                                                                                              |              |
| `loadingStrategy`   | `lazy` \| `eager`    | The default value is `lazy`. While `lazy` loading delays the initialization of a resource, `eager` loading initializes or loads the widget as soon as the code is executed.                                                                                                                                                                                                                                                                   | `optional`   |
| `bubble`            | `invisible` \| `ask` | The default value is `invisible`. If set to `ask` it will display a bubble in the bottom-right of your screen. Whenever someone clicks on it, the search widget will open.                                                                                                                                                                                                                                                                    | `optional`   |
| `bubblePlaceholder` | `string`             | The placeholder that will be displayed in the bubble section. If not passed, a default value of `Ask a question` will be displayed.                                                                                                                                                                                                                                                                                                           | `optional`   |
| `anchor`            | `string`             | You can provide your `class`, `id` or `path` to a DOM element where you would like the widget to anchor and instantiate. It will anchor to the first element found in the DOM, if multiple elements with the same path are present. The container provided should have `position: relative` as the widget will be displayed based on the first **relative** **parent** found. e.g.,: `anchor: "#my-container"` / `anchor: ".container-class"` | `optional`   |

:::hint{type="info"}
If you want a simple search bubble to always be present in your app, use the `bubble: "ask"` prop.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/e6ZB7rUpuw2yLZ7pmrQ-2_ask-widget-light.png)
:::

## Show widget event

`show-widget` event triggers the action to display the widget. It also has an *optional* property that you can pass to open a specific document from your initialized Spaces.

| **Property** | **Description**                                                                                                                                                                                                                                                                                                                                                               | **Required** |
| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
| `docId`      | Set the doc id value to open a specific document.  If `docId` is passed, `widgetType` is ignored, it will open in `docs` mode regardless of the prop passed.<br />**Note:** You must add the word PUBLISHED in front of the docId as `PUBLISHED-docId` or `PREVIEW-spaceId`; otherwise, the widget will open the document from edit mode that might have unpublished changes. | `optional`   |
| `blockId`    | Set a certain block id, in order to scroll to the desired section in that document.                                                                                                                                                                                                                                                                                           | `optional`   |

## Supported events

Here is a brief description of our **Widget event API**:&#x20;

| **Event name** | **Description**                                                             | **Required** |
| -------------- | --------------------------------------------------------------------------- | ------------ |
| `init`         | This event helps Archbee widget boostrap<br />required files into your app. | `required`   |
| `show-widget`  | This event displays the widget on demand.                                   | `required`   |
| `hide-widget`  | This event hides the widget<br />if built-in mechanics are not enough.      | `optional`   |

## Code samples

Add a function wherever you want to display the widget on your site, like this:

```javascript
const openAbWidget = () => {
    window._archbee.push({
        eventType: "show-widget",
        // optional, only for loading a specific doc
        // and scroll to section
        // docId: `PUBLISHED-${docId}`,
        // blockId: "TBMm9"
    });
}
```

This will load the widget, with the desired Space docs and users will be able to see everything straight from your app.

If you want to load a specific doc only, just pass ``docId: `${docId}` `` to our initial object as in the example above.

You don't need the `closeWidget` function, since the widget will automatically close if you press `Esc` or click outside of it.

However, if you want to close the widget programatically and not rely on the built-in close mechanics, you can use `hide-widget` event type this way:

```javascript
const closeAbWidgetAfterSeconds = (miliseconds) => {
    setTimeout(() => {
        // setTimeout is for demo purposes and it is not required...
        window._archbee.push({eventType: "hide-widget"});
    }, miliseconds);
}

closeAbWidgetAfterSeconds(5000);
```


[title] Sitemaps
[path] HOSTED SPACES/

:::hint{type="warning"}
A *sitemap* is a file where you provide information about your site’s pages, videos, and other files and the relationships between them.&#x20;

Search engines like Google read this file to crawl your site more efficiently.

A sitemap tells Google which pages and files you think are important to your site and provides valuable information about these files.&#x20;
:::

Archbee exposes a sitemap with all URLs at `/sitemap.xml.`

Google uses the file to index your content.

Each published Space has its own sitemap. for example [https://docs.archbee.com/sitemap.xml](https://www.archbee.com/docs/sitemap.xml)

[title] Delete document
[path] PUBLIC API/Doc/

{
  "id": "u6Rpmbplcyh0tei0OLfbC",
  "type": "api-oas-v2",
  "data": {
    "method": "DELETE",
    "url": "https://api.archbee.com/api/public-api/doc",
    "servers": [
      {
        "url": "https://api.archbee.com/api/public-api/doc",
        "description": "Archbee API Server"
      }
    ],
    "name": "Delete document",
    "description": "<p>Delete document by <code>docId</code></p>",
    "contentType": "application/json",
    "request": {
      "pathParameters": [],
      "headerParameters": [
        {
          "name": "accept",
          "type": "string",
          "kind": "optional",
          "description": "Generated from available response content types",
          "enum": [
            "application/json"
          ],
          "default": "application/json"
        },
        {
          "kind": "required",
          "name": "Content-Type",
          "type": "string",
          "example": "application/json",
          "description": ""
        }
      ],
      "queryParameters": [],
      "bodyDataParameters": [
        {
          "kind": "required",
          "name": "body",
          "type": "object",
          "description": "",
          "schema": [
            {
              "name": "docId",
              "kind": "required",
              "type": "string",
              "description": "Document id that will be permanently deleted.",
              "example": "21-character__string0"
            }
          ],
          "isExpanded": true
        }
      ],
      "formDataParameters": [],
      "oAuthParameters": [
        {
          "id": "bearerAuth",
          "name": "bearerAuth",
          "kind": "optional",
          "type": "http",
          "description": "<p>Requires the <code>Authorization</code> header in the form <code>Authorization: Bearer {base64(docSpaceId~apiKey)}</code> Where the token is base64 encoding of docSpaceId, tilde, and apiKey.</p>",
          "scheme": "bearer"
        }
      ],
      "cookieParameters": []
    },
    "responses": [
      {
        "statusCode": "200",
        "description": "Delete status",
        "jsonExample": "",
        "isExpanded": true,
        "schema": [
          {
            "kind": "optional",
            "type": "object",
            "description": "Delete status",
            "schema": [
              {
                "name": "status",
                "kind": "optional",
                "type": "string<OK>",
                "description": "Response Status",
                "enum": [
                  "OK"
                ]
              },
              {
                "name": "data",
                "kind": "optional",
                "type": "object",
                "description": "",
                "example": "",
                "schema": [
                  {
                    "name": "status",
                    "kind": "optional",
                    "type": "boolean",
                    "description": ""
                  }
                ]
              }
            ],
            "isExpanded": true
          }
        ]
      },
      {
        "statusCode": "400",
        "description": "Invalid request",
        "jsonExample": "",
        "isExpanded": true,
        "schema": [
          {
            "kind": "optional",
            "type": "object",
            "description": "",
            "customType": "Response400",
            "schema": [
              {
                "name": "status",
                "kind": "optional",
                "type": "string<OK | Not OK>",
                "description": "Response Status",
                "example": "Not OK",
                "enum": [
                  "OK",
                  "Not OK"
                ]
              },
              {
                "name": "messages",
                "kind": "optional",
                "type": "array",
                "description": "Array of messages",
                "example": "[\"Some error message\"]",
                "itemType": "string",
                "customType": "string[]",
                "itemExample": "Some error message",
                "itemDefault": ""
              }
            ],
            "modelRef": "#/components/schemas/Response400",
            "isExpanded": true
          }
        ]
      }
    ],
    "hasXCodeSamples": false
  },
  "children": [
    {
      "text": ""
    }
  ]
}
[title] Delete Space Group
[path] PUBLIC API/DocSpace/

{
  "id": "Irlv-lDMjt4oPBb8dFobA",
  "type": "api-oas-v2",
  "data": {
    "method": "DELETE",
    "url": "https://api.archbee.com/api/public-api/space-group/delete",
    "servers": [
      {
        "url": "https://api.archbee.com/api/public-api/space-group/delete",
        "description": "Archbee API Server"
      }
    ],
    "name": "Delete Space Group",
    "description": "<p>Delete Archbee space group with given <code>spaceGroupId</code>.</p>",
    "contentType": "application/json",
    "request": {
      "pathParameters": [],
      "headerParameters": [
        {
          "name": "accept",
          "type": "string",
          "kind": "optional",
          "description": "Generated from available response content types",
          "enum": [
            "application/json"
          ],
          "default": "application/json"
        },
        {
          "kind": "required",
          "name": "Content-Type",
          "type": "string",
          "example": "application/json",
          "description": ""
        }
      ],
      "queryParameters": [],
      "bodyDataParameters": [
        {
          "kind": "required",
          "name": "body",
          "type": "object",
          "description": "",
          "schema": [
            {
              "name": "spaceGroupId",
              "kind": "optional",
              "type": "string",
              "description": "Space group id to delete.",
              "example": "21-character__string0"
            }
          ],
          "isExpanded": true
        }
      ],
      "formDataParameters": [],
      "oAuthParameters": [
        {
          "id": "bearerAuth",
          "name": "bearerAuth",
          "kind": "optional",
          "type": "http",
          "description": "<p>Requires the <code>Authorization</code> header in the form <code>Authorization: Bearer {base64(docSpaceId~apiKey)}</code> Where the token is base64 encoding of docSpaceId, tilde, and apiKey.</p>",
          "scheme": "bearer"
        }
      ],
      "cookieParameters": []
    },
    "responses": [
      {
        "statusCode": "200",
        "description": "Process status",
        "jsonExample": "",
        "isExpanded": true,
        "schema": [
          {
            "kind": "optional",
            "type": "object",
            "description": "Process status",
            "schema": [
              {
                "name": "status",
                "kind": "optional",
                "type": "string<OK>",
                "description": "Response Status",
                "enum": [
                  "OK"
                ]
              }
            ],
            "isExpanded": true
          }
        ]
      },
      {
        "statusCode": "400",
        "description": "Invalid request",
        "jsonExample": "",
        "isExpanded": true,
        "schema": [
          {
            "kind": "optional",
            "type": "object",
            "description": "",
            "customType": "Response400",
            "schema": [
              {
                "name": "status",
                "kind": "optional",
                "type": "string<OK | Not OK>",
                "description": "Response Status",
                "example": "Not OK",
                "enum": [
                  "OK",
                  "Not OK"
                ]
              },
              {
                "name": "messages",
                "kind": "optional",
                "type": "array",
                "description": "Array of messages",
                "example": "[\"Some error message\"]",
                "itemType": "string",
                "customType": "string[]",
                "itemExample": "Some error message",
                "itemDefault": ""
              }
            ],
            "modelRef": "#/components/schemas/Response400",
            "isExpanded": true
          }
        ]
      }
    ],
    "hasXCodeSamples": false
  },
  "children": [
    {
      "text": ""
    }
  ]
}
[title] Info Open Api document
[path] PUBLIC API/Open Api/

{
  "id": "8yfL4zA_OcEYWDYJgrMsC",
  "type": "api-oas-v2",
  "data": {
    "method": "GET",
    "url": "https://api.archbee.com/api/public-api/info-api-reference",
    "servers": [
      {
        "url": "https://api.archbee.com/api/public-api/info-api-reference",
        "description": "Archbee API Server"
      }
    ],
    "name": "Info Open Api document",
    "description": "Get info of an existing Open Api tree",
    "contentType": "application/json",
    "request": {
      "pathParameters": [],
      "headerParameters": [
        {
          "name": "accept",
          "type": "string",
          "kind": "optional",
          "description": "Generated from available response content types",
          "enum": [
            "application/json"
          ],
          "default": "application/json"
        }
      ],
      "queryParameters": [],
      "bodyDataParameters": [],
      "formDataParameters": [
        {
          "kind": "optional",
          "name": "docTreeId",
          "type": "string",
          "example": "21-character__string0",
          "description": "DocTree id is main category id where open api was imported."
        }
      ],
      "oAuthParameters": [
        {
          "id": "bearerAuth",
          "name": "bearerAuth",
          "kind": "optional",
          "type": "http",
          "description": "<p>Requires the <code>Authorization</code> header in the form <code>Authorization: Bearer {base64(docSpaceId~apiKey)}</code> Where the token is base64 encoding of docSpaceId, tilde, and apiKey.</p>",
          "scheme": "bearer"
        }
      ],
      "cookieParameters": []
    },
    "responses": [
      {
        "statusCode": "200",
        "description": "Status",
        "jsonExample": "",
        "isExpanded": true,
        "schema": [
          {
            "kind": "optional",
            "type": "object",
            "description": "Status",
            "schema": [
              {
                "name": "status",
                "kind": "optional",
                "type": "string<OK>",
                "description": "Response Status",
                "example": "OK",
                "enum": [
                  "OK"
                ]
              },
              {
                "name": "data",
                "kind": "optional",
                "type": "object",
                "description": "",
                "example": "",
                "schema": [
                  {
                    "name": "result",
                    "kind": "optional",
                    "type": "string",
                    "description": ""
                  },
                  {
                    "name": "importedContent",
                    "kind": "optional",
                    "type": "string",
                    "description": ""
                  }
                ]
              }
            ],
            "isExpanded": true
          }
        ]
      },
      {
        "statusCode": "400",
        "description": "Invalid request",
        "jsonExample": "",
        "isExpanded": true,
        "schema": [
          {
            "kind": "optional",
            "type": "object",
            "description": "",
            "customType": "Response400",
            "schema": [
              {
                "name": "status",
                "kind": "optional",
                "type": "string<OK | Not OK>",
                "description": "Response Status",
                "example": "Not OK",
                "enum": [
                  "OK",
                  "Not OK"
                ]
              },
              {
                "name": "messages",
                "kind": "optional",
                "type": "array",
                "description": "Array of messages",
                "example": "[\"Some error message\"]",
                "itemType": "string",
                "customType": "string[]",
                "itemExample": "Some error message",
                "itemDefault": ""
              }
            ],
            "modelRef": "#/components/schemas/Response400",
            "isExpanded": true
          }
        ]
      }
    ],
    "hasXCodeSamples": false
  },
  "children": [
    {
      "text": ""
    }
  ]
}
[title] PUBLIC API
[path] /


[title] Clone Space
[path] PUBLIC API/DocSpace/

{
  "id": "ud9ulMqkEsFwNOuAcLLkE",
  "type": "api-oas-v2",
  "data": {
    "method": "POST",
    "url": "https://api.archbee.com/api/public-api/space/clone",
    "servers": [
      {
        "url": "https://api.archbee.com/api/public-api/space/clone",
        "description": "Archbee API Server"
      }
    ],
    "name": "Clone Space",
    "description": "<p>Clone Archbee space from given <code>docSpaceId</code></p>",
    "contentType": "application/json",
    "request": {
      "pathParameters": [],
      "headerParameters": [
        {
          "name": "accept",
          "type": "string",
          "kind": "optional",
          "description": "Generated from available response content types",
          "enum": [
            "application/json"
          ],
          "default": "application/json"
        },
        {
          "kind": "required",
          "name": "Content-Type",
          "type": "string",
          "example": "application/json",
          "description": ""
        }
      ],
      "queryParameters": [],
      "bodyDataParameters": [
        {
          "kind": "required",
          "name": "body",
          "type": "object",
          "description": "",
          "schema": [
            {
              "name": "targetSpaceGroupId",
              "kind": "optional",
              "type": "string",
              "description": "Space group id where space will be cloned.",
              "example": "21-character__string0"
            }
          ],
          "isExpanded": true
        }
      ],
      "formDataParameters": [],
      "oAuthParameters": [
        {
          "id": "bearerAuth",
          "name": "bearerAuth",
          "kind": "optional",
          "type": "http",
          "description": "<p>Requires the <code>Authorization</code> header in the form <code>Authorization: Bearer {base64(docSpaceId~apiKey)}</code> Where the token is base64 encoding of docSpaceId, tilde, and apiKey.</p>",
          "scheme": "bearer"
        }
      ],
      "cookieParameters": []
    },
    "responses": [
      {
        "statusCode": "200",
        "description": "Process status",
        "jsonExample": "",
        "isExpanded": true,
        "schema": [
          {
            "kind": "optional",
            "type": "object",
            "description": "Process status",
            "schema": [
              {
                "name": "status",
                "kind": "optional",
                "type": "string<OK>",
                "description": "Response Status",
                "enum": [
                  "OK"
                ]
              },
              {
                "name": "data",
                "kind": "optional",
                "type": "object",
                "description": "DocSpace id",
                "example": "",
                "schema": [
                  {
                    "name": "id",
                    "kind": "optional",
                    "type": "string",
                    "description": "doc space id"
                  }
                ]
              }
            ],
            "isExpanded": true
          }
        ]
      },
      {
        "statusCode": "400",
        "description": "Invalid request",
        "jsonExample": "",
        "isExpanded": true,
        "schema": [
          {
            "kind": "optional",
            "type": "object",
            "description": "",
            "customType": "Response400",
            "schema": [
              {
                "name": "status",
                "kind": "optional",
                "type": "string<OK | Not OK>",
                "description": "Response Status",
                "example": "Not OK",
                "enum": [
                  "OK",
                  "Not OK"
                ]
              },
              {
                "name": "messages",
                "kind": "optional",
                "type": "array",
                "description": "Array of messages",
                "example": "[\"Some error message\"]",
                "itemType": "string",
                "customType": "string[]",
                "itemExample": "Some error message",
                "itemDefault": ""
              }
            ],
            "modelRef": "#/components/schemas/Response400",
            "isExpanded": true
          }
        ]
      }
    ],
    "hasXCodeSamples": false
  },
  "children": [
    {
      "text": ""
    }
  ]
}
[title] Doc
[path] PUBLIC API/


[title] Upload
[path] PUBLIC API/


[title] Delete Space
[path] PUBLIC API/DocSpace/

{
  "id": "H_t4EeeilUHeccmGGBN96",
  "type": "api-oas-v2",
  "data": {
    "method": "DELETE",
    "url": "https://api.archbee.com/api/public-api/space/delete",
    "servers": [
      {
        "url": "https://api.archbee.com/api/public-api/space/delete",
        "description": "Archbee API Server"
      }
    ],
    "name": "Delete Space",
    "description": "<p>Delete Archbee space with given <code>docSpaceId</code></p>",
    "contentType": "application/json",
    "request": {
      "pathParameters": [],
      "headerParameters": [
        {
          "name": "accept",
          "type": "string",
          "kind": "optional",
          "description": "Generated from available response content types",
          "enum": [
            "application/json"
          ],
          "default": "application/json"
        },
        {
          "kind": "required",
          "name": "Content-Type",
          "type": "string",
          "example": "application/json",
          "description": ""
        }
      ],
      "queryParameters": [],
      "bodyDataParameters": [
        {
          "kind": "required",
          "name": "body",
          "type": "object",
          "description": "",
          "schema": [
            {
              "name": "targetSpaceId",
              "kind": "optional",
              "type": "string",
              "description": "Space id to delete.",
              "example": "21-character__string0"
            }
          ],
          "isExpanded": true
        }
      ],
      "formDataParameters": [],
      "oAuthParameters": [
        {
          "id": "bearerAuth",
          "name": "bearerAuth",
          "kind": "optional",
          "type": "http",
          "description": "<p>Requires the <code>Authorization</code> header in the form <code>Authorization: Bearer {base64(docSpaceId~apiKey)}</code> Where the token is base64 encoding of docSpaceId, tilde, and apiKey.</p>",
          "scheme": "bearer"
        }
      ],
      "cookieParameters": []
    },
    "responses": [
      {
        "statusCode": "200",
        "description": "Process status",
        "jsonExample": "",
        "isExpanded": true,
        "schema": [
          {
            "kind": "optional",
            "type": "object",
            "description": "Process status",
            "schema": [
              {
                "name": "status",
                "kind": "optional",
                "type": "string<OK>",
                "description": "Response Status",
                "enum": [
                  "OK"
                ]
              },
              {
                "name": "data",
                "kind": "optional",
                "type": "object",
                "description": "DocSpace id",
                "example": "",
                "schema": [
                  {
                    "name": "id",
                    "kind": "optional",
                    "type": "string",
                    "description": "doc space id"
                  }
                ]
              }
            ],
            "isExpanded": true
          }
        ]
      },
      {
        "statusCode": "400",
        "description": "Invalid request",
        "jsonExample": "",
        "isExpanded": true,
        "schema": [
          {
            "kind": "optional",
            "type": "object",
            "description": "",
            "customType": "Response400",
            "schema": [
              {
                "name": "status",
                "kind": "optional",
                "type": "string<OK | Not OK>",
                "description": "Response Status",
                "example": "Not OK",
                "enum": [
                  "OK",
                  "Not OK"
                ]
              },
              {
                "name": "messages",
                "kind": "optional",
                "type": "array",
                "description": "Array of messages",
                "example": "[\"Some error message\"]",
                "itemType": "string",
                "customType": "string[]",
                "itemExample": "Some error message",
                "itemDefault": ""
              }
            ],
            "modelRef": "#/components/schemas/Response400",
            "isExpanded": true
          }
        ]
      }
    ],
    "hasXCodeSamples": false
  },
  "children": [
    {
      "text": ""
    }
  ]
}
[title] DocSpace
[path] PUBLIC API/


[title] Suggest Change
[path] PUBLIC API/


[title] Manage the Organization
[path] ORGANIZATIONS/

To manage an Organization, you need to go to User Preferences -> Organizations and maintain the following user groups.

Superadmin, Administrators, and Team members are default groups. In addition, you can define Custom groups.

Use the groups to control the access to each Space along with read/write permissions  - [Team Access Control](docId\:xMU67M0T2_GkhqQ00at_T)&#x20;

- **Superadmin** is a group for a single person and has permission to assign other administrators.
  - The superadmin role is given to the user that created the Organization (signed up for Archbee).
  - A superadmin can change the role to Administrator for any user.
  - The superadmin role can be transferred to any other user.
- **Administrators** (and superadmins) can:
  - invite and/or remove other team members;
  - create user groups and assign them to users;
  - setup permissions to Spaces for user groups or individual users;
  - setup subscription and payment information.
- **Team members** can contribute to all shared spaces.
  - When you invite a new user to Archbee, the default permission is set to Team members, and they will have access to all the Spaces.
  - To change the role to a team member to Administrator, go to Account Settings -> Organizations -> Identify the team member -> Click the green plus sign ➕ under the GROUPS column and add them to Administrators.
- **Custom groups** can be created, which can be used to assign permissions in the Spaces settings area.
  - A Superadmin or Administrator can create Custom Groups.

## How to transfer the superadmin role

A superadmin can swap the role with any other team member.

Go to Account Settings -> Organizations -> Identify the team member -> Click on the green up arrow ⬆ to swap the role under the ACTIONS column.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/bRMpy8Rz5-1e_7gxYfAey_screenshot-2022-06-10-at-110407.png)

:::hint{type="warning"}
Once the role is transferred, the action cannot be reverted.&#x20;
:::


[title] Import documents
[path] IMPORT & EXPORT/

If you are not starting from scratch and you already have a knowledge base of sorts, you can import multiple types of documents to start adding content.

### How to import your files into Archbee

::::WorkflowBlock
:::WorkflowBlockItem
Click on th&#x65;**&#x20; ⬆️ Import Content&#x20;**&#x62;utton located on the left-side navigation panel:

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/a08MIiqYYOz-F-lOvRdFp_import-content-light.png "Import content button")

Alternatively, use the **Import** button from your **Space&#x20;**&#x6D;enu:

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/QUKBInWTgzNHAU3bqN6K5_import-option-light.png "Import button fr")
:::

:::WorkflowBlockItem
Go ahead and pick what type of content you want to upload, and choose between:

- **Markdown&#x20;**&#x66;iles
- **OpenAPI**
- **Postman&#x20;**
- **GitBook**
- **ReadMe**
- **Notion**
- **Microsoft Word&#x20;**(.docx)

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/AdUIsRUqmLOZZvWCgsGZC_import-light.png "Select document type for import")
:::

:::WorkflowBlockItem
Upload your files and you are ready to continue working on your content in Archbee!
:::
::::

:::hint{type="success"}
**NEW STUFF ✨**

We are working on adding similar functionality from tools like: Confluence, Quip, Slite, Google Docs, LucidChart, Draw\.io, and more.
:::

In the meantime, **we can import your content manually** if neede&#x64;**. Feel free** to contact us at [support@archbee.io](mailto\:support@archbee.com) or click the **chat head** in the bottom right corner!

### Import OpenAPI files

To import OpenAPI files, please refer to the [Importing OpenAPI / Swagger](docId\:C3Jz_iuwGeAEynhRJ5D-7) section.

### Import GitHub files

If you prefer to add content from a Github repository, please refer to our integration with [GitHub](docId\:Pm3HtF9iCnqzcNFRQjqL3) guide.

[title] Exporting documents
[path] IMPORT & EXPORT/

Here, you'll find few ways to export your stuff. Whether you want to save individual documents, or even export an entire space or your entire organization's content, we've got you covered!

## Export single document

Our system allows you to export individual documents in Markdown format, or rendered PDF files.

::::WorkflowBlock
:::WorkflowBlockItem
Go to the Document Options menu  `⋮`&#x20;
:::

:::WorkflowBlockItem
&#x20;Select **Export to Markdown file** or **Export to PDF** options.
:::
::::

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/lo8rN871hk3B6Ld5YULJ6_export-file-light.png)

***

## Export a Space to Markdown

Go to the space dropdown option menu, near the settings icon and select **Export Space** option.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/GgxZg6OlLqaVbTGi35wji_export-space-light.png)

***

## Export Organisation

We also allow you to export the whole Organisation's content.

::::WorkflowBlock
:::WorkflowBlockItem
Open your organizaiton menu
:::

:::WorkflowBlockItem
Click on **Organization Settings**

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/laehdUhr-bCXPsQA0ltql_org-menu-ight.png)
:::

:::WorkflowBlockItem
Press on **Download&#x20;**&#x69;con on your workspace (only admins can do this).

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/1bgxGLPKF5-jE-O2KJfyf_export-org-light.png)
:::
::::

You (and all admins in your workspace) will receive an email with a link to a .zip file containing everything in your workspace (content + users).

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/1AxJUyAYFt9tFsqATCIRq_email-light.png)




[title] Okta setup
[path] INTEGRATIONS/Untitled/

::::::WorkflowBlock
:::WorkflowBlockItem
## &#x20;Create  a SAML 2.0 application

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/nqSfZElEFZi0ZLu61Hqde_image.png" size="80" width="1410" height="828" position="center" showCaption="false"}
:::

:::WorkflowBlockItem
## Set an application name

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/kxZr0hMEhONmFHApEL8kN_image.png" size="86" width="1508" height="768" position="center" showCaption="false"}
:::

:::::WorkflowBlockItem
## Copy Archbee settings -> SAML App

::::VerticalSplit
:::VerticalSplitItem


![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/l8TsiJzznZa5TcLemxV9U_image.png)
:::

:::VerticalSplitItem


![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/w1zfZsO1uZl92j54AMACY_image.png)
:::
::::

Click 'Next' and 'Finish' creation app.
:::::

:::::WorkflowBlockItem
## SAML instructions -> Archbee Settings

Go to your created app, click "Sign on" tab >> click on 'View SAML Setup Instructions'

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/ZQHLbQwEzMnyMy_x26V8Z_image.png)

Copy Identity SSO Url, idp issuer and certificate to archbee.

::::VerticalSplit
:::VerticalSplitItem
::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/CUmtwAahVfaP0bf-TvV0f_image.png" size="96" width="1364" height="1106" position="center" showCaption="false"}
:::

:::VerticalSplitItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/i1nFRYtwdiv5pPPTp7xeQ_image.png)
:::
::::

:::hint{type="info"}
**NOTE**  ℹ️
Don't forget to create and assign user to this saml app.
:::
:::::

:::WorkflowBlockItem
## Login using SAML&#x20;

You can click on "SAML Login Url" button and see if it works. Share login url with your team members to login/register via SAML.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/nSMuLccqFegz9-hqNa15t_image.png)
:::
::::::


[title] Webhook-endoint
[path] INTEGRATIONS/

```javascript
// Webhook endpoint
app.post('/webhook', (req, res) => {
  const payload = req.body; // Extract the payload
  const receivedSignature = req.headers['x-signature']; // Extract the signature from headers
  const timestamp = req.headers['x-timestamp']; // Extract the timestamp from headers (if needed)

  if (!receivedSignature || !timestamp) {
    return res.status(400).send('Missing signature or timestamp');
  }

  // Recreate the string to sign
  const payloadString = JSON.stringify(payload);
  const stringToSign = `${timestamp}.${payloadString}`;

  // Recreate the signature
  const calculatedSignature = crypto
    .createHmac('sha256', signingKey)
    .update(stringToSign)
    .digest('hex');

  // Compare the received signature with the calculated signature
  if (receivedSignature === calculatedSignature) {
    console.log('Signature verified! Decoded payload:', payload);

    // Process the payload (e.g., log it, store it, etc.)
    res.status(200).send('Payload received and verified!');
  } else {
    console.error('Signature mismatch. Potential tampering detected!');
    res.status(403).send('Invalid signature');
  }
});
```


[title] Airtable
[path] INTEGRATIONS/Embed Examples/

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/79sI4WXzQ0KyQs8rlBA6o_archbee-airtable.png" size="60" width="1200" height="676" position="center" showCaption="false"}

### What is Airtable?

[Airtable](https://zapier.com/blog/what-is-airtable/) is a user-friendly online platform designed for the creation and sharing of relational databases. By integrating **Airtable** with **Archbee**, you can leverage its ease of use to enhance your data management and collaboration efforts.

You can store, organize, and collaborate on information about anything—like employee directories, product inventories, and even apartment hunting.

### Basic components of Airtable

- **Bases**
  Single databases with all the information you need for your project. Your base might be called "Employee Directory" or "New Car Shopping." (Ours is called "Editorial Calendar and Resources.") A base contains all the data you need for one project.
- **Tables**
  Used to hold a list of data about one particular type of item. Each base can have one or more tables, similar to worksheets in a spreadsheet. In the Employee Directory base, each table hosts a particular type of information, like name, birthdate, and department.
- **Fields**
  The equivalent of spreadsheet columns, though fields are designed to bring consistency to your data. Each field has a name and can be customized to hold a wide variety of content, like photos, attachments, phone numbers, dates, checkboxes, and more.
- **Records**
  The database equivalent of spreadsheet rows and cells. Each record is an item in your list. In a table of employees, each record is a different employee, with data in each field to detail their name, department, address, and more.
- **Views**
  A different lens through which you can see the same underlying table data. These customized views can be useful when you only want to see records fitting certain criteria—perhaps to see all employees in the engineering department.

### Use Cases

A client can embed an Airtable URL on Archbee, in order to have an overview of the Airtable component that are relevant to their documentation.

Here is an example of how we integrate with Airtable and how the Airtable embed looks on public docs:

::airtable{url="https://airtable.com/embed/shrlAzjgyEaCtWTJ4"}


[title] Codepen
[path] INTEGRATIONS/Embed Examples/

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/Bvl-ub3oavd0E5Xf7Hpq-_archbee-codepen.png" size="60" width="1200" height="676" position="center" showCaption="false"}

### What is CodePen?

**CodePen** enables users to easily edit **HTML**, **CSS**, and **JavaScript** in **their browser**, and with **Archbee**, this process is even more streamlined, requiring no software installation. This integration enhances development efficiency and convenience.

The best part is that results can be seen in real-time, allowing for quicker debugging. Developers and designers can also create and share code snippets (called pens) with the rest of the world.

### What is CodePen used for?

1. **Style-Guide your project** - you can always use CodePen's online code editor to create the style for your project components. This way, you can ensure yours are not influenced by code intended to style other components. You can think of it as a blank canvas.
2. **Learn a new framework or library** - You don't need to set up a new environment every time you want to see if your changes work. The editor view simultaneously shows the three editing areas and the preview, updating the final results every time something changes.

### Use cases

1. A client can embed an Codepen URL on Archbee, in order to bring an example, that reinforces his documentation
2. Codepen embed can be used as a user guide, if it is a standard use in the customer's organisation

::codepen{url="https://codepen.io/DragosBulugean/embed/vqrgYq"}


[title] Google Setup
[path] INTEGRATIONS/Untitled/

### 1. Add a custom SAML app&#x20;

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/zQSTx6snevuxFGUf1gK3y_image.png" size="44" width="2528" height="1420" position="center" showCaption="false"}

### 2. Copy Google app config -> Archbee settings

:::hint{type="warning"}
Google Entity id must be copied to Archbee Issuer field
:::

::::VerticalSplit
:::VerticalSplitItem


![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/6zwaIVNxqKs59b5jwLBI__image.png)
:::

:::VerticalSplitItem


![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/YR6m33JH2688H3oD0HZ8l_image.png)
:::
::::

### 3. Copy Archbee Settings -> Google app config

::::VerticalSplit
:::VerticalSplitItem


![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/1nznRTXN9Sm1I_JZSco_I_image.png)
:::

:::VerticalSplitItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/cVgwlDEiMzLgLoS-_vrPM_image.png)




:::
::::

### 4. Login using saml&#x20;

You can click on "SAML Login Url" button and see if it works. Share login url with your team members to login/register via SAML.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/nSMuLccqFegz9-hqNa15t_image.png)


[title] Set up the repository
[path] INTEGRATIONS/GitHub/

## Set up the repository

Assuming you've already [completed the integration](https://www.archbee.com/docs/github), next step is to set up a repository.

You need to successfully set up and configure your repo so that Archbee can fetch the content in there and set it up nicely on our end.

:::hint{type="info"}
You can [fork this repository](https://github.com/dragosbulugean/slate).
:::

If the system finds a `.archbee.yaml` file in the root of your repository or other folders (in case you are using multipath) like this [.yaml file](https://github.com/dragosbulugean/slate/blob/master/.archbee.yaml), then we use that to organize the content.

:::hint{type="warning"}
Pay close attention to the .[yaml file](https://github.com/dragosbulugean/slate/blob/master/.archbee.yaml) here if you want to configure the folder where the markdown content is rendered from (or a summary document tree hierarchy).
:::

### Create .yaml file

Create a `.archbee.yaml` file with the following variable structure:

:::hint{type="danger"}
You must place the file in the root folder of your repository(ies). Make sure that the file stays there as this is your default path for other folders - in case you have multiple folders, you must copy the file to those folders.

How, you ask? Check how to [Sync multiple GitHub folders](docId\:jHFq2jhvsRW7YDiJrpcsE).
:::

### What do all these keys mean?

- `root: ./docs` : this property defines where's the directory containing the docs (can be replaced with `docsPath: ./docs`)
- `structure:`
  - `summary: summary.md` : reconstructs the document tree in the left navigation panel in Archbee. If there is none, we consider the folders to be the categories and mimic the file structure inside.
  - `assets: assets`
    &#x20;: the assets folder is relative to `docsPath`. Archbee will upload all files found in that folder (code files and images).
- `shadowDocs` : you need to define the code files/folders to be included as *Shadow docs*
- `publishSpace` : boolean, set to `true` if you want to publish the space to production portal after each commit

Example of an `archbee.yaml` config file:

:::CodeblockTabs
archbee.yaml

```yaml
root: doc-api
structure:
  summary: summary.md
  assets: assets
publishSpace: true
headerIncludes:  |
  <script>
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
  </script> 
```
:::

Example of an `archbee.json` config file:

:::CodeblockTabs
archbee.json

```json
{
  "root": "docfolderwithsummary",
  "structure": {
    "summary": "summary.md",
    "assets": ".archbee/assets"
  },
  "customJS":"",
  "customCSS":"* \n {  font-family: \"Comic Sans MS\", cursive, sans-serif; }",
  "footerTemplate": "",
  "headerIncludes": ""
}
```
:::

### Create summary.md file

We also recommend that you create a `summary.md` file. The `summary.md` reconstructs the document tree in the left navigation panel in Archbee. And it can help you organize your content nicely.

See an example of a `summary.md` file below:

:::CodeblockTabs
summary.md

```markdown
- [Introduction](1.md)

## Table of contents

- [Init](init.md)
- [Configure App](config.md)
- [Config Database](config-database.md)
- [Config Redis](config-redis.md)
- [Config Elastic Search](config-es.md)
- [Swagger](swagger-v2.json)

```
:::

## Use Markdown syntax with GitHub

Some content blocks can be rendered if you are using specific syntax.

Check the [Editor Markdown shortcuts](docId:9aaCRqJMq9JnYvzSgNOfs) to use these shortcuts.

## Add multiple repositories

Follow these simple steps to add multiple repositories and sync them with Archbee:

::::WorkflowBlock
:::WorkflowBlockItem
Go to your [GitHub](https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fsettings%2Finstallations) account connected with Archbee, and then navigate to the **Settings** page.

On the left sidebar, look for **Applications.**

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/HChEov2q-7IXyJVa81Mbj_github-appconfigure-light.png "GitHub applications page")
:::

:::WorkflowBlockItem
Click the **Configure&#x20;**&#x62;utton and when the new page opens, provide access to:

1. *All repositories* (this means that you can select any repo from your Archbee account)
2. *Only select repositories* (select any new repository you want to sync with Archbee)
3. Click Save



![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/zspijTRLT875JPad9Cecf_image.png "Select repositories")
:::

:::WorkflowBlockItem
Go back to your Archbee account.

From the left navigation panel, create a new **Space** -> choose **Write in GitHub** and select the newly added repositories.
:::
::::

## Import Open Api files

You can actually import Open Api files via GitHub. This feature works exactly like  [Importing OpenAPI / Swagger](docId\:C3Jz_iuwGeAEynhRJ5D-7) feature, including its settings. There are 2 important things to set up:

- paths to Open Api files (.json, .yml, .yaml) to be written in `summary.md` config file
- settings to be written in main config file under `docTreeOptions`:

:::CodeblockTabs
.archbee.yaml

```yaml
docsPath: ./myapp-docs
structure:
  summary: toc.md
  assets: assets
  docTreeOptions:
    openApiTryIt: false
    showDownloadOpenApiFile: true
    shouldCreateSchemaCategory: true
    shouldCreateIntro: true
    openApiLanguageExamples:
      - value: python
        label: py
      - value: javascript
        label: js
footerTemplate: ""
headerIncludes: ""

```
:::


[title] Typeform
[path] INTEGRATIONS/Embed Examples/

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/NP0RStpLY3XNQk31IvDRt_archbee-typeform.png" size="60" width="1200" height="676" position="center" showCaption="false"}

### What is Typeform?

Typeform is a powerful tool for creating engaging forms, and its integration into Archbee as an embedded block offers several benefits. Architects can easily gather feedback through interactive surveys, making it simple for users to respond.&#x20;

This streamlined process enhances collaboration and improves project insights, ensuring that valuable input is readily available for informed decision-making.

### Use cases

1. Typeform can be embedded within Archbee, to create an interaction or an action needed from the docs consumers;
2. Typeform embed can serve as a feedback tool for the clients documentatio;

***

### Typeform example

Below is an exemple of a Typeform embed:

::typeform{url="https://orioltorrillas.typeform.com/to/RrMqnU"}


[title] Embed Examples
[path] INTEGRATIONS/

## Enhance Your Documentation with Rich Content

Archbee offers a powerful suite of embed integrations that allow you to seamlessly incorporate content from various tools and platforms directly into your documents.

These integrations enable you to create richer, more dynamic documentation that enhances collaboration and communication within your team.

## How Embed Integrations Work

Embed integrations work by allowing you to insert content from external tools directly into your Archbee documents. To use an embed integration, you simply need to paste the embed link or code provided by the external tool into your Archbee document. Archbee will then automatically display the content within the document, making it easily accessible and interactive for your team members.

## Embed Integrations

Here are some popular software tools that you can embed into your Archbee documents:

::::LinkArray{contentSource="DOCS" sourceParentDocId="ejEgS_viSAOk25-lby1x0" childrenDocs="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" displayMode="CARD"}
:::LinkArrayItem{headerImage="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/At_k9otEG4zF8Kz3MBn6l_archbee-google.png" headerType="IMAGE" docId="mlArm0ZVG0YQrPwtZjsAL" displayMode="CARD" docSeoDescription="Discover how G-Suite embeds in Archbee enhance collaboration with Google Docs, Sheets, and Slides, enabling seamless real-time editing and productivity boosts."}
[G-Suite (Sheets / Docs / Slides)](docId\:mlArm0ZVG0YQrPwtZjsAL)
:::

:::LinkArrayItem{headerImage="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/79sI4WXzQ0KyQs8rlBA6o_archbee-airtable.png" headerType="IMAGE" docId="PDsxBKkiqfFODN3d7jALN" displayMode="CARD" docSeoDescription="Discover how Airtable enhances data management and collaboration in Archbee, allowing users to create relational databases for efficient organization and sharing."}
[Airtable](docId\:PDsxBKkiqfFODN3d7jALN)
:::

:::LinkArrayItem{headerImage="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/WCy-zP3e2ZVjO_2W0vV87_archbee-loom.png" headerType="IMAGE" docId="3m8IIfx1QCQmO4ngqb0IJ" displayMode="CARD" docSeoDescription="Discover how Loom's integrated video messaging in Archbee enhances communication with shareable videos, allowing users to create engaging presentations effortlessly."}
[Loom](docId:3m8IIfx1QCQmO4ngqb0IJ)
:::

:::LinkArrayItem{headerImage="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/_1fVMn2xhtdX2Y1X5zb-J_archbee-figma.png" headerType="IMAGE" docId="ziR0gErVx8W-93WDv-CmD" displayMode="CARD" docSeoDescription="Discover how Figma enhances UI design and collaboration with Archbee, enabling effective wireframing, prototyping, and client documentation integration for improved workflows."}
[Figma](docId\:ziR0gErVx8W-93WDv-CmD)
:::

:::LinkArrayItem{headerImage="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/9TPuaEmu9ywZTvl2iAypX_archbee-miro.png" headerType="IMAGE" docId="jI7mQzVxt8FRx1qkM1wM5" displayMode="CARD" docSeoDescription="Discover how Miro, a digital whiteboard, enhances collaboration and productivity in Archbee documentation with integrated video calls, templates, and remote workshops."}
[Miro](docId\:jI7mQzVxt8FRx1qkM1wM5)
:::

:::LinkArrayItem{headerImage="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/NP0RStpLY3XNQk31IvDRt_archbee-typeform.png" headerType="IMAGE" docId="9wBmEqWcfqpGik3UZSrxU" displayMode="CARD" docSeoDescription="Discover how to integrate Typeform into Archbee for creating engaging surveys, enabling architects to efficiently gather feedback and enhance collaboration."}
[Typeform](docId:9wBmEqWcfqpGik3UZSrxU)
:::

:::LinkArrayItem{headerImage="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/PsO_trGVe04Dz4f3EoBbE_archbee-trello.png" headerType="IMAGE" docId="BmVzi_khG1o5y7uSZXSeg" displayMode="CARD" docSeoDescription="Discover how Trello, a visual project management tool, integrates with Archbee for seamless task management, enhancing team collaboration and efficiency in one platform."}
[Trello](docId\:BmVzi_khG1o5y7uSZXSeg)
:::

:::LinkArrayItem{headerImage="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/Bvl-ub3oavd0E5Xf7Hpq-_archbee-codepen.png" headerType="IMAGE" docId="dGgkH9caIg-3GHEEkw2p-" displayMode="CARD" docSeoDescription="Discover how CodePen, integrated with Archbee, enhances coding efficiency by allowing real-time edits to HTML, CSS, and JS, perfect for style guides and educational use."}
[Codepen](docId\:dGgkH9caIg-3GHEEkw2p-)
:::

:::LinkArrayItem{headerImage="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/oWgOUOxvTR0fBkNxeeK3p_archbee-modealaytics.png" headerType="IMAGE" docId="qtw5_CGJ96zIlSmKGRsw7" displayMode="CARD" docSeoDescription="Discover Mode Analytics, a user-friendly web platform for data visualization and reporting, perfect for collaboration with Archbee, enhancing documentation with interactive visuals."}
[Mode Analytics](docId\:qtw5_CGJ96zIlSmKGRsw7)
:::

:::LinkArrayItem{headerImage="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/m1UlgT1lu0tyu-UWZHXVg_archbee-github.png" headerType="IMAGE" docId="mH-pVj2ztAy6K7-jcknnP" displayMode="CARD" docSeoDescription="Explore how GitHub enhances developer collaboration with Archbee, featuring Gists for easy sharing of code snippets and improved team communication."}
[Github Gist](docId\:mH-pVj2ztAy6K7-jcknnP)
:::

:::LinkArrayItem{headerImage="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/kgQ7P7ZbWpyHJrxgiS7ud_archbee-lucid.png" headerType="IMAGE" docId="xOZnAm8eG_zDb_YTV3tmZ" displayMode="CARD" docSeoDescription="Discover LucideChart, the ultimate diagramming tool for Archbee that enhances collaboration with real-time editing, intuitive design, and seamless integration for effective workflows."}
[Lucidchart](docId\:xOZnAm8eG_zDb_YTV3tmZ)
:::

:::LinkArrayItem{headerImage="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/ZKJJM2u1wyJ1y2yA-ASXS_archbee-jira.png" headerType="IMAGE" docId="F_mbzqaWv4mE2SDto2OoT" displayMode="CARD" docSeoDescription="Enhance collaboration and productivity with Archbee's Jira integration, enabling seamless embedding of Jira issues into documentation for improved project tracking and visibility."}
[Jira](docId\:F_mbzqaWv4mE2SDto2OoT)
:::
::::


[title] Anthropic Claude Connector
[path] INTEGRATIONS/

1. Login to [https://app.archbee.com](https://app.archbee.com) with the credentials we have provided
2. Login to Claude.ai
3. Add a custom connector with URL: `https://api.archbee.com/api/public-mcp-ds/sse`
4. Leave OAuth ClientId and OAuth Client Secret empty
5. You'll be redirected to an Archbee URL to approve the connection to Claude, click yes.
6. That's it. You can now ask questions to Claude and Archbee docs will provide context when selecting the Archbee connector in Claude.

[title] Archbee integrations: enhance your team's workflow
[path] INTEGRATIONS/

Archbee offers a wide range of integrations that connect our powerful documentation platform with your favorite tools and services. We aim to help you create a seamless workflow, improve collaboration, and boost your team's productivity.

By integrating our platform with your existing tools, you can create a more streamlined and efficient workspace. With Archbee integrations, you can:

- **Optimize communication**
  Connect with communication platforms like Slack, ensuring your team stays updated with the latest documentation changes and discussions.
- **Streamline project management**
  Integrate with project management tools like Jira and Trello, enabling your team to track progress and manage tasks effectively.
- **Enhance design collaboration**
  Work closely with designers by integrating Archbee with Figma and Lucidchart, making sharing and discussing design assets easier.
- **Automate workflows**
  Use Archbee with automation tools like Zapier to create powerful, customized workflows that save time and reduce manual effort.
- And many others. Check the [full list of integrations](https://www.archbee.com/integrations).

As you explore the integrations, you'll find step-by-step instructions, best practices, and examples to help you successfully connect and use each integration.

Start by browsing our integration guides and learn how to supercharge your experience with us today!

::::LinkArray
:::LinkArrayItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/RQFHo43zVeJOHOMK8Q_1h_github-integration.png)

See how to set up [GitHub](docId\:Pm3HtF9iCnqzcNFRQjqL3)
:::

:::LinkArrayItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/FcbQmnT6UrlZEkE6rQ7qZ_zapier-integration.png)

See how to set up [Zapier](docId:0G9cU2hHpm8XszRpZTdHF)
:::

:::LinkArrayItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/DuqePCHDkXDGnF7QDfqoH_intercom-integration.png)

See how to set up [Intercom](docId\:DWm3Pha0McItoKasQ3sRm)
:::

:::LinkArrayItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/yyY4UyQCjDrDgmmfZg6Z7_zendesc-integration.png)

See how to set up [Zendesk Federated Search](docId\:GNvL_LA83wf8aA7QJ93JS)
:::

:::LinkArrayItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/b8S1geLUGP6vMITbbu5DD_slack-integration.png)

See how to set up [Integration to Slack](docId\:TYvw4yUUdlMxmEo-1jNBf)
:::

:::LinkArrayItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/RgVJ5mQdmNTKlFDsBqwtj_embeded-integration.png)

Read more about [Embed Examples](docId\:ejEgS_viSAOk25-lby1x0)
:::
::::


[title] Mode Analytics
[path] INTEGRATIONS/Embed Examples/

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/oWgOUOxvTR0fBkNxeeK3p_archbee-modealaytics.png" size="60" width="1200" height="676" position="center" showCaption="false"}

### What is Mode Analytics?

[Mode Analytics](https://www.openbridge.com/tool/mode-mode-analytics) is a user-friendly, web-based analytics platform that excels in data visualization and reporting, making it an excellent tool when integrated with Archbee. Its intuitive design and strong collaboration features enhance teamwork and drive better decision-making.

Mode provides a robust reporting and analytics environment for teams to consume data via intuitive visualizations and reports.

### What Can Mode Analytics do?

- Provides easy analytics collaboration capabilities and external sharing options
- Helps produce compelling reports, dashboards, and visualizations
- Mode analytics SQL is supported, but no SQL knowledge required
- Self-service, easy to set up and use to explore data across the entire organization
- Combines powerful SQL, Python, and reporting capabilities
- Connects to your “source of truth” data from 15+ major databases, including Amazon Athena, Amazon Redshift, and Google BigQuery
- Provides a wide range of learning resources

### Use Cases

1. If a client is using Mode Analytics, he can embed it with Archbee, and add a visual aspect on the documentation he is using
2. The Mode Analytics embed, can also be used, to creat how-to's and guidelines on how to use it, for documentation consumers

It is important to mention that Mode creates interactive embeds. This helps for a better UX/UI.

[title] Space Links
[path] HOSTED SPACES/

Space Links is a feature that allows you to connect multiple published Spaces under unified navigation.

It’s a way for you to set up multi-product, multi-version documentation sites and link between User Guides, Developer Documentation, API docs.

### How to set up Space Links

::::WorkflowBlock
:::WorkflowBlockItem
Go to the Space where you added your subdomain - let’s call it the main Space - it's the one with an empty pathname.
:::

:::WorkflowBlockItem
Click on the gear icon ⚙️  for settings, then go to the Space Links tab.
:::

:::WorkflowBlockItem
Start building the Space Links:

1. Add the space that you are currently on as a Space Link itself in the "Link to Space" box (we are doing this to be able to go back to your space);
2. Add a label in the "Link Label" box (e.g., User Guide, Developer Documentation, API);
3. Click the blue <font color="#2166ae">**+ Add**</font>  button;
:::

:::WorkflowBlockItem
Repeat the add Space Link process until you wire up all the space links that you want.
:::

:::WorkflowBlockItem
Exit the Space Settings window and publish all linked Spaces.
:::
::::

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/J7Saz5CFOj0jcmShWElqV_spacelinks-light.png)

:::hint{type="info"}
### Eligible space links

All your created spaces might be unavailable in the Space Link dropdown selector. That is because we are filtering only the spaces without connections with others, or if they are eligible for space linking.
:::

While you can arrange and set up your Space Linking, behind the scenes, all your involved Spaces will replicate the same configuration. For example, let's take 2 spaces that are wired together, **User Guide** and **Developer Documentation**. While you are setting space linking on **User Guide** and wiring it together with **Developer Documentation**, you will find all your desired configurations replicated on **Developer Documentation**'s settings. 

Every time you do a change in the space link configuration, the configuration will be replicated on all the spaces involved.

Once published you will be able to see the changes in public spaces. Here's how it looks for your readers:

- &#x20;[External Links](docId\:Kio4-qxE2SdUF5ASSF5lC)

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/nR89QWlHALufg_-XcIIWo_external-show-light.png" darkSrc="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/2WClnlW_VHWu1JE2hyXMc_external-show-dark.png" size="100" width="3040" height="620" darkWidth="3040" darkHeight="620" position="center" caption="External Links view on Stripey template" showCaption="true" indent="2"}

- &#x20; [Version Links](docId\:fHqX4Nscf4gGNv9dI1Vsj)

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/TOPmUl06qBuQM-rrBB7dJ_version-show-light.png" darkSrc="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/WrupjEsKO49YjVm-97syY_version-show-dark.png" size="100" width="3040" height="620" darkWidth="3040" darkHeight="620" position="center" caption="Version Links view on Stripey template" showCaption="true" indent="2"}

- [Space Links](docId\:CFtSj1sEfjJUG3ZsDlvQq)

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/GMUSnq-ZKMSnLaSAeB8VZ_spacelinks-show-light.png" darkSrc="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/19NLdx7pHJZFNJzWHiE-Y_spacelinks-show-dark.png" size="100" width="3040" height="620" darkWidth="3040" darkHeight="620" position="center" caption="Space Links view on Stripey template" showCaption="true" indent="2"}


[title] Manage mail templates
[path] HOSTED SPACES/Untitled/

:::hint{type="danger"}
This setting can be applied to the Private Accounts & Magic link authentication options
:::

Our Mail Templates feature empowers you to customize the emails sent for password resets, new account registrations, and email signatures. With this feature, you can personalize the text and add custom branding (logo and colors), ensuring a consistent and professional look for your organization's email communications.

## Key Features

- **Customize Password Reset Emails** – Personalize the content users receive when resetting their password.
- **Modify New Account Emails** – Edit the welcome message for new users.
- **Set a Custom Signature** – Add a personalized sign-off for all emails.
- **Branding & Identity&#x20;**– Integrate your company logo and colors into email templates
- **Live Preview & Testing** – Send test emails to verify the final design before going live.

## How it works

::::WorkflowBlock
:::WorkflowBlockItem
**Step 1**: Access the Mail Templates Feature

- Navigate to **Space Settings** > **Public Access Control** > **Manage Mail Templates** in your dashboard.
- Here, you will see different email sections available for customization.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/AM5137HiDcJiDvjdX5ca5_image.png)
:::

:::WorkflowBlockItem
**Step 2:** Customize Email Messages

- **Forgot Password Message:** Modify the text for password reset emails.
- **New Account Message:** Edit the welcome email for newly registered users.
- **Ending & Signature:** Personalize how you Ending & Signature looks like
:::

:::WorkflowBlockItem
**Step 3**: Add Branding (Logo & Colors)

- Click **Customize Logo & Colors** to open branding settings.
- Upload your **company logo** to appear in all emails.
- Select custom **theme accent color** that align with your brand identity.
:::

:::WorkflowBlockItem
**Step 4**: Test and Deploy

- Use the **Send Test Email** button to preview how your emails will look.
- The customized emails will be sent automatically when triggered.
:::
::::

## Why Use Custom Mail Templates?

🚀 **Stronger Branding** – Reinforce trust with company-branded emails.
🎯 **Enhanced User Experience** – Provide clear, professional, and personalized communication.
💡 **Flexibility & Control** – Update messages anytime to match company tone or policy changes.


[title] Create Space
[path] PUBLIC API/DocSpace/

{
  "id": "wd0T_v8mNOuJtxbqkF0qP",
  "type": "api-oas-v2",
  "data": {
    "method": "POST",
    "url": "https://api.archbee.com/api/public-api/space/create",
    "servers": [
      {
        "url": "https://api.archbee.com/api/public-api/space/create",
        "description": "Archbee API Server"
      }
    ],
    "name": "Create Space",
    "description": "<p>Create a new space with desired fields, return its id. New space will inherit apiKey.</p>",
    "contentType": "application/json",
    "request": {
      "pathParameters": [],
      "headerParameters": [
        {
          "name": "accept",
          "type": "string",
          "kind": "optional",
          "description": "Generated from available response content types",
          "enum": [
            "application/json"
          ],
          "default": "application/json"
        },
        {
          "kind": "required",
          "name": "Content-Type",
          "type": "string",
          "example": "application/json",
          "description": ""
        }
      ],
      "queryParameters": [],
      "bodyDataParameters": [
        {
          "kind": "required",
          "name": "body",
          "type": "object",
          "description": "",
          "schema": [
            {
              "name": "name",
              "kind": "optional",
              "type": "string",
              "description": "name of space"
            },
            {
              "name": "isLlmEnabled",
              "kind": "optional",
              "type": "boolean",
              "description": "wether AI will be enabled"
            },
            {
              "name": "isReviewSystemEnabled",
              "kind": "optional",
              "type": "boolean",
              "description": "wether review system will be enaled"
            },
            {
              "name": "isBranchingSystemEnabled",
              "kind": "optional",
              "type": "boolean",
              "description": "wether branching will be enabled"
            },
            {
              "name": "docSpaceGroupId",
              "kind": "optional",
              "type": "string",
              "description": "id of space group to include this space in"
            }
          ],
          "isExpanded": true
        }
      ],
      "formDataParameters": [],
      "oAuthParameters": [
        {
          "id": "bearerAuth",
          "name": "bearerAuth",
          "kind": "optional",
          "type": "http",
          "description": "<p>Requires the <code>Authorization</code> header in the form <code>Authorization: Bearer {base64(docSpaceId~apiKey)}</code> Where the token is base64 encoding of docSpaceId, tilde, and apiKey.</p>",
          "scheme": "bearer"
        }
      ],
      "cookieParameters": []
    },
    "responses": [
      {
        "statusCode": "200",
        "description": "Process status",
        "jsonExample": "",
        "isExpanded": true,
        "schema": [
          {
            "kind": "optional",
            "type": "object",
            "description": "Process status",
            "schema": [
              {
                "name": "status",
                "kind": "optional",
                "type": "string<OK>",
                "description": "Response Status",
                "enum": [
                  "OK"
                ]
              },
              {
                "name": "data",
                "kind": "optional",
                "type": "object",
                "description": "DocSpace id",
                "example": "",
                "schema": [
                  {
                    "name": "newDocSpaceId",
                    "kind": "optional",
                    "type": "string",
                    "description": "doc space id"
                  }
                ]
              }
            ],
            "isExpanded": true
          }
        ]
      },
      {
        "statusCode": "400",
        "description": "Invalid request",
        "jsonExample": "",
        "isExpanded": true,
        "schema": [
          {
            "kind": "optional",
            "type": "object",
            "description": "",
            "customType": "Response400",
            "schema": [
              {
                "name": "status",
                "kind": "optional",
                "type": "string<OK | Not OK>",
                "description": "Response Status",
                "example": "Not OK",
                "enum": [
                  "OK",
                  "Not OK"
                ]
              },
              {
                "name": "messages",
                "kind": "optional",
                "type": "array",
                "description": "Array of messages",
                "example": "[\"Some error message\"]",
                "itemType": "string",
                "customType": "string[]",
                "itemExample": "Some error message",
                "itemDefault": ""
              }
            ],
            "modelRef": "#/components/schemas/Response400",
            "isExpanded": true
          }
        ]
      }
    ],
    "hasXCodeSamples": false
  },
  "children": [
    {
      "text": ""
    }
  ]
}
[title] Get document
[path] PUBLIC API/Doc/

{
  "id": "2FUXhkNWXaXUFxhdJc7iG",
  "type": "api-oas-v2",
  "data": {
    "method": "GET",
    "url": "https://api.archbee.com/api/public-api/doc",
    "servers": [
      {
        "url": "https://api.archbee.com/api/public-api/doc",
        "description": "Archbee API Server"
      }
    ],
    "name": "Get document",
    "description": "<p>Retrieve a document in <code>markdown</code>, <code>html</code>, <code>json</code>, or <code>source</code> format.</p>",
    "contentType": "application/json",
    "request": {
      "pathParameters": [],
      "headerParameters": [
        {
          "name": "accept",
          "type": "string",
          "kind": "optional",
          "description": "Generated from available response content types",
          "enum": [
            "application/json"
          ],
          "default": "application/json"
        },
        {
          "kind": "required",
          "name": "Content-Type",
          "type": "string",
          "example": "application/json",
          "description": ""
        }
      ],
      "queryParameters": [],
      "bodyDataParameters": [
        {
          "kind": "required",
          "name": "body",
          "type": "object",
          "description": "",
          "schema": [
            {
              "name": "docId",
              "kind": "required",
              "type": "string",
              "description": "The ID of the document to be returned.",
              "example": "21-character__string0"
            },
            {
              "name": "format",
              "kind": "optional",
              "type": "string<markdown | html | json | source>",
              "description": "<p>The format of the returned data. Default is <code>markdown</code>.</p>",
              "example": "markdown",
              "enum": [
                "markdown",
                "html",
                "json",
                "source"
              ]
            }
          ],
          "isExpanded": true
        }
      ],
      "formDataParameters": [],
      "oAuthParameters": [
        {
          "id": "bearerAuth",
          "name": "bearerAuth",
          "kind": "optional",
          "type": "http",
          "description": "<p>Requires the <code>Authorization</code> header in the form <code>Authorization: Bearer {base64(docSpaceId~apiKey)}</code> Where the token is base64 encoding of docSpaceId, tilde, and apiKey.</p>",
          "scheme": "bearer"
        }
      ],
      "cookieParameters": []
    },
    "responses": [
      {
        "statusCode": "200",
        "description": "Successful response containing the document content.",
        "jsonExample": "",
        "isExpanded": true,
        "schema": [
          {
            "kind": "optional",
            "type": "object",
            "description": "",
            "schema": [
              {
                "name": "content",
                "kind": "optional",
                "type": "string",
                "description": "The content of the document in the specified format."
              },
              {
                "name": "format",
                "kind": "optional",
                "type": "string",
                "description": "The format of the returned document."
              }
            ],
            "isExpanded": true
          }
        ]
      },
      {
        "statusCode": "400",
        "description": "Invalid request parameters.",
        "jsonExample": "",
        "isExpanded": true,
        "schema": [
          {
            "kind": "optional",
            "type": "object",
            "description": "",
            "customType": "Response400",
            "schema": [
              {
                "name": "status",
                "kind": "optional",
                "type": "string<OK | Not OK>",
                "description": "Response Status",
                "example": "Not OK",
                "enum": [
                  "OK",
                  "Not OK"
                ]
              },
              {
                "name": "messages",
                "kind": "optional",
                "type": "array",
                "description": "Array of messages",
                "example": "[\"Some error message\"]",
                "itemType": "string",
                "customType": "string[]",
                "itemExample": "Some error message",
                "itemDefault": ""
              }
            ],
            "modelRef": "#/components/schemas/Response400",
            "isExpanded": true
          }
        ]
      }
    ],
    "hasXCodeSamples": false,
    "examples": {
      "languages": [
        {
          "id": "s0VC0lPVpEXVqMC44zsgT",
          "language": "curl",
          "label": "cURL",
          "code": "curl --request GET \\\n     --url https://api.archbee.com/api/public-api/doc \\\n     --header 'accept: application/json' \\\n     --header 'content-type: application/json' \\\n     --data '{\n     \"docId\": \"21-character__string0\"\n     }'"
        },
        {
          "id": "1Uk4XrSqBzvjjbkf-qjNq",
          "language": "javascript",
          "label": "javascript",
          "code": "var myHeaders = new Headers();\nmyHeaders.append(\"accept\", \"application/json\");\nmyHeaders.append(\"content-type\", \"application/json\");\n\nvar raw = JSON.stringify({\n   \"docId\": \"21-character__string0\"\n});\n\nvar requestOptions = {\n   method: 'GET',\n   headers: myHeaders,\n   body: raw,\n   redirect: 'follow'\n};\n\nfetch(\"https://api.archbee.com/api/public-api/doc\", requestOptions)\n   .then(response => response.text())\n   .then(result => console.log(result))\n   .catch(error => console.log('error', error));"
        },
        {
          "id": "2DsudW-RSqnTd6FgTCjJW",
          "language": "ruby",
          "label": "Ruby",
          "code": "require \"uri\"\nrequire \"json\"\nrequire \"net/http\"\n\nurl = URI(\"https://api.archbee.com/api/public-api/doc\")\n\nhttps = Net::HTTP.new(url.host, url.port)\nhttps.use_ssl = true\n\nrequest = Net::HTTP::Get.new(url)\nrequest[\"accept\"] = \"application/json\"\nrequest[\"content-type\"] = \"application/json\"\nrequest.body = JSON.dump({\n   \"docId\": \"21-character__string0\"\n})\n\nresponse = https.request(request)\nputs response.read_body\n"
        },
        {
          "id": "o0Vx8m5h1kLugtD43dEaD",
          "language": "python",
          "label": "Python",
          "code": "import requests\nimport json\n\nurl = \"https://api.archbee.com/api/public-api/doc\"\n\npayload = json.dumps({\n   \"docId\": \"21-character__string0\"\n})\nheaders = {\n   'accept': 'application/json',\n   'content-type': 'application/json'\n}\n\nresponse = requests.request(\"GET\", url, headers=headers, data=payload)\n\nprint(response.text)\n"
        }
      ],
      "selectedLanguageId": "s0VC0lPVpEXVqMC44zsgT"
    },
    "results": {
      "languages": [
        {
          "id": "JdCZ5jbELnR2fSOt1sBUM",
          "language": "200",
          "code": "// Successful response containing the document content.\n{\n  \"content\": \"\",\n  \"format\": \"\"\n}"
        },
        {
          "id": "TijkwDiW3ic5s1KYt_ZRI",
          "language": "400",
          "code": "// Invalid request parameters.\n{\n  \"status\": \"Not OK\",\n  \"messages\": [\n    \"Some error message\"\n  ]\n}"
        }
      ],
      "selectedLanguageId": "JdCZ5jbELnR2fSOt1sBUM"
    }
  },
  "children": [
    {
      "text": ""
    }
  ]
}
[title] Organization Display Rules
[path] PUBLIC API/Organization/

{
  "id": "G4dZi-AVh4FAPpplIOiqW",
  "type": "api-oas-v2",
  "data": {
    "method": "GET",
    "url": "https://api.archbee.com/api/public-api/team/display-rules",
    "servers": [
      {
        "url": "https://api.archbee.com/api/public-api/team/display-rules",
        "description": "Archbee API Server"
      }
    ],
    "name": "Organization Display Rules",
    "description": "Export a list of display rules.",
    "contentType": "application/json",
    "request": {
      "pathParameters": [],
      "headerParameters": [
        {
          "name": "accept",
          "type": "string",
          "kind": "optional",
          "description": "Generated from available response content types",
          "enum": [
            "application/json"
          ],
          "default": "application/json"
        },
        {
          "kind": "required",
          "name": "Content-Type",
          "type": "string",
          "example": "application/json",
          "description": ""
        }
      ],
      "queryParameters": [],
      "bodyDataParameters": [
        {
          "kind": "required",
          "name": "body",
          "type": "object",
          "description": "",
          "schema": [
            {
              "name": "teamId",
              "kind": "required",
              "type": "string",
              "description": "Team id for which display rules are computed.",
              "example": "21-character__string0"
            }
          ],
          "isExpanded": true
        }
      ],
      "formDataParameters": [],
      "oAuthParameters": [
        {
          "id": "bearerAuth",
          "name": "bearerAuth",
          "kind": "optional",
          "type": "http",
          "description": "<p>Requires the <code>Authorization</code> header in the form <code>Authorization: Bearer {base64(docSpaceId~apiKey)}</code> Where the token is base64 encoding of docSpaceId, tilde, and apiKey.</p>",
          "scheme": "bearer"
        }
      ],
      "cookieParameters": []
    },
    "responses": [
      {
        "statusCode": "200",
        "description": "Successful export todo",
        "jsonExample": "",
        "isExpanded": true,
        "schema": [
          {
            "kind": "optional",
            "type": "object",
            "description": "",
            "schema": [
              {
                "name": "displayRules",
                "kind": "optional",
                "type": "array",
                "description": "",
                "example": "",
                "itemType": "object",
                "customType": "object[]",
                "schema": [
                  {
                    "name": "id",
                    "kind": "required",
                    "type": "string",
                    "description": "Unique identifier for the display rule",
                    "example": "wRJ1O4ChAK_lioQj39bHk"
                  },
                  {
                    "name": "title",
                    "kind": "required",
                    "type": "string",
                    "description": "<p>Human-readable title for the display rule</p>",
                    "example": "are gmail2"
                  },
                  {
                    "name": "combinator",
                    "kind": "required",
                    "type": "string<AND | OR>",
                    "description": "Logical operator to combine multiple rules",
                    "example": "AND",
                    "enum": [
                      "AND",
                      "OR"
                    ]
                  },
                  {
                    "name": "rules",
                    "kind": "required",
                    "type": "array",
                    "description": "Array of individual rules that define the conditions",
                    "example": "",
                    "itemType": "object",
                    "customType": "object[]",
                    "schema": [
                      {
                        "name": "field",
                        "kind": "required",
                        "type": "string",
                        "description": "The field to evaluate the condition against",
                        "example": "email"
                      },
                      {
                        "name": "operator",
                        "kind": "required",
                        "type": "string",
                        "description": "The comparison operator",
                        "example": "CONTAINS"
                      },
                      {
                        "name": "value",
                        "kind": "required",
                        "type": "string",
                        "description": "The value to compare against",
                        "example": "gmail.com"
                      }
                    ]
                  }
                ]
              }
            ],
            "isExpanded": true
          }
        ]
      },
      {
        "statusCode": "400",
        "description": "Invalid request",
        "jsonExample": "",
        "isExpanded": true,
        "schema": [
          {
            "kind": "optional",
            "type": "object",
            "description": "",
            "customType": "Response400",
            "schema": [
              {
                "name": "status",
                "kind": "optional",
                "type": "string<OK | Not OK>",
                "description": "Response Status",
                "example": "Not OK",
                "enum": [
                  "OK",
                  "Not OK"
                ]
              },
              {
                "name": "messages",
                "kind": "optional",
                "type": "array",
                "description": "Array of messages",
                "example": "[\"Some error message\"]",
                "itemType": "string",
                "customType": "string[]",
                "itemExample": "Some error message",
                "itemDefault": ""
              }
            ],
            "modelRef": "#/components/schemas/Response400",
            "isExpanded": true
          }
        ]
      }
    ],
    "hasXCodeSamples": false
  },
  "children": [
    {
      "text": ""
    }
  ]
}
[title] Export to PDF
[path] IMPORT & EXPORT/

The Export to PDF feature allows to generate a PDF for a Space or Document.

## Export a Document to PDF

To export a single Document to PDF you need to:

::::WorkflowBlock
:::WorkflowBlockItem
Go to the **Document Options** menu `⋮`&#x20;
:::

:::WorkflowBlockItem
&#x20;Select **Export&#x20;**>**&#x20;Export to PDF** options
:::
::::

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/iYCpcT-kNMYDz5EKEHyCP-20250917-221118.gif)

This will generate a PDF with the contents of your document.

***

## Export a Portal to PDF

To export an entire Portal Space as a PDF you need to:

::::WorkflowBlock
:::WorkflowBlockItem
Go to the Space and click the **Settings** icon ( ⚙️ )
:::

:::WorkflowBlockItem
In the **Apperance** tab, all the way down, you'll find the "**PDF Download button on portals**" toggle.
:::

:::WorkflowBlockItem
Click on the **PDF Download button on portals** card to enable it.
:::
::::

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/8qjgRcH8wL_fyWBcj-F8Z-20250917-220024.gif)

Now, each time you **publish** a Space, a PDF will be generated with the contents of the documents in that Space.&#x20;

:::hint{type="warning"}
🕑

This process will take a **few minutes&#x20;**&#x74;o generate the PDF, after which the button will be visible on the published portal.
:::

If you want to see the PDF export for this Space, you can find the download button on the top navigation bar highlighted below.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/MPolm7ePCnLhYPIDEskCJ-20250917-221434.gif)


[title] Miro
[path] INTEGRATIONS/Embed Examples/

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/9TPuaEmu9ywZTvl2iAypX_archbee-miro.png" size="60" width="1200" height="676" position="center" darkWidth="1200" darkHeight="676" showCaption="false"}

### What is Miro?

[Miro](https://miro.com/) is a digital whiteboard that improves collaboration. When used within Archbee documentation, Miro makes it easy to create notes and designs, rearrange items, and communicate effectively through embedded video calls and online chats.&#x20;

This integration helps teams work better together and enhances overall productivity.

The tool also comes with a series of pre-built templates that can inspire or serve as a starting place for your own project work. We like to use the online whiteboarding tool and applying Miro when leading real-time remote design thinking workshops.

### What can Miro be used for?

- Creating a list of ideas or topics to focus on for an important project
- Developing a user story or customer journey map
- Wireframing a new product concept or idea
- Laying out a roadmap or strategy for an innovation workshop or program
- Running a more engaging or innovative meeting for your team in an agile culture

### Use Cases

Miro embed can be used by the clients, to bring visual aspects to the documentation they have, without the need to import an image.

::miro{url="https://miro.com/app/embed/o9J_lU-qYRw=/?fromEmbed=1" aspectRatio="1"}


[title] Figma
[path] INTEGRATIONS/Embed Examples/

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/_1fVMn2xhtdX2Y1X5zb-J_archbee-figma.png" size="60" width="1200" height="676" position="center" showCaption="false"}

### What is Figma?

[Figma](https://www.figma.com/) is a powerful web-based graphics editing and user interface design tool that integrates seamlessly with Archbee. It enhances your workflow by allowing you to create wireframes, design mobile app interfaces, and prototype solutions collaboratively. This integration streamlines communication and optimizes project outcomes.

At its core, Figma is a tool made for user interface design and prototyping. Before moving forward, it’s best that you get a basic understanding of UI design. It’ll help you make the most of the free app.

### Use cases

1. Clients could use Figma embed, to reinforce their documentation
2. Figma embed could also be used as an user guide with multiple steps, along with documentation, and the client can make multiple embeds, to cover all the steps they need

::Iframely{originalUrl="https://www.figma.com/design/C0U7Tpnv2S5yVOkVVbFBJ7/Archbee-2026--Public-CMS-?node-id=0-1&t=n9KcoqvGrVo2Hv6Q-1" embedUrl="https://www.figma.com/design/C0U7Tpnv2S5yVOkVVbFBJ7/Archbee-2026--Public-CMS-?node-id=0-1" title="Archbee 2026 (Public/CMS)" html="<div style=&#x22;left: 0; width: 100%; height: 450px; position: relative;&#x22;><iframe src=&#x22;https://embed.figma.com/design/C0U7Tpnv2S5yVOkVVbFBJ7/Archbee-2026--Public-CMS-?embed-host=iframely&node-id=0-1&page-selector=1&theme=light&#x22; style=&#x22;top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;&#x22; allowfullscreen></iframe></div>"}


[title] App documentation widget - React
[path] HOSTED SPACES/

We have already explained some of the [benefits on Contextual documentation](docId\:UJ-aqN5Ga60vjb9Mkufhf)  in the previous chapter. This guide serves as an alternative for `React` and `NextJS` apps to integrate the Archbee app widget in a more elegant way.

## Integrate app widget

:::::WorkflowBlock
:::WorkflowBlockItem
Install our [npm package](https://www.npmjs.com/package/@archbee/app-widget):

```shell
# with npm
$ npm install --save @archbee/app-widget

# or with yarn
$ yarn add @archbee/app-widget
```
:::

::::WorkflowBlockItem
When the package is installed, go to your `jsx/tsx` file and instantiate the component:

:::CodeblockTabs
React

```typescript
import React from 'react';
import { ArchbeeAppWidget, AbWidgetRef } from '@archbee/app-widget'

function App() {
const widgetRef = useRef<AbWidgetRef>(null);

  return (
    <div>
        <ArchbeeAppWidget
            ref={widgetRef}
            spaceId={ /** published space id **/ }
            onWidgetOpen={() => { /** ... **/ }} // callback function called after widget has open
            onWidgetClose={() => { /** ... **/ }} // callback function called after widget has open
      >
        <button type='button' onClick={() => {
        <!-- Opens widget -->
            widgetRef.current?.open();
        }}>
          Open
        </button>
        
        <button type='button' onClick={() => {
        <!-- Closes widget -->
            widgetRef.current?.close();
        }}>
          Close
        </button>
        
        <button type='button' onClick={() => {
        <!-- Gets the instance of the widget if needed for various event manipulations. -->
            widgetRef.current?.instance();
        }}>
          Get widget instance
        </button>
      </ArchbeeAppWidget>
    </div>
  );
}
```
:::
::::

:::WorkflowBlockItem
You can also reference the info from **Space settings**:

1. Select your **Space&#x20;**&#x69;nside the editor.
2. Click on the gear icon (⚙️) to get into **Settings.**
3. Go to **Widget integration**.
4. Click the `React` tab and then on the copy button, and paste the code into your .`tsx/.jsx` file
:::
:::::

Now, the widget will handle everything behind the scenes. Don't worry, everything is bundled and minified. It's a mere 56Kb download and it loads asynchronously, so your users won't feel a difference.

### Component props

| **Property**        | **Type**             | **Required** | **Description**                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| ------------------- | -------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `spaceId`           | `string`             | `required`   | Pass the desired id to load your docs.                                                                                                                                                                                                                                                                                                                                                                                                            |
| `docId`             | `string`             | `optional`   | The doc where you want to open the widget docs. If `docId` is passed, `widgetType` is ignored, it will open in `docs` mode regardless of the prop passed.                                                                                                                                                                                                                                                                                         |
| `shareableToken`    | `string`             | `optional`   | Pass the shareableToken from your private links to protect your docs.                                                                                                                                                                                                                                                                                                                                                                             |
| `className`         | `string`             | `optional`   | Pass CSS classes to the `div` wrapper.                                                                                                                                                                                                                                                                                                                                                                                                            |
| `widgetType`        | `'docs' \| 'search'` | `optional`   | Default value is `docs`. This opens the widget with the desired behaviour. `docs` type will open the widget with the default behaviour, `search` will open a search widget bar that shows a search bar with AI support (if included in your subscription).                                                                                                                                                                                        |
| `hideNavbar`        | `boolean`            | `optional`   | It shows or hides the top navbar from the widget modal. By default the navbar is visible. If you don't want to see the navbar, pass it with `true` value, otherwise just skip it.                                                                                                                                                                                                                                                                 |
| `loadingStrategy`   | `'eager' \| 'lazy'`  | `optional`   | Default value is `lazy`. Loading strategy method for widget loading.                                                                                                                                                                                                                                                                                                                                                                              |
| `bubble`            | `invisible \| ask`   | `optional`   | The default value is `invisible`. If set to `ask`, it will display a bubble in the bottom-right of your screen. Whenever someone clicks on it, the search widget will open.                                                                                                                                                                                                                                                                       |
| `bubblePlaceholder` | `string`             | `optional`   | The placeholder that will be displayed in the bubble section. If not passed, a default value of `Ask a question` will be displayed.                                                                                                                                                                                                                                                                                                               |
| `anchor`            | `string`             | `optional`   | You can provide your `class`, `id` or `path` to a DOM element where you would like the widget to anchor and instantiate. It will anchor to the first element found in the DOM, if multiple elements with the same path are present. The container provided should have `position: relative` as the widget will be displayed based on the first **relative** **parent** found.<br />e.g.: `anchor: "#my-container"` / `anchor: ".container-class"` |
| `onWidgetOpen`      | `void`               | `optional`   | Callback that is called after the widget opens.                                                                                                                                                                                                                                                                                                                                                                                                   |
| `onWidgetClose`     | `void`               | `optional`   | Callback that is called after the widget closes.                                                                                                                                                                                                                                                                                                                                                                                                  |

:::hint{type="info"}
Shareable tokens are available in the [Scaling plan](https://www.archbee.com/pricing). Read more about [Public Access Controls](docId\:w7VFvxPMFYSPdg0xnzlK1).
:::

### Ref methods

:::hint{type="info"}
If `ref` is not passed to `ArchbeeAppWidget`, children will automatically open the modal pop-up upon after being clicked.
:::

| **Property** | **Type** | **Description**                     |
| ------------ | -------- | ----------------------------------- |
| `open`       | `method` | Opens widget programmatically.      |
| `close`      | `method` | Closes widget programmatically.     |
| `instance`   | `method` | Returns the instance of the widget. |


[title] Update / Create document
[path] PUBLIC API/Doc/

{
  "id": "cNAKDgXfVPiKoHAIHHwMt",
  "type": "api-oas-v2",
  "data": {
    "method": "POST",
    "url": "https://api.archbee.com/api/public-api/doc",
    "servers": [
      {
        "url": "https://api.archbee.com/api/public-api/doc",
        "description": "Archbee API Server"
      }
    ],
    "name": "Update / Create document",
    "description": "<p>Create / Update Doc by <code>docId</code></p>",
    "contentType": "application/json",
    "request": {
      "pathParameters": [],
      "headerParameters": [
        {
          "name": "accept",
          "type": "string",
          "kind": "optional",
          "description": "Generated from available response content types",
          "enum": [
            "application/json"
          ],
          "default": "application/json"
        },
        {
          "kind": "required",
          "name": "Content-Type",
          "type": "string",
          "example": "application/json",
          "description": ""
        }
      ],
      "queryParameters": [],
      "bodyDataParameters": [
        {
          "kind": "required",
          "name": "body",
          "type": "object",
          "description": "",
          "schema": [
            {
              "name": "content",
              "kind": "required",
              "type": "string",
              "description": "markdown or JSON content used to update the document.",
              "example": "# this is a h1 title\nAnd this is a paragraph\n- list item 1\n- list item 2"
            },
            {
              "name": "format",
              "kind": "optional",
              "type": "string<markdown | json>",
              "description": "OPTIONAL. Specify the format of the content. Default is markdown.",
              "example": "markdown",
              "enum": [
                "markdown",
                "json"
              ]
            },
            {
              "name": "title",
              "kind": "optional",
              "type": "string",
              "description": "<p>OPTIONAL, set the name of the document.</p>"
            },
            {
              "name": "description",
              "kind": "optional",
              "type": "string",
              "description": "<p>OPTIONAL, set the description of the document.</p>"
            },
            {
              "name": "previewImgURL",
              "kind": "optional",
              "type": "string",
              "description": "<p>OPTIONAL, set the preview image URL of the document.</p>"
            },
            {
              "name": "slug",
              "kind": "optional",
              "type": "string",
              "description": "<p>OPTIONAL, set the slug (url key) of the document.</p>"
            },
            {
              "name": "alias",
              "kind": "optional",
              "type": "string",
              "description": "<p>OPTIONAL, set the url alias.</p>"
            },
            {
              "name": "conditionalRuleId",
              "kind": "optional",
              "type": "string",
              "description": "<p>OPTIONAL, set the conditional rule id.</p>"
            },
            {
              "name": "sorting",
              "kind": "optional",
              "type": "string<alphabetical | chronological>",
              "description": "OPTIONAL. Specify the type of ordering for document insertion.",
              "example": "alphabetical",
              "enum": [
                "alphabetical",
                "chronological"
              ]
            },
            {
              "name": "hidden",
              "kind": "optional",
              "type": "boolean",
              "description": "<p>OPTIONAL, set document as hidden or not.</p>"
            },
            {
              "name": "docId",
              "kind": "optional",
              "type": "string",
              "description": "<p>OPTIONAL, document id. If present and valid, the doc will be updated.</p>",
              "example": "21-character__string0"
            },
            {
              "name": "parentDocId",
              "kind": "optional",
              "type": "string",
              "description": "<p>OPTIONAL, parent document id. If present and valid, the parent docId will be updated. If sent empty, the document will be moved to the root of the tree.</p>",
              "example": "21-character__string0"
            }
          ],
          "isExpanded": true
        }
      ],
      "formDataParameters": [],
      "oAuthParameters": [
        {
          "id": "bearerAuth",
          "name": "bearerAuth",
          "kind": "optional",
          "type": "http",
          "description": "<p>Requires the <code>Authorization</code> header in the form <code>Authorization: Bearer {base64(docSpaceId~apiKey)}</code> Where the token is base64 encoding of docSpaceId, tilde, and apiKey.</p>",
          "scheme": "bearer"
        }
      ],
      "cookieParameters": []
    },
    "responses": [
      {
        "statusCode": "200",
        "description": "Process status",
        "jsonExample": "",
        "isExpanded": true,
        "schema": [
          {
            "kind": "optional",
            "type": "object",
            "description": "Process status",
            "schema": [
              {
                "name": "status",
                "kind": "optional",
                "type": "string<OK>",
                "description": "Response status.",
                "enum": [
                  "OK"
                ]
              },
              {
                "name": "data",
                "kind": "optional",
                "type": "object",
                "description": "",
                "example": "",
                "schema": [
                  {
                    "name": "docId",
                    "kind": "optional",
                    "type": "string",
                    "description": ""
                  },
                  {
                    "name": "newRecord",
                    "kind": "optional",
                    "type": "boolean",
                    "description": ""
                  }
                ]
              }
            ],
            "isExpanded": true
          }
        ]
      },
      {
        "statusCode": "400",
        "description": "Invalid request",
        "jsonExample": "",
        "isExpanded": true,
        "schema": [
          {
            "kind": "optional",
            "type": "object",
            "description": "",
            "customType": "Response400",
            "schema": [
              {
                "name": "status",
                "kind": "optional",
                "type": "string<OK | Not OK>",
                "description": "Response Status",
                "example": "Not OK",
                "enum": [
                  "OK",
                  "Not OK"
                ]
              },
              {
                "name": "messages",
                "kind": "optional",
                "type": "array",
                "description": "Array of messages",
                "example": "[\"Some error message\"]",
                "itemType": "string",
                "customType": "string[]",
                "itemExample": "Some error message",
                "itemDefault": ""
              }
            ],
            "modelRef": "#/components/schemas/Response400",
            "isExpanded": true
          }
        ]
      }
    ],
    "hasXCodeSamples": false,
    "examples": {
      "languages": [
        {
          "id": "X74wJz2eY_bERoTPeApAf",
          "language": "curl",
          "label": "cURL",
          "code": "curl --request POST \\\n     --url https://api.archbee.com/api/public-api/doc \\\n     --header 'accept: application/json' \\\n     --header 'content-type: application/json' \\\n     --data '{\n     \"content\": \"# this is a h1 title\\nAnd this is a paragraph\\n- list item 1\\n- list item 2\"\n     }'"
        },
        {
          "id": "Hr0mJLqGRxSHb-0ewn9EO",
          "language": "javascript",
          "label": "javascript",
          "code": "var myHeaders = new Headers();\nmyHeaders.append(\"accept\", \"application/json\");\nmyHeaders.append(\"content-type\", \"application/json\");\n\nvar raw = JSON.stringify({\n   \"content\": \"# this is a h1 title\\nAnd this is a paragraph\\n- list item 1\\n- list item 2\"\n});\n\nvar requestOptions = {\n   method: 'POST',\n   headers: myHeaders,\n   body: raw,\n   redirect: 'follow'\n};\n\nfetch(\"https://api.archbee.com/api/public-api/doc\", requestOptions)\n   .then(response => response.text())\n   .then(result => console.log(result))\n   .catch(error => console.log('error', error));"
        },
        {
          "id": "ariQ4Ycf7at5Q2C5NNKvQ",
          "language": "ruby",
          "label": "Ruby",
          "code": "require \"uri\"\nrequire \"json\"\nrequire \"net/http\"\n\nurl = URI(\"https://api.archbee.com/api/public-api/doc\")\n\nhttps = Net::HTTP.new(url.host, url.port)\nhttps.use_ssl = true\n\nrequest = Net::HTTP::Post.new(url)\nrequest[\"accept\"] = \"application/json\"\nrequest[\"content-type\"] = \"application/json\"\nrequest.body = JSON.dump({\n   \"content\": \"# this is a h1 title\\nAnd this is a paragraph\\n- list item 1\\n- list item 2\"\n})\n\nresponse = https.request(request)\nputs response.read_body\n"
        },
        {
          "id": "ackUyK5O5MKf5zW_tXCpq",
          "language": "python",
          "label": "Python",
          "code": "import requests\nimport json\n\nurl = \"https://api.archbee.com/api/public-api/doc\"\n\npayload = json.dumps({\n   \"content\": \"# this is a h1 title\\nAnd this is a paragraph\\n- list item 1\\n- list item 2\"\n})\nheaders = {\n   'accept': 'application/json',\n   'content-type': 'application/json'\n}\n\nresponse = requests.request(\"POST\", url, headers=headers, data=payload)\n\nprint(response.text)\n"
        }
      ],
      "selectedLanguageId": "X74wJz2eY_bERoTPeApAf"
    },
    "results": {
      "languages": [
        {
          "id": "QbUiEY-HElSWdkr3w-FSh",
          "language": "200",
          "code": "// Process status\n{\n  \"status\": \"\",\n  \"data\": {\n    \"docId\": \"\",\n    \"newRecord\": false\n  }\n}"
        },
        {
          "id": "3eudO6vjoEW5pMk1SlzBV",
          "language": "400",
          "code": "// Invalid request\n{\n  \"status\": \"Not OK\",\n  \"messages\": [\n    \"Some error message\"\n  ]\n}"
        }
      ],
      "selectedLanguageId": "QbUiEY-HElSWdkr3w-FSh"
    }
  },
  "children": [
    {
      "text": ""
    }
  ]
}
[title] ORGANIZATIONS
[path] /


[title] OpenAPI Settings
[path] IMPORT & EXPORT/Importing OpenAPI / Swagger/

The OpenAPI Settings is the place where you can configure your imported OpenAPI file.

## How to get to the OpenAPI Settings

::::WorkflowBlock
:::WorkflowBlockItem
Go to the Space and click the **3 dots   ⫶**
:::

:::WorkflowBlockItem
Now click on **Open API Settings**
:::
::::

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/X3AaHVPyevfBHnY5UK2xz_openapi-intro-light.png)

***

### General

The General tab of the OpenAPI Settings will allow you to:

- Enable/disable the [API Try It!](docId\:kyNT6RPtjV_gjU-EgB3VW) feature (by default, this feature is **enabled**)
- **Show download Open API link**
- Create **Models Category**
- Write API **Intro**

***

### Sync Manually

The Sync Manually tab allows you to manually update your API file.

You can either add it from your local storage, or you can provide an URL to your file and Archbee will update it.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/IqyQl3_rBc8kJCseRjC7I_openapi-manual-light.png)

***

### Sync Through API

The Sync Through API allows you to use our public API to sync the OpenAPI file.&#x20;

This is a powerfull tool since it allows you to integrate it with your **CI/CD and make automatic updates** depending on your dev/deployment process.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/adRZbF1mNkyYgpljqAgNa_openapi-auto-light.png)

***

### Language Examples

From the language change you can change the programming language the code sample is shown in.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/GSZ4UidrkC4viuvtlq-SW_openapi-lang-light.png)

Each imported OpenAPI file has either on the right side or below a [code drawer](docId:9rc9lvIrREZCwra8j4lit) that contains the sample code of the API request.

By default this sample code is displayed in 4 programming languages:

- **cURL**
- **JS**
- **Python**
- **Ruby**

In the Language Change menu, you can update this settings and this is how:

::::WorkflowBlock
:::WorkflowBlockItem
Open the **Language Example** tab
:::

:::WorkflowBlockItem
To **add a new language** just select it from the drop-down menu or to **remove a language** just click the "X" button near it;

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/zh8Dggr5dhzy23xhldcyi_openapi-lang2-light.png)
:::

:::WorkflowBlockItem
Close the menu and check out the updated code drawer & code samples

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/1xLUwWXYb-sQuA16PCiIm_openapi-final-light.png)
:::
::::


[title] Zapier
[path] INTEGRATIONS/

### Create a new Archbee Zap and select an event

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/hhv42TQCkv7Il10Q1zWd7_image.png" size="70" width="1900" height="1174" position="center" showCaption="false"}

### Click "Connect a new account" or select an existing account

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/9JNbInklQrvV43fAZivgG_image.png" size="80" width="1860" height="1298" position="center" showCaption="false"}

### Zapier will open a pop-up where you will need to add `apiKey` and `docSpaceId`

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/5X0BWNDH8pSZyBuwCmhEg_image.png" size="60" width="1424" height="994" position="center" showCaption="false"}

To get an `apiKey`, you need to go to Archbee, select your docSpace, click settings, select api keys tab and click **Generate api key.**



::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/ENdc5AgPGBQD9bNj2cxYe_image.png" size="58" width="1956" height="1110" position="center" showCaption="false"}

To get a `docSpaceId` you can go to document info and copy doc space id



::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/1qFy5VCS0rH6BxCrnqOoT_image.png" size="74" width="1542" height="370" position="center" showCaption="false"}

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/TLz0j8BAGv9AffHFthliX_image.png" size="70" width="1344" height="502" position="center" showCaption="false"}

Now you can go back to zapier, to Archbee Zap and add a Zap action, in this example I will use Slack, to send a channel message.

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/A7v2TIa2l6I6seeSefsMM_image.png" size="66" width="1932" height="1174" position="center" showCaption="false"}



Now click and select Archbee doc fields what you would like to add to your slack message notification

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/NFSgaTiTkolI_SjUesVpP_image.png)

Now each time a document is added in Archbee, I will receive a Slack notification from Zapier in the selected Slack channel. One last step, in your case, do not forget to publish the Archbee Zap.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/enczKbZetmIFfx16Mge0s_image.png)



![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/Pci2UOMC_V1lwwM9RUyh-_image.png)


[title] API Try It!
[path] IMPORT & EXPORT/Importing OpenAPI / Swagger/

:::hint{type="info"}
The **TRY IT!** feature allows you to test your API directly in your browser. It works both on a published doc portal or directly inside the editor.
:::

## How to configure

The **Try It!** feature uses the [fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch), so in order for it to work, your API imports need to have the following:

- an absolute path URL to your API (not just a path)
  - add in your .yml file an URL as follows
- servers:
  - url example: https\://petstore3.swagger.io/api/v3 (your actual URL)
- authorization methods will be read from your api file and included in each API page
- CORS disabled or enabled for the documentation domain, so the users can actually test your API

## How it works

::::WorkflowBlock
:::WorkflowBlockItem
Import your API files ([direct import](docId\:C3Jz_iuwGeAEynhRJ5D-7) or [github sync](docId\:Pm3HtF9iCnqzcNFRQjqL3))
:::

:::WorkflowBlockItem
\[Optional] Define ["default"](docId\:C3Jz_iuwGeAEynhRJ5D-7) values in your OpenAPI file. This way, when you import your API all "default" values will be added to the code sample, and you can test your API immediately without the need to manually add values to params.
:::

:::WorkflowBlockItem
Configure the API method with the test params

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/wnjtlYGiV-WHIota1T9da_tryit-light.png)
:::

:::WorkflowBlockItem
After you update the parameters, the code sample on the right(or below, depending on how you set your view) will also update with the test params you added, providing you the code snippet of the request in several languages

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/WaqQRkD0Pzl7vY4HXPjWS_matching-items-light.png)
:::

:::WorkflowBlockItem
Hit the **Try it!** button and check out the response area, below the sample code

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/h3z_pRa5GGHM4S2OFI7nf_response-light.png)
:::
::::


[title] Sync Open Api document
[path] PUBLIC API/Open Api/

{
  "id": "8Lt6XxHg2nZP7qKyGLbyD",
  "type": "api-oas-v2",
  "data": {
    "method": "POST",
    "url": "https://api.archbee.com/api/public-api/sync-api-reference",
    "servers": [
      {
        "url": "https://api.archbee.com/api/public-api/sync-api-reference",
        "description": "Archbee API Server"
      }
    ],
    "name": "Sync Open Api document",
    "description": "Sync Open Api document with a new or existing Open Api tree",
    "contentType": "application/json",
    "request": {
      "pathParameters": [],
      "headerParameters": [
        {
          "name": "accept",
          "type": "string",
          "kind": "optional",
          "description": "Generated from available response content types",
          "enum": [
            "application/json"
          ],
          "default": "application/json"
        },
        {
          "kind": "required",
          "name": "Content-Type",
          "type": "string",
          "example": "multipart/form-data",
          "description": "",
          "default": "multipart/form-data"
        }
      ],
      "queryParameters": [],
      "bodyDataParameters": [],
      "formDataParameters": [
        {
          "kind": "optional",
          "name": "docTreeId",
          "type": "string",
          "example": "21-character__string0",
          "description": "<p>OPTIONAL, main category id where open api was imported; if undefined, a new docTree is created and its id is returned</p>",
          "default": "21-character__string0"
        },
        {
          "kind": "required",
          "name": "file",
          "type": "file",
          "example": "upload file",
          "description": "<p>Open api file, .json or .yml or .yaml or .zip</p>",
          "default": "@swagger.json",
          "format": "binary"
        },
        {
          "kind": "optional",
          "name": "type",
          "type": "string<openapi | postman>",
          "example": "openapi",
          "description": "Type of import file. Default openapi",
          "default": "openapi",
          "enum": [
            "openapi",
            "postman"
          ]
        },
        {
          "kind": "optional",
          "name": "openApiTryIt",
          "type": "string<true | false>",
          "example": true,
          "description": "OPTIONAL. You can now test your API's directly in the editor or on your published docs with the new API Try It!",
          "default": true,
          "enum": [
            "true",
            "false"
          ]
        },
        {
          "kind": "optional",
          "name": "openApiUseOwnBackend",
          "type": "string<true | false>",
          "example": false,
          "description": "<p>OPTIONAL. When 'Try It' is enabled, send requests directly from the browser to the URL defined in the OpenAPI spec instead of proxying through Archbee. Requires CORS configured on your backend.</p>",
          "default": false,
          "enum": [
            "true",
            "false"
          ]
        },
        {
          "kind": "optional",
          "name": "showDownloadOpenApiFile",
          "type": "string<true | false>",
          "example": true,
          "description": "<p>OPTIONAL. You can show/hide the download link of the imported Open API file in the Open API tree.</p>",
          "default": false,
          "enum": [
            "true",
            "false"
          ]
        },
        {
          "kind": "optional",
          "name": "shouldCreateSchemaCategory",
          "type": "string<true | false>",
          "example": true,
          "description": "OPTIONAL. You can create models category to display all your models.",
          "default": false,
          "enum": [
            "true",
            "false"
          ]
        },
        {
          "kind": "optional",
          "name": "shouldCreateIntro",
          "type": "string<true | false>",
          "example": true,
          "description": "OPTIONAL. You can create an additional document to display open api intro.",
          "default": false,
          "enum": [
            "true",
            "false"
          ]
        },
        {
          "kind": "optional",
          "name": "openApiLanguageExamples",
          "type": "list",
          "example": "[\"python\",\"r\",\"javascript\"]",
          "description": "OPTIONAL. Add your custom language examples. Maximum 5 programming language examples are allowed!"
        }
      ],
      "oAuthParameters": [
        {
          "id": "bearerAuth",
          "name": "bearerAuth",
          "kind": "optional",
          "type": "http",
          "description": "<p>Requires the <code>Authorization</code> header in the form <code>Authorization: Bearer {base64(docSpaceId~apiKey)}</code> Where the token is base64 encoding of docSpaceId, tilde, and apiKey.</p>",
          "scheme": "bearer"
        }
      ],
      "cookieParameters": []
    },
    "responses": [
      {
        "statusCode": "200",
        "description": "Import OK status",
        "jsonExample": "",
        "isExpanded": true,
        "schema": [
          {
            "kind": "optional",
            "type": "object",
            "description": "Import OK status",
            "schema": [
              {
                "name": "status",
                "kind": "optional",
                "type": "string<OK>",
                "description": "Response Status",
                "example": "OK",
                "enum": [
                  "OK"
                ]
              },
              {
                "name": "data",
                "kind": "optional",
                "type": "object",
                "description": "",
                "example": "",
                "schema": [
                  {
                    "name": "docTreeId",
                    "kind": "optional",
                    "type": "string",
                    "description": "<p>Returned created/updated open api tree structure.</p>",
                    "example": "21-character__string0"
                  }
                ]
              }
            ],
            "isExpanded": true
          }
        ]
      },
      {
        "statusCode": "400",
        "description": "Invalid request",
        "jsonExample": "",
        "isExpanded": true,
        "schema": [
          {
            "kind": "optional",
            "type": "object",
            "description": "",
            "customType": "Response400",
            "schema": [
              {
                "name": "status",
                "kind": "optional",
                "type": "string<OK | Not OK>",
                "description": "Response Status",
                "example": "Not OK",
                "enum": [
                  "OK",
                  "Not OK"
                ]
              },
              {
                "name": "messages",
                "kind": "optional",
                "type": "array",
                "description": "Array of messages",
                "example": "[\"Some error message\"]",
                "itemType": "string",
                "customType": "string[]",
                "itemExample": "Some error message",
                "itemDefault": ""
              }
            ],
            "modelRef": "#/components/schemas/Response400",
            "isExpanded": true
          }
        ]
      }
    ],
    "hasXCodeSamples": false,
    "examples": {
      "languages": [
        {
          "id": "la8pRKF9UrnYbtV7reBkG",
          "language": "curl",
          "label": "cURL",
          "code": "curl --request POST \\\n     --url https://api.archbee.com/api/public-api/sync-api-reference \\\n     --header 'accept: application/json' \\\n     --header 'content-type: multipart/form-data' \\\n     --form 'docTreeId=\"21-character__string0\"' \\\n     --form 'file=@\"/path/to/file\"' \\\n     --form 'type=\"openapi\"' \\\n     --form 'openApiTryIt=\"true\"' \\\n     --form 'openApiUseOwnBackend=\"true\"' \\\n     --form 'showDownloadOpenApiFile=\"true\"' \\\n     --form 'shouldCreateSchemaCategory=\"true\"' \\\n     --form 'shouldCreateIntro=\"true\"'"
        },
        {
          "id": "IuNBuzDT9SvvQmBhERQF3",
          "language": "javascript",
          "label": "javascript",
          "code": "var myHeaders = new Headers();\nmyHeaders.append(\"accept\", \"application/json\");\nmyHeaders.append(\"content-type\", \"multipart/form-data\");\n\nvar formdata = new FormData();\nformdata.append(\"docTreeId\", \"21-character__string0\");\nformdata.append(\"file\", fileInput.files[0], \"file\");\nformdata.append(\"type\", \"openapi\");\nformdata.append(\"openApiTryIt\", \"true\");\nformdata.append(\"openApiUseOwnBackend\", \"true\");\nformdata.append(\"showDownloadOpenApiFile\", \"true\");\nformdata.append(\"shouldCreateSchemaCategory\", \"true\");\nformdata.append(\"shouldCreateIntro\", \"true\");\n\nvar requestOptions = {\n   method: 'POST',\n   headers: myHeaders,\n   body: formdata,\n   redirect: 'follow'\n};\n\nfetch(\"https://api.archbee.com/api/public-api/sync-api-reference\", requestOptions)\n   .then(response => response.text())\n   .then(result => console.log(result))\n   .catch(error => console.log('error', error));"
        },
        {
          "id": "nW6wOlSyXHm03ZqkKalNV",
          "language": "ruby",
          "label": "Ruby",
          "code": "require \"uri\"\nrequire \"net/http\"\n\nurl = URI(\"https://api.archbee.com/api/public-api/sync-api-reference\")\n\nhttps = Net::HTTP.new(url.host, url.port)\nhttps.use_ssl = true\n\nrequest = Net::HTTP::Post.new(url)\nrequest[\"accept\"] = \"application/json\"\nrequest[\"content-type\"] = \"multipart/form-data\"\nform_data = [['docTreeId', File.open('undefined')],['file', File.open('/path/to/file')],['type', File.open('undefined')],['openApiTryIt', File.open('undefined')],['openApiUseOwnBackend', File.open('undefined')],['showDownloadOpenApiFile', File.open('undefined')],['shouldCreateSchemaCategory', File.open('undefined')],['shouldCreateIntro', File.open('undefined')]]\nrequest.set_form form_data, 'multipart/form-data'\nresponse = https.request(request)\nputs response.read_body\n"
        },
        {
          "id": "IQDE7QLp_kem_Hgbyteau",
          "language": "python",
          "label": "Python",
          "code": "import requests\n\nurl = \"https://api.archbee.com/api/public-api/sync-api-reference\"\n\npayload = {}\nfiles=[\n   ('file',('file',open('/path/to/file','rb'),'application/octet-stream'))\n]\nheaders = {\n   'accept': 'application/json',\n   'content-type': 'multipart/form-data'\n}\n\nresponse = requests.request(\"POST\", url, headers=headers, data=payload, files=files)\n\nprint(response.text)\n"
        }
      ],
      "selectedLanguageId": "la8pRKF9UrnYbtV7reBkG"
    },
    "results": {
      "languages": [
        {
          "id": "zhKMx8U5X-QY99Aas2y5j",
          "language": "200",
          "code": "// Import OK status\n{\n  \"status\": \"OK\",\n  \"data\": {\n    \"docTreeId\": \"21-character__string0\"\n  }\n}"
        },
        {
          "id": "lQeC8dF08DjmL29BnNjfB",
          "language": "400",
          "code": "// Invalid request\n{\n  \"status\": \"Not OK\",\n  \"messages\": [\n    \"Some error message\"\n  ]\n}"
        }
      ],
      "selectedLanguageId": "zhKMx8U5X-QY99Aas2y5j"
    }
  },
  "children": [
    {
      "text": ""
    }
  ]
}
[title] Subscriptions & Payment
[path] ORGANIZATIONS/

There's a couple of things to know when you decide to purchase a subscription to Archbee.

- Subscriptions are assigned to Organizations, not users. That means:
  - You can have multiple subscriptions at the same time: started and charged at different times;
  - You can be in Organization you do not pay for, others do;
  - You cannot transfer a subscription to another Organization in the user interface, but by contacting our support to do it manually for you;
- We charge your card in advance for each month;
- Users are added automatically to your invoice and our payment gateway (Stripe) will prorate your invoices: for example, if you add a user in the middle of a month, the next invoice you will see a charge for 1 month and a half (this current half of month + the next month);
- You can update your card anytime in the payment section;
- Annual subscriptions are available at 20% discount.


[title] Landing page templates
[path] HOSTED SPACES/Custom Landing Page/

Archbee provides white label Landing Page templates so you can easily create a branded landing page for your doc portal

# How to get the Custom Code

::::WorkflowBlock
:::WorkflowBlockItem
From our GIT repo (coming soon)
:::

:::WorkflowBlockItem
Copy-paste the custom code from our documentation to Space Settings

[Template 1](docId\:obJJlF5q6uk4p1HexGVxb)

[Template 2](docId\:yAaMkJhRzkTKDJZqJKtqe)
:::
::::

# How to use

To set up your Custom Landing Page you must copy our custom code to Space Settings -> Custom Code and Landing Page sections.

For each Template you will have 3 files: `index.html`, `script.js` and `style.css`

The 3 files can be found below for each Template:

- [Template 1](docId\:obJJlF5q6uk4p1HexGVxb)
- [Template 2](docId\:yAaMkJhRzkTKDJZqJKtqe)

::::WorkflowBlock
:::WorkflowBlockItem
## Include Headers tab&#x20;

Copy the `Include Headers` section from `index.html`

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/PPZ9fNNaAwAtqJRocLOO4_screenshot-2023-06-07-at-135912.png)

Paste it in the `Include Headers` section of **Space Settings -> Custom Code**

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/9wpy-5_oml6i5wV31KY5g_screenshot-2023-06-07-at-140440.png)

Make sure it includes the `<head>` tags and press `Save`
:::

:::WorkflowBlockItem
## Custom CSS tab

Copy the content of the `stlye.css` file

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/k_yNxjgap0NaqWKYpUmpM_screenshot-2023-06-07-at-140754.png)

And add it to the `Custom CSS` section from Space Settings -> Custom Code. Ensure they are enclosed in `<style></style>` tags.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/aums9GUiCrJePpu6WSwXZ_screenshot-2023-06-07-at-142032.png)

The style code starts with a few variable declarations, which can be used to easily change the theme of the page:

```css
:root {
  --accent-text: #2166ae;
  --secondary-text: #0a4563;
  --primary-text: #24292e;
  --background-color: #fff;
  --primary-link: #999;
  --accent-link: var(--accent-text);
  --header-title-color: #fff;
  --header-subtitle-color: #fff;
}
```
:::

:::WorkflowBlockItem
## Custom JavaScript

Copy the code from `script.js`

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/Qil2KIP5JCUdEODOWrbz-_screenshot-2023-06-07-at-142616.png)

Add it to the `Custom Javascript` section from Space Settings -> Custom Code

Make sure they are enclosed in `<script></script>` tags.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/Hom4i2ZWF0LRp6Hm1a7jC_screenshot-2023-06-07-at-142916.png)
:::

:::WorkflowBlockItem
## Landing page HTML

Copy the HTML code from `index.html` starting from the `<!-- START Landing page -- >` comment.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/b7ahvKWfrOGCUrXoUxdc8_screenshot-2023-06-07-at-143259.png)

Select the `Custom HTML` landing page type and then add the html code in the container that appears below.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/tFoqTxNLlu5FkvbT0ZJjI_screenshot-2023-06-07-at-143638.png)
:::

:::WorkflowBlockItem
### How to customise the code

### Logo + images

All images and logos are defined with placeholders with the format: `<img src="https://placehold.co/..." ... />` as exemplified below:

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/Gx4-31jpVXRmSAmGygqU7_screenshot-2023-06-07-at-182855.png)

### Navbar links

Navbar contains a few of links that can be used to navigate inside or outside the doc. At the end of the list there is also a commented link that can be used to add other links if need.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/4YOxDQq-aZ7nm0pWkBFLb_image.png)

### Hero section

Contains a background image and a title and subtitle (the colors of these can be changed in the style [Styles](docId\:x0t9gO5mazn2uKSgR03X3) section)

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/PyQLTE3oBRKqUAB35X6_v_image.png)

### Document blocks

A list of blocks containing an icon, a title, a description and a button, generally used to navigate to your docs. An example is commented out at the end of list.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/p8s7b8wG7-NnClHGhgy_I_image.png)
:::
::::










[title] RSS Feed
[path] HOSTED SPACES/

*Use RSS to passively notify readers about documentation updates without emails or manual check-ins.*

***

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/631VIvjjyfqVH8qR7qd_8-20260202-234020.jpg)

## Overview

The **RSS Feed** feature lets readers subscribe to updates from your published portal using any standard RSS reader (such as Feedly or Inoreader). When enabled, Archbee generates an RSS feed for the portal and displays an RSS icon directly on the published site.

This is ideal when you want customers or internal readers to stay informed about newly published content or updates to existing documentation, without relying on email notifications or manual visits.

## How It Works

When RSS is enabled for a space, Archbee:

- Generates an RSS feed for that space’s published portal
- Displays an RSS icon in the portal UI
- Allows readers to subscribe using any compatible RSS app

Only published content is included in the feed.

## Enable RSS Feed (Space Settings)

This step is typically performed by space owners during initial portal setup, before sharing the portal with readers.

To enable RSS for a space:

::::WorkflowBlock
:::WorkflowBlockItem
Open the relevant **Space Dashboard**.
:::

:::WorkflowBlockItem
Click on the **Appearance&#x20;**&#x74;ab.
:::

:::WorkflowBlockItem
Turn on **RSS Feed**.&#x20;

Scroll to the bottom of the page to see **"Potrtal Interaction"** section
:::

:::WorkflowBlockItem
**Publish Space&#x20;**&#x74;o enable it on your portal.
:::
::::

RSS is enabled **per space** from the **Appearance** settings. If the space belongs to a **Space Group**, this setting can also be synchronized through the group’s settings.

:::hint{type="info"}
**Publish Docs (So They Appear in the Feed)**

The RSS feed includes only content that is published to the portal. Drafts or unpublished updates will not appear until they are published.
:::

## Subscribe to the Portal RSS Feed

Once RSS is enabled and the portal is published, readers will see an RSS icon on the published portal.

To subscribe:

::::WorkflowBlock
:::WorkflowBlockItem
Open the **published portal** in a browser.
:::

:::WorkflowBlockItem
Click on the **RSS icon&#x20;**
:::

:::WorkflowBlockItem
Subscribe using your preferred RSS reader.
:::
::::

Depending on the browser, the RSS URL may open directly or require copying the feed URL into an RSS app manually.

## Recommended Use Cases

RSS works best for portals where updates matter. Common examples include:

::::LinkArray{contentSource="CUSTOM"}
:::LinkArrayItem
:FontAwesome[]{icon="fa-solid fa-note-sticky"}&#x20;

Release notes or product changelogs
:::

:::LinkArrayItem
:FontAwesome[]{icon="fa-solid fa-code"}&#x20;

API documentation
:::

:::LinkArrayItem
:FontAwesome[]{icon="fa-solid fa-newspaper"}&#x20;

Announcements or policy updates
:::
::::

## Best Practices

To make RSS subscriptions valuable for readers:

- Maintain a clear **What’s New** or **Changelog** section.
- Publish updates consistently.
- Let readers know RSS is available (for example, on the portal homepage or during onboarding).
- Test the feed in at least one popular RSS reader to ensure updates appear correctly.

## FAQ

:::ExpandableHeading
**Does RSS include drafts or private documents?**

No. Only content that is published to the portal is included in the RSS feed.
:::

***

:::ExpandableHeading
**Is RSS enabled per space or globally?**

RSS is enabled per space. It can be managed individually from **Appearance** settings or synchronized through **Space Group settings** when applicable.
:::

***

:::ExpandableHeading
**Can readers subscribe from mobile devices?**

Yes. Any RSS reader that supports adding a feed URL can subscribe on mobile.
:::


[title] Search document
[path] PUBLIC API/Doc/

{
  "id": "aNbktNRDKcwwxPl2nlPgs",
  "type": "api-oas-v2",
  "data": {
    "method": "POST",
    "url": "https://api.archbee.com/api/public-api/docs/search",
    "servers": [
      {
        "url": "https://api.archbee.com/api/public-api/docs/search",
        "description": "Archbee API Server"
      }
    ],
    "name": "Search document",
    "description": "<p>Search Archbee documents in docSpace. Can perform one of the 3 types of search:</p>\n<ol>\n<li><strong>ai-chat</strong> to return ai generative answer accompanied by source docs;</li>\n<li><strong>ai-retrieval</strong> to return just similar docs with the query;</li>\n<li><strong>words</strong> to perform normal search aka. \"word-based\"; use empty query to return all docs</li>\n<li><strong>single-doc</strong> to return document info by id</li>\n</ol>",
    "contentType": "application/json",
    "request": {
      "pathParameters": [],
      "headerParameters": [
        {
          "name": "accept",
          "type": "string",
          "kind": "optional",
          "description": "Generated from available response content types",
          "enum": [
            "application/json"
          ],
          "default": "application/json"
        },
        {
          "kind": "required",
          "name": "Content-Type",
          "type": "string",
          "example": "application/json",
          "description": ""
        }
      ],
      "queryParameters": [],
      "bodyDataParameters": [
        {
          "kind": "required",
          "name": "body",
          "type": "object",
          "description": "",
          "schema": [
            {
              "name": "query",
              "kind": "required",
              "type": "string",
              "description": "<p>Filter text, question or document title</p>"
            },
            {
              "name": "searchOnlyTitle",
              "kind": "optional",
              "type": "boolean",
              "description": "OPTIONAL. Search only by title"
            },
            {
              "name": "persistSearch",
              "kind": "optional",
              "type": "boolean",
              "description": "OPTIONAL. Wether to keep a SearchSession in our database and return its id."
            },
            {
              "name": "searchSessionId",
              "kind": "optional",
              "type": "string",
              "description": "OPTIONAL. id for the SearchSession object to update. More useful for AI chat."
            },
            {
              "name": "docId",
              "kind": "optional",
              "type": "string",
              "description": "<p>OPTIONAL. Return only one document with this id, if there is one</p>",
              "example": "21-character__string0"
            },
            {
              "name": "dataTextFormat",
              "kind": "optional",
              "type": "string<markdown | html>",
              "description": "OPTIONAL. Return documents with dataText in this format",
              "enum": [
                "markdown",
                "html"
              ]
            },
            {
              "name": "parentDocId",
              "kind": "optional",
              "type": "string",
              "description": "<p>OPTIONAL. Return only child documents of the doc with this id, if there are any. Can be \"null\" for retrieving the root docs.</p>",
              "example": "21-character__string0"
            },
            {
              "name": "type",
              "kind": "optional",
              "type": "string<words | ai-chat | ai-retrieval>",
              "description": "<p>OPTIONAL. which type of search to use; default is word-based</p>",
              "enum": [
                "words",
                "ai-chat",
                "ai-retrieval"
              ]
            }
          ],
          "isExpanded": true
        }
      ],
      "formDataParameters": [],
      "oAuthParameters": [
        {
          "id": "bearerAuth",
          "name": "bearerAuth",
          "kind": "optional",
          "type": "http",
          "description": "<p>Requires the <code>Authorization</code> header in the form <code>Authorization: Bearer {base64(docSpaceId~apiKey)}</code> Where the token is base64 encoding of docSpaceId, tilde, and apiKey.</p>",
          "scheme": "bearer"
        }
      ],
      "cookieParameters": []
    },
    "responses": [
      {
        "statusCode": "200",
        "description": "Process status",
        "jsonExample": "",
        "isExpanded": true,
        "schema": [
          {
            "kind": "optional",
            "type": "object",
            "description": "Process status",
            "schema": [
              {
                "name": "status",
                "kind": "optional",
                "type": "string<OK>",
                "description": "Response Status",
                "enum": [
                  "OK"
                ]
              },
              {
                "name": "data",
                "kind": "optional",
                "type": "object",
                "description": "Response Data",
                "example": "",
                "schema": [
                  {
                    "name": "searchSessionId",
                    "kind": "optional",
                    "type": "string",
                    "description": "<p>Search session id, can be used as input for next search calls.</p>"
                  },
                  {
                    "name": "docs",
                    "kind": "optional",
                    "type": "array",
                    "description": "Array of Doc responses",
                    "modelRef": "#/components/schemas/DocResponse",
                    "customType": "DocResponse[]",
                    "schema": [
                      {
                        "name": "id",
                        "kind": "optional",
                        "type": "string",
                        "description": "<p>Archbee id, used for private access</p>"
                      },
                      {
                        "name": "name",
                        "kind": "optional",
                        "type": "string",
                        "description": "name of document"
                      },
                      {
                        "name": "urlKey",
                        "kind": "optional",
                        "type": "string",
                        "description": "<p>url of public document, used for public access (if published)</p>"
                      },
                      {
                        "name": "urlAlias",
                        "kind": "optional",
                        "type": "string",
                        "description": "<p>In case you are migrating from another platform and you’d like to get a redirecting url to your current url, you can use this url path.</p>"
                      },
                      {
                        "name": "hidden",
                        "kind": "optional",
                        "type": "boolean",
                        "description": "indicates if document is hidden"
                      },
                      {
                        "name": "privacy",
                        "kind": "optional",
                        "type": "string<private | shared with team | public-via-link | public>",
                        "description": "<p>describes how to access the document via public url (if published)</p>",
                        "enum": [
                          "private",
                          "shared with team",
                          "public-via-link",
                          "public"
                        ]
                      },
                      {
                        "name": "highlight",
                        "kind": "optional",
                        "type": "object",
                        "description": "<p>text from document, similar with query (word-based search only)</p>",
                        "example": "",
                        "schema": []
                      }
                    ]
                  }
                ]
              }
            ],
            "isExpanded": true
          }
        ]
      },
      {
        "statusCode": "400",
        "description": "Invalid request",
        "jsonExample": "",
        "isExpanded": true,
        "schema": [
          {
            "kind": "optional",
            "type": "object",
            "description": "",
            "customType": "Response400",
            "schema": [
              {
                "name": "status",
                "kind": "optional",
                "type": "string<OK | Not OK>",
                "description": "Response Status",
                "example": "Not OK",
                "enum": [
                  "OK",
                  "Not OK"
                ]
              },
              {
                "name": "messages",
                "kind": "optional",
                "type": "array",
                "description": "Array of messages",
                "example": "[\"Some error message\"]",
                "itemType": "string",
                "customType": "string[]",
                "itemExample": "Some error message",
                "itemDefault": ""
              }
            ],
            "modelRef": "#/components/schemas/Response400",
            "isExpanded": true
          }
        ]
      }
    ],
    "hasXCodeSamples": false
  },
  "children": [
    {
      "text": ""
    }
  ]
}
[title] INTEGRATIONS
[path] /


[title] Lucidchart
[path] INTEGRATIONS/Embed Examples/

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/kgQ7P7ZbWpyHJrxgiS7ud_archbee-lucid.png" size="60" width="1200" height="676" position="center" showCaption="false"}

## What is Lucidechart?

LucideChart is a powerful diagramming tool that enhances collaboration and visualization for teams and individuals within Archbee.&#x20;

Users can easily create various diagrams, such as flowcharts and org charts. By using LucideChart, teams can improve workflows, boost creativity, and have clearer discussions on complex ideas.

## Benefits of Using LucideChart

LucideChart is a powerful diagramming tool designed to enhance collaboration and streamline the creation of professional diagrams. Below are key features that highlight its benefits:

- **Enhanced Collaboration:**
  Allows multiple users to work simultaneously, boosting real-time collaboration and encouraging team input for more comprehensive diagrams.
- **User-Friendly Interface:**
  Intuitive drag-and-drop design simplifies diagram creation for all skill levels, supported by an extensive library of shapes and templates.
- **Integration with Archbee:**
  Seamlessly embeds diagrams within Archbee documentation, improving readability and aesthetics while making complex information more accessible.

### 1. Enhanced Collaboration

LucideChart allows multiple users to work on a document simultaneously, facilitating real-time collaboration. This feature not only speeds up the design process but also encourages input from team members, leading to more robust and comprehensive diagrams.

### 2. User-Friendly Interface

With an intuitive drag-and-drop interface, LucideChart makes it easy for users of all skill levels to create professional-looking diagrams. The extensive library of shapes and templates further simplifies the creation process.

### 3. Integration with Archbee

LucideChart seamlessly integrates with Archbee, enabling users to embed diagrams directly within their documentation. This integration enhances the readability and aesthetics of Archbee documents, making complex information more accessible and engaging.

## Use Cases

LucideChart is an essential tool for professionals across various fields, enabling the creation of visual representations that enhance clarity and collaboration. Its versatile capabilities cater to multiple use cases:

- **Software Development:**
  - Create UML diagrams and architecture visuals for clear system representation.
  - Enhance communication among teams and stakeholders.
- **Project Management:**
  - Design Gantt charts and workflow diagrams for effective planning and monitoring.
  - Visualize project timelines and task dependencies to streamline workflows.
- **Business Strategy:**
  - Develop organizational charts and marketing funnels for strategic planning.
  - Improve decision-making and performance tracking across initiatives.

***

Here is a live example:

::lucidchart{url="https://app.lucidchart.com/documents/embeddedchart/1fc96c13-eef8-4db5-9d7e-a8a0264af1a7"}


[title] Questions & Answers
[path] HOSTED SPACES/Insights/

:::hint{type="warning"}
QnA addon is required for this feature
:::

- [Enabling Question & Answer feature](docId\:f_25pN_k5w_obW2C0qVxg)&#x20;

## How It Works

**Tracking  QnA Conversations**:

1. Every question posed by users through the Q\&A section is automatically logged.
2. Answers provided by team members or automated systems are also recorded, creating a comprehensive conversation history.

Curious about the historical conversations within the Q\&A feature? Simply click the **chevron button (>)** at the end of the row to explore the details of each conversation. Want to know if the thread has been resolved? Discover the answers now!

[title] Public Access Controls
[path] HOSTED SPACES/

By default, a public Space *does not have any authentication method*, but you can choose and set a few:

- **Space-wide password**;
- [Guest Accounts](docId\:w7VFvxPMFYSPdg0xnzlK1), where you manually create email + password combos and distribute them to your users;
- [Magic Links](docId\:w7VFvxPMFYSPdg0xnzlK1), where you enter specific emails or entire domains, and users will authenticate using a link that we send to their email address;
- [Private Accounts](docId\:w7VFvxPMFYSPdg0xnzlK1), where you add specific domains to let users authenticate/create accounts with their e-mail address
- [Private Links](docId\:w7VFvxPMFYSPdg0xnzlK1), where you can generate private links and share them with your users and teams. Manage access control per user group via links;
- [JWT](docId\:w7VFvxPMFYSPdg0xnzlK1), where your dev team generates a JWT with a secret key you provide in our UI, then pass it back to us as part of a link. This is the easiest to manage, but you will require developer time.
- [SAML](docId\:w7VFvxPMFYSPdg0xnzlK1), when you have an external application that can act as a router to your space domain, so the public portal can be acessed only by members setted in providers like Google, Azure, Okta.

***

# None

![](https://archbee-image-uploads.s3.amazonaws.com/HCIek7I0UxvyNHQ0EFzVX-slmSYSK4wieisLB7g81MK-20250729-141235.png)

The default behaviour is set as None, meaning it is available publicly. You can change to controls to limit the access for readers.

Everyone with the link will be able to read content.

Links are safe to share because they are cryptographically generated and unguessable.

When you want to gate the contents to specific readers, try any of the options below.

***

# Guest Accounts

![](https://archbee-image-uploads.s3.amazonaws.com/HCIek7I0UxvyNHQ0EFzVX-XuaszCCH-r1vgCmbw6sGx-20250729-141410.png)

Create guest accounts. Everyone with the link and a guest account will be able to read the content. Guest accounts are not charged as seats in Archbee.

***

# Private Accounts

![](https://archbee-image-uploads.s3.amazonaws.com/HCIek7I0UxvyNHQ0EFzVX-SnZtrKikrE0DjOn_38AJQ-20250729-141521.png)

Users will be able to authenticate/create an account in your space with their email address/password if you add their email address or their email domain to the list below.

Everyone with the link and a matched account will be able to read the content. Accounts are not charged as seats in Archbee.

:::hint{type="info"}
The list of users with active accounts will appear in the 'Active Accounts' window.
:::

***

# Magic Link

![](https://archbee-image-uploads.s3.amazonaws.com/HCIek7I0UxvyNHQ0EFzVX-oAIK6459-kragJpin95aE-20250729-141556.png)

Users will be able to authenticate to your space with their email address if you add their email address or their email domain to the list below.
Everyone with the link and a matched account will be able to read the content. Accounts are not charged as seats in Archbee.

***

# Private links

Generate Private links for specific user groups/teams. Each user group/team will have their own link to the same documentation and you can manage access control via this links. You need to cut access for team 1? Delete the private link associated with team 1.

![](https://archbee-image-uploads.s3.amazonaws.com/HCIek7I0UxvyNHQ0EFzVX-s-2hIJWG1r0-sPfAob_Cb-20250729-141700.png)

***

# How JWT works

## JWT - secret visitor authentication

![](https://archbee-image-uploads.s3.amazonaws.com/HCIek7I0UxvyNHQ0EFzVX-4sLYzb9cSClYA_JSj44ou-20250729-141747.png)

Go to the Spaces settings, and set a JWT secret key that you generate on your server

## JSON WEB Key visitor authentication

![](https://archbee-image-uploads.s3.amazonaws.com/HCIek7I0UxvyNHQ0EFzVX-IOipg_ftVicxds_qMXSak-20250729-141831.png)

Go to the Spaces settings, and set a JSON WEB Key Set URL. A JSON Web Key Set (JWKS) URL is a URL endpoint where a server publishes its public keys in JSON format.

The JWKS URL typically points to a JSON document that contains an array of cryptographic keys used for verifying signatures.&#x20;

When Archbee receives a JWT, it can retrieve the corresponding public key from the JWKS URL and use it to verify the JWT's signature, ensuring that the token hasn't been tampered with and was indeed issued by a trusted party.

A JWKS URL provides a standardized way for clients to obtain the public keys needed to verify JWT signatures in a secure and scalable manner.

This is a sample `jwks.json` file:

```json
{
	"keys": [{
		"kid": "1234example=",
		"alg": "RS256",
		"kty": "RSA",
		"e": "AQAB",
		"n": "1234567890",
		"use": "sig"
	}, {
		"kid": "5678example=",
		"alg": "RS256",
		"kty": "RSA",
		"e": "AQAB",
		"n": "987654321",
		"use": "sig"
	}]
}
```

## Generate the JWT token

Use one of the examples below to generate the JWT token.

You also need to replace the URL with the subdomain of your documentation site.

```nodejs
const sign = require('jsonwebtoken').sign;

exports.buildArchbeeLoginURL = function() {
  // Optional user credentials that you want to send back to Archbee
  const user = {
    name: 'John',
    email: 'Wick',
  };
  //create a signed token out of the user credentials with the
  //secret you set in Archbee
  const jwtToken = sign(user, '<archbeeJwtSecret>');
  //yourdomain is set in the Custom Domain tab
  const archbeeUrl = 'https://yourdomain.com';
 
  //create the complete URL containing the signed token that you'll send back to Archbee
  return `${archbeeUrl}?jwt=${jwtToken}&reload`;
};
```

Here is an example to generate a JWT token with .NET: [https://github.com/dragosbulugean/archbee-jwt-dotnet](https://github.com/dragosbulugean/archbee-jwt-dotnet)

```javascript
using JWT;
using JWT.Algorithms;
using JWT.Serializers;

var payload = new Dictionary<string, object>
{
    { "name", "John Wick" },
    { "email", "john.wick@matrix.com" }
};
const string secret = "TW9zaGVFcmV6UHJpdmF0ZUtleQ";

IJwtAlgorithm algorithm = new HMACSHA256Algorithm(); // symmetric
IJsonSerializer serializer = new JsonNetSerializer();
IBase64UrlEncoder urlEncoder = new JwtBase64UrlEncoder();
IJwtEncoder encoder = new JwtEncoder(algorithm, serializer, urlEncoder);

var jwtToken = encoder.Encode(payload, secret);
var archbeeLink = $"https://docs.yourcompany.com/?jwt={jwtToken}&reload";

Console.WriteLine($"JWT Token: {jwtToken}");
Console.WriteLine($"Archbee Link: {archbeeLink}");
```

:::hint{type="info"}
JWT tokens are bypassed on Preview/Staging
:::

***

# SAML - Security Assertion Markup Language

![](https://archbee-image-uploads.s3.amazonaws.com/HCIek7I0UxvyNHQ0EFzVX-Jo-LIF0lRgF1NC3d0BYkK-20250729-141906.png)

SAML can be configured for public space access in the same way as for team integration, see [SAML Integration](docId\:ajhcF8y3Lx_0CxrlTonjV) for more detailed steps regarding setting up each provider.

Note that just the metadata URL is needed as input. Also, we assume the space is already hosted on a custom domain.

In this way, the published space link will be routed through the new SAML application; thus, only members set up in the provider application can access the public portal.

### How to set up SAML as a public access control

::::WorkflowBlock
:::WorkflowBlockItem
Go to Azure Services -> Microsoft Entra ID -> "+Add" -> App registration

Select "Accounts in this organizational directory only -Single tenant" and paste the CallBack URL from Archbee Space Settings ->Public Access Control -> SAML into "Redirect URI" as in the below image, choosing Web auth:

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/3UT5owvW3hIctm8WvFS5p_image.png" size="50" width="1746" height="1304" position="center" showCaption="false"}
:::

:::WorkflowBlockItem
Click on "Register"
:::

:::WorkflowBlockItem
On the newly created app in Azure, go to "Endpoints" and copy the "Federation metadata document" from the Azure App to the Archbee Space Settings -> Public Access Control -> SAML into the "Set SAML Metatada URL"

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/tmIsl_WC_b8Gg53we8F7w_image.png" size="60" width="2272" height="1216" position="center" darkWidth="2272" darkHeight="1216" showCaption="false"}
:::

:::WorkflowBlockItem
A unique Entity ID will be generated in Archbee, copy the "`api://PUBLISHED...`" link in your Azure App - Expose an API -> Add -> Fill Up the URL -> Save it

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/1MpmJaW_2e-NQvI7TOKxd_image.png" size="34" width="782" height="1388" position="center" darkWidth="782" darkHeight="1388" showCaption="false"}
:::

:::WorkflowBlockItem
Go to your Archbee space and re-publish it
:::

:::WorkflowBlockItem
Try to access the link and test the SAML authentication
:::
::::

# Preview Settings

:::hint{type="warning"}
This feature allows you to simulate authentication settings in a controlled preview environment before going live for internal users.
:::

## Purpose

Enable this setting to apply `authentication protection to your preview environment`, restricting access to `internal users only`. This helps verify your auth configurations, user access flows, and protection settings `without exposing changes to the public`.

## How to Enable

- Navigate to the Public Access Control section while you're in Space Settings
- Select any authentication methods
- Toggle off the `Preview Settings`
- Publish your changes to Preview and test the authentication

![](https://archbee-image-uploads.s3.amazonaws.com/HCIek7I0UxvyNHQ0EFzVX-9qT4lqJHCgiQZ-OIc5Am5-20250729-142003.png)

# Multi-Authentication

The Multi-Authentication feature allows you to enable more than one authentication method for accessing your documentation portal. This gives your users flexibility and improves accessibility.

## How it works

:::hint{type="success"}
From the Public Access Control settings, you can toggle multiple authentication methods simultaneously. Users accessing your portal will be able to authenticate using any one of the enabled methods.
:::

## Use Case Example

If you enable both **Private Link** and **Password**, users can access your documentation using either:

- A secure private link you share with them
- Or a common password you define

![](https://archbee-image-uploads.s3.amazonaws.com/HCIek7I0UxvyNHQ0EFzVX-_rgZR3y82yCV8ScSC0MQH-20250729-143204.png)

:::hint{type="warning"}
Only users who meet one of the enabled authentication methods will be granted access. You can disable any method at any time via the toggle switch in the Public Access Control settings.
:::




[title] Sync multiple GitHub folders
[path] INTEGRATIONS/GitHub/

If you have multiple folders in your repo that you use for your docs, now you can sync them all with Archbee.

:::hint{type="warning"}
Reminder on how to integrate Archbee and GitHub:
:::

In case you need to jog your memory on how to [Integrate GitHub](docId\:Pm3HtF9iCnqzcNFRQjqL3), here's a full guide on that.

Up until now, you could only use the `.archbee.yaml` file in a single folder and for a single docs project. Now, you can do so with multiple folders.

If Archbee finds a `.archbee.yaml` file in the repository's root or any other folder, we use that to organize the content. It's the same file in all folders where you have docs stored.

Here's an example of how to set up and configure your Git repo so that Archbee can fetch the content in there and set it up nicely into our software > [Archbee git repo](https://github.com/dragosbulugean/slate)


## Set up the repo

Refer to our abovementioned Archbee repo.

If the system finds a `.archbee.yaml` file in the root of the repo like [this one](https://github.com/dragosbulugean/slate/blob/master/.archbee.yaml), then we use that to organize the content. If not, we'll just set some defaults.

### Create .yaml file for multiple folders

Create a `.archbee.yaml` file with the following variable structure.

:::hint{type="info"}
You must place the file in the root folder of your repository(ies). Make sure that the file stays there as this is your default path for all other folders.
:::

- `root: ./docs` property defines where's the directory containing the docs (can be replaced with `docsPath: ./docs`)
- `structure:`
  - `summary: summary.md` reconstructs the document tree in the left navigation panel in Archbee. If there is none, we consider the folders to be the categories and mimic the file structure inside.
  - `assets: assets`
    &#x20;the assets folder is relative to docsPath. Archbee will upload all files found from that folder.
- \# This will include all code files from your repo
- `shadowDocs` define the code files/folders to be included as Shadow Docs
- `publishSpace` boolean, set `true` to publish the space to production portal after each commit

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/ARwFXBxpMGGn8Y8Ce1OhI_git-sync-light.png)

Below is an example of an `archbee.yaml` config file with the ***default*** path(folder).

:::CodeblockTabs
.archbee.yaml

```yaml
root: ./docs
structure:
  summary: summary.md
  assets: assets
publishSpace: true
headerIncludes:  |
  <script>
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
  </script> 
```
:::

Example of `archbee.yaml`  config file with ***subpaths***:

```javascript
root: folderx
structure:
  summary: summary.md
  assets: assets
publishSpace: true
headerIncludes:  |
  <script>
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
  </script> 
```

Once you're done, go back to Archbee and check if you're able to select multiple folders in the drop-down menu:

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/KLw-OyxXwYqareQUJNNUC_git-select-light.png "Select GitHub repo")

We also recommend that you create a `summary.md` file. This file reconstructs the document tree in the left navigation panel in Archbee. And it can help you organise your content nicely.

See an example of a `summary.md` file below:

:::CodeblockTabs
summary.md

```markdown
- [Introduction](1.md)

## Table of contents

- [Init](init.md)
- [Configure App](config.md)
- [Config Database](config-database.md)
- [Config Redis](config-redis.md)
- [Config Elastic Search](config-es.md)
- [Swagger](swagger-v2.json)

```
:::

## Sync in Archbee

When you create a new space, select your repo, changes are automatically synced in Archbee.

If that doesn't work automatically, you can force sync by navigating to **Space settings** > **GitHub integration&#x20;**> click the **Sync with repo** button.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/0yk-oP4X5jVKXKxVdWJlZ_settings-light.png "Sync with repo")


[title] Publish Space
[path] PUBLIC API/DocSpace/

{
  "id": "KuC6l_x4wsdD5oZOcwF-x",
  "type": "api-oas-v2",
  "data": {
    "method": "POST",
    "url": "https://api.archbee.com/api/public-api/space/publish",
    "servers": [
      {
        "url": "https://api.archbee.com/api/public-api/space/publish",
        "description": "Archbee API Server"
      }
    ],
    "name": "Publish Space",
    "description": "<p>Publish Archbee documents from given <code>docSpaceId</code></p>",
    "contentType": "application/json",
    "request": {
      "pathParameters": [],
      "headerParameters": [
        {
          "name": "accept",
          "type": "string",
          "kind": "optional",
          "description": "Generated from available response content types",
          "enum": [
            "application/json"
          ],
          "default": "application/json"
        },
        {
          "kind": "required",
          "name": "Content-Type",
          "type": "string",
          "example": "application/json",
          "description": ""
        }
      ],
      "queryParameters": [],
      "bodyDataParameters": [
        {
          "kind": "required",
          "name": "body",
          "type": "object",
          "description": "",
          "schema": [
            {
              "name": "environment",
              "kind": "required",
              "type": "string",
              "description": "<p>can be <code>PREVIEW</code> or <code>PUBLISHED</code></p>"
            }
          ],
          "isExpanded": true
        }
      ],
      "formDataParameters": [],
      "oAuthParameters": [
        {
          "id": "bearerAuth",
          "name": "bearerAuth",
          "kind": "optional",
          "type": "http",
          "description": "<p>Requires the <code>Authorization</code> header in the form <code>Authorization: Bearer {base64(docSpaceId~apiKey)}</code> Where the token is base64 encoding of docSpaceId, tilde, and apiKey.</p>",
          "scheme": "bearer"
        }
      ],
      "cookieParameters": []
    },
    "responses": [
      {
        "statusCode": "200",
        "description": "Process status",
        "jsonExample": "",
        "isExpanded": true,
        "schema": [
          {
            "kind": "optional",
            "type": "object",
            "description": "Process status",
            "schema": [
              {
                "name": "status",
                "kind": "optional",
                "type": "string<OK>",
                "description": "Response Status",
                "enum": [
                  "OK"
                ]
              },
              {
                "name": "data",
                "kind": "optional",
                "type": "object",
                "description": "DocSpace id",
                "example": "",
                "schema": [
                  {
                    "name": "id",
                    "kind": "optional",
                    "type": "string",
                    "description": "doc space id"
                  }
                ]
              }
            ],
            "isExpanded": true
          }
        ]
      },
      {
        "statusCode": "400",
        "description": "Invalid request",
        "jsonExample": "",
        "isExpanded": true,
        "schema": [
          {
            "kind": "optional",
            "type": "object",
            "description": "",
            "customType": "Response400",
            "schema": [
              {
                "name": "status",
                "kind": "optional",
                "type": "string<OK | Not OK>",
                "description": "Response Status",
                "example": "Not OK",
                "enum": [
                  "OK",
                  "Not OK"
                ]
              },
              {
                "name": "messages",
                "kind": "optional",
                "type": "array",
                "description": "Array of messages",
                "example": "[\"Some error message\"]",
                "itemType": "string",
                "customType": "string[]",
                "itemExample": "Some error message",
                "itemDefault": ""
              }
            ],
            "modelRef": "#/components/schemas/Response400",
            "isExpanded": true
          }
        ]
      }
    ],
    "hasXCodeSamples": false
  },
  "children": [
    {
      "text": ""
    }
  ]
}
[title] Create Space Group
[path] PUBLIC API/DocSpace/

{
  "id": "PxfKKpPXKwrKW4nKQrheW",
  "type": "api-oas-v2",
  "data": {
    "method": "POST",
    "url": "https://api.archbee.com/api/public-api/space-group/create",
    "servers": [
      {
        "url": "https://api.archbee.com/api/public-api/space-group/create",
        "description": "Archbee API Server"
      }
    ],
    "name": "Create Space Group",
    "description": "<p>Create a new space group with desired fields, return the space group.</p>",
    "contentType": "application/json",
    "request": {
      "pathParameters": [],
      "headerParameters": [
        {
          "name": "accept",
          "type": "string",
          "kind": "optional",
          "description": "Generated from available response content types",
          "enum": [
            "application/json"
          ],
          "default": "application/json"
        },
        {
          "kind": "required",
          "name": "Content-Type",
          "type": "string",
          "example": "application/json",
          "description": ""
        }
      ],
      "queryParameters": [],
      "bodyDataParameters": [
        {
          "kind": "required",
          "name": "body",
          "type": "object",
          "description": "",
          "schema": [
            {
              "name": "name",
              "kind": "required",
              "type": "string",
              "description": "name of space group"
            },
            {
              "name": "isLlmEnabled",
              "kind": "optional",
              "type": "boolean",
              "description": "whether AI will be enabled"
            },
            {
              "name": "isReviewSystemEnabled",
              "kind": "optional",
              "type": "boolean",
              "description": "whether review system will be enabled"
            },
            {
              "name": "isBranchingSystemEnabled",
              "kind": "optional",
              "type": "boolean",
              "description": "whether branching will be enabled"
            }
          ],
          "isExpanded": true
        }
      ],
      "formDataParameters": [],
      "oAuthParameters": [
        {
          "id": "bearerAuth",
          "name": "bearerAuth",
          "kind": "optional",
          "type": "http",
          "description": "<p>Requires the <code>Authorization</code> header in the form <code>Authorization: Bearer {base64(docSpaceId~apiKey)}</code> Where the token is base64 encoding of docSpaceId, tilde, and apiKey.</p>",
          "scheme": "bearer"
        }
      ],
      "cookieParameters": []
    },
    "responses": [
      {
        "statusCode": "200",
        "description": "Process status",
        "jsonExample": "",
        "isExpanded": true,
        "schema": [
          {
            "kind": "optional",
            "type": "object",
            "description": "Process status",
            "schema": [
              {
                "name": "status",
                "kind": "optional",
                "type": "string<OK>",
                "description": "Response Status",
                "enum": [
                  "OK"
                ]
              }
            ],
            "isExpanded": true
          }
        ]
      },
      {
        "statusCode": "400",
        "description": "Invalid request",
        "jsonExample": "",
        "isExpanded": true,
        "schema": [
          {
            "kind": "optional",
            "type": "object",
            "description": "",
            "customType": "Response400",
            "schema": [
              {
                "name": "status",
                "kind": "optional",
                "type": "string<OK | Not OK>",
                "description": "Response Status",
                "example": "Not OK",
                "enum": [
                  "OK",
                  "Not OK"
                ]
              },
              {
                "name": "messages",
                "kind": "optional",
                "type": "array",
                "description": "Array of messages",
                "example": "[\"Some error message\"]",
                "itemType": "string",
                "customType": "string[]",
                "itemExample": "Some error message",
                "itemDefault": ""
              }
            ],
            "modelRef": "#/components/schemas/Response400",
            "isExpanded": true
          }
        ]
      }
    ],
    "hasXCodeSamples": false
  },
  "children": [
    {
      "text": ""
    }
  ]
}
[title] Download OpenAPI file
[path] PUBLIC API/


[title] SAML Integration
[path] INTEGRATIONS/

Setting up the SAML integration involves configuring your identity provider's settings and copying the necessary information to Archbee.

Once set up, your team members can log in or register via the SAML login URL, which can be shared with them.

With SAML integration, you can centralize and simplify authentication, ensuring a seamless and secure user experience for your team.

::::LinkArray
:::LinkArrayItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/h7U_-MTYCunQ-Pb3Gj5Pr_google-saml.png)

[Google Setup](docId\:Hbn0de2XHZz5JNF31cLQa)
:::

:::LinkArrayItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/hyze24ICfc_45FMzb-ZXY_azure-saml.png)

[Azure setup](docId\:ypJSK6p63V4StdKoQNvbS)
:::

:::LinkArrayItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/1rFmYNF3kRKxVGeynUM18_okta-saml.png)

[Okta setup](docId\:nfJsmj4mR7lJjjlxc7g5t)
:::
::::


[title] Redirects - URL alias
[path] HOSTED SPACES/

In the SEO Meta Controls, you can set an URL alias to redirect the traffic to the new URL key.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/otL3Nz4Skw270nuqLyXVm_seo-modal-light.png)

::::WorkflowBlock
:::WorkflowBlockItem
Click on the **three dots&#x20;**&#x69;n the top right corner to open **Doc Options.**
:::

:::WorkflowBlockItem
Click on **SEO Meta Controls**
:::

:::WorkflowBlockItem
Add the **URL ALIAS** field to the old URL from which you want to redirect the traffic to the new URL.
:::

:::WorkflowBlockItem
Change the **URL Key** if you want a different URL path for the existing document.
:::

:::WorkflowBlockItem
The title can be different than the title of the document. This is where you can optimize for SEO keywords.
:::

:::WorkflowBlockItem
**Description** - The Meta Description is usually shown on the search engine results page.
:::

:::WorkflowBlockItem
**Preview Image** - the image used for preview when sharing the links.
:::
::::

Each document has specific inputs for the meta URL Key, Title, Description, and Image.

Example of how to configure a redirect:

1. Old link: [https://www.archbee.com/docs/template-1](https://www.archbee.com/docs/template-1)
2. New link: [https://www.archbee.com/docs/url-redirect](https://www.archbee.com/docs/url-redirect)
3. URL ALIAS box will contain only the text after ".com/": "docs/template-1"


[title] Subscribe to changes
[path] HOSTED SPACES/

*Stay in the loop — get notified whenever this documentation is updated.*

***

The **Subscribe to Changes** feature allows viewers to receive notifications about updates made to a documentation page. Whether you’re a team member or a public visitor, you can subscribe and stay informed in real time.

## How to Enable It

::::WorkflowBlock
:::WorkflowBlockItem
Go to your **Space Dashboard**.
:::

:::WorkflowBlockItem
Click on the **Appearance** tab.
:::

:::WorkflowBlockItem
Scroll down and toggle on the **Subscribe Button**.

Once enabled, a bell icon will appear on the top bar of the documentation portal.
:::
::::

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/I5U4upXBPTO2a_wMzcGJi-20251208-152941.gif)

## For Public Users

::::WorkflowBlock
:::WorkflowBlockItem
Click the :FontAwesome[]{icon="fa-solid fa-bell"} bell icon in the top bar of the documentation page.
:::

:::WorkflowBlockItem
Enter your email address.
:::

:::WorkflowBlockItem
Click on the **Subscribe** button.
:::
::::

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/2pkCbw228do7nR6mF0D-7-20251209-095048.gif)

:::hint{type="info"}
✉️&#x20;

You'll receive an **email notification&#x20;**&#x65;ach time the page is updated.

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/gwT6tniWIhfEUT83K4xB5-20251209-095002.png" size="60" width="1276" height="1348" position="center" showCaption="false"}
:::


[title] Azure setup
[path] INTEGRATIONS/Untitled/

## Create an app in Azure

Create an app in Azure and set Archbee Callback URL

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/sS-CWNzYOmkZDsO44e8iL_image.png)

## Azure config -> Archbee settings

::::::WorkflowBlock
:::WorkflowBlockItem
**Sign on URL**

Copy SAML-P sign-on endpoint to Archbee Sign on URL
:::

:::WorkflowBlockItem
**Issuer Id**

Open in a browser: Endpoints >> Federation metadata document url&#x20;

Copy entityID  to issuer ID

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/iZIvAdD0uaIV6FPpXkPRN_image.png)
:::

:::WorkflowBlockItem
**x509 public Certificate**

Check image from step 2.2&#x20;
:::

:::::WorkflowBlockItem
**Application Client ID -> set as Entity ID in Archbee**

Copy Application client ID to to Application Identifier(Entity Id)

::::VerticalSplit
:::VerticalSplitItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/Ac_8zN7dg_iuvNZacak0j_image.png)
:::

:::VerticalSplitItem


![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/hY_zg4BrxoFZCfERaXbO1_image.png)
:::
::::
:::::
::::::


[title] Auto-Translation with AI
[path] HOSTED SPACES/

The **Auto-Translation with AI** feature automatically translates all documents in a space using AI-powered translation. This streamlines content localization and makes your documentation accessible across multiple languages.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/C15BPSllJnLTdJjDbjMXf_image.png)

### How to Enable

1. Navigate to **Space Settings**.
2. Go to the **Version Links** section.
3. Toggle on **Enable Auto-Translation with AI**.
4. Create a new version and select the target language.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/1-a_rK50bOwwzsl5q1vnd_image.png)

### How It Works

- Once enabled, all documents in the space are translated automatically using AI.
- Translation can take a few minutes, depending on the size of your content.
- This feature consumes tokens to process the translations.

:::hint{type="warning"}
<font color="#fcb900">**⚠️**</font>**&#x20;  Warning**

- Ensure you have sufficient tokens available to complete translations.
- For optimal performance, avoid making significant content changes while translations are in progress. Wait until the successfull notification appears on the page.
:::

### Keeping Translations in Sync

Whenever you modify source documents, you'll need to trigger translation again to keep all language versions in sync. Versioned spaces are created in **draft mode** by default, so new changes require manual review and approval — keeping a human in the loop and preventing AI-generated mistakes from being published without consent.

The review system works the same way as drafts in standard spaces. For more details, see [Draft & Reviews System](docId:3cwwi9judh8iykkPcQbDl).

Once you've reviewed the changes, you can merge all drafts and publish the new content. Drafts can be disabled — translation will still work without review — but we don't recommend it.

We've also added a new feature that lets you merge all drafts in one step: **Review & Merge Space.**

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/tn8ahReKhIJxR09uEXysJ_image.png)


[title] Traffic
[path] HOSTED SPACES/Insights/

![](https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-6dQ5fyDRhdNobilfF-2jB-20241021-202403.png)

The **Traffic** component in the **Insights** tab gives you a snapshot of your site's visitor activity, helping you monitor user behavior and trends over time.&#x20;

### Portal key metrics

- **Total Views:&#x20;**&#x54;his shows the number of times your site was viewed within the selected period. It helps assess overall interest and traffic volume.
- **Average Time:** The metrics reflect the average time users spend on site during a visit offering insights into user engagement and traffic volume.
- **Unique Visits:&#x20;**&#x44;isplay the number of distinct users visiting your site, helping identify how many individual visitors you are reaching
- **Bounce Rate:&#x20;**&#x49;ndicates the percentage of users who leave your site after viewing a single page. A higher bounce rate suggests content or navigational improvements may be needed to retain visitors.

:::hint{type="warning"}
**Tip:&#x20;**&#x57;ant to search Traffic data for a specific page in your space? use the "*Search path"* button to quickly filter and view detailed metrics for that page.
:::


[title] Version Links
[path] HOSTED SPACES/

![](https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-EYgSoEI8lnGx2v6i_Rvxb-20240903-121109.png)

Version Links is a feature that allows you to create multiple saved versions of a Space.

Let's say you have a **Developer Guide** space, but soon enough, you release different versions of that product.

To keep the history and backward compatibility, you have to create a new version to save the current content in **Developer Guide v1.0,&#x20;**&#x61;nd rename the **default main version&#x20;**&#x73;pace to **Developer Guide - Current Version** or **Developer Guide - v2.0&#x20;**(depends how you prefer) and continue to update the content in this main version.

The same rule will apply when you want to create the next version. You have to save the current content in a new version in **Developer Guide v2.0**, and keep working in **Developer Guide - Current Version&#x20;**&#x6F;r **Developer Guide - v3.0&#x20;**(depends how you prefer) for new updates.

The created versions should be only **clones*****&#xA0;***&#x6F;f the **default main version** space you are trying to fork from. 

## How to set up Version Links

:::::WorkflowBlock
:::WorkflowBlockItem
Click on the gear icon  ⚙️  for settings, then go to the **Version Links** tab under **Space Connections** section.
:::

::::WorkflowBlockItem
Enable the version link feature for that space (if you are trying to save the first version).

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/Mpo8MnAQLjN5x1g16iEup_verlink-light.png)

:::hint{type="info"}
**ℹ️   For public documentations**

Make sure your documentation is **Public** and visible to everyone, before you start creating version links.

![](https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-lxs9fGwMIwgIKDOmxkW5c-20240903-093605.png)
:::
::::

::::WorkflowBlockItem
Select the space you want to clone from. You can select:

- &#x20;the **main version&#x20;**- if you want to create a new version from the current main versio&#x6E;**;**
- &#x20;or **children (previous versions)** - if you want to create an update of an old version (if your last created version is v5.0 and you want to create v2.1, you have to select v2.0 as a starting point).

:::hint{type="warning"}
**🚨   Attention!**

The **main version** space is where you should work on your content. It is the latest version of your space.

When you create a new version, you're essentially saving a **snapshot** of your current work. Any changes you make from this point should be on the **main version**.
:::
::::

:::WorkflowBlockItem
Add a label for your new saved snapshot version.&#x20;

For exemple, before you start updating the **main version space** to *'version 3'&#x20;*&#x77;ith the new content, you save a copy of the current version as *'version 2'*. This will let you keep track of your changes and go back to the previous version if needed.
:::

:::WorkflowBlockItem
Select the space language. You can choose the following languages:

- **🇺🇸   English**
- **🇫🇷   French**
- **🇩🇪   German**
- **🇪🇸   Spanish**
- **🇮🇹   Italian**
- **🇵🇹   Portuquese**
- **🇷🇺   Russian**
- **🇰🇷   Korean**
- **🇹🇭   Thai**
- **🇨🇳   Chinese**
- **🇮🇩   Indonesian**
:::

:::WorkflowBlockItem
Hit the "<font color="#2166ae">**+ Create Version**</font>" button to create this new saved snapshot version.

Based on the above example, this created snapshot version will have the given name in **Step 4&#x20;**(*"version2"* in this case).
:::

:::WorkflowBlockItem
Repeat the steps from **3** to **6&#x20;**&#x20;until you create your desired structure.
:::

:::WorkflowBlockItem
Exit the Space Settings window and publish the space, and they'll be propagated.
:::
:::::

:::hint{type="warning"}
**🧠   Remember!**

You have to **publish all versions** in order to be visible on the public documentation.
:::

Once you have created a new version, your spaces will be grouped in your **Side Navigation&#x20;**&#x61;nd display the label you provided. This way, you will always be able to spot Spaces with multiple versions and find them in a single place.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/DFKYi4DP_olDGVEDplIl8_ver-side-light.png)

Once published, you can see the changes in public spaces. The versions will be displayed based on the context. If the Space does contain a Space Link and also has multiple versions, it will be displayed in the Space Link Tab.

Once published you will be able to see the changes on public spaces. Here's how it looks for your readers:

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/dr80lXOuhF5Op8kyQkA4P_version-show-light.png "Version Links view on Stripey template")

:::hint{type="info"}
Enable Auto-Translation of your spaces with Enable Auto-Translation with AI. Check full guide here: [Enable Auto-Translation with AI](docId\:TjkbqwXi_P-k6VsxBEZMA)&#x20;
:::


[title] Suggest Changes
[path] HOSTED SPACES/

*Collect feedback and improve your documentation easily with reader suggestions.*

***

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/TG4GSnN7euhTdTtkChEDw-20251031-101118.png)

The **Suggest Changes** feature allows readers to propose edits or improvements directly within your published documentation. This makes it easy to keep content accurate, up to date, and engaging for your audience.

## Enabling Suggest Changes

To turn on this feature in your portal:

:::::WorkflowBlock
:::WorkflowBlockItem
Open your **Space Dashboard**.&#x20;
:::

:::WorkflowBlockItem
Navigate to **Appearance&#x20;**&#x74;ab and scroll all the way down t&#x6F;**&#x20;Portal Interaction**.&#x20;
:::

::::WorkflowBlockItem
Click on **Suggest Changes** to enable it.&#x20;

:::hint{type="info"}
Don't forget to **Publish** your documentation to make the feature available to readers.&#x20;
:::
::::
:::::

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/IoFX3oCS977fbW1UZWPZF-20251106-194849.gif)

## How Readers can Suggest Changes

Once enabled, on each document will be displayed a **Suggest Changes** button. Readers can follow these steps to submit a suggestion:

::::WorkflowBlock
:::WorkflowBlockItem
### Suggest Changes Button

Click the **Suggest Changes** button on the document.&#x20;

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/OfHBWdiFu8_iZ_kQA_EJd-20251106-195427.png)
:::

:::WorkflowBlockItem
### Edit the Content

Write new text, update existing content, or remove anything unnecessary.&#x20;

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/AkhZVPgcPeNUh7Va_Sg7w-20251106-195639.png)
:::

:::WorkflowBlockItem
### Email and Message

**Enter your email address** for confirmation and **add a brief note** explaining your suggestion.&#x20;

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/WtY3otrID57GUKvKLide5-20251106-200010.png)
:::

:::WorkflowBlockItem
### Send and Confirm

Click **Send for Review** and...

::Image[****]{src="https://app.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/HjY-KzEQ_sJGXaz2C_xfP-20251106-200238.png" size="60" width="810" height="250" position="center" darkWidth="810" darkHeight="250" showCaption="false"}

... confirm your submission via the email link.&#x20;

::Image[]{src="https://app.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/owgjx2VyASLVSdnIHxkNV-20251106-200402.png" size="80" width="1073" height="575" position="center" darkWidth="1073" darkHeight="575" showCaption="false"}
:::
::::

## Managing Suggestions (for portal owners)

::::::WorkflowBlock
:::::WorkflowBlockItem
### Notification of Suggested Document Changes

When a suggestion is submitted, you will receive a **notification&#x20;**&#x61;nd an **email** to inform you.

::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/jltq35UmOrpxQ-OKI3-uU-20251106-200800.png)
:::

:::VerticalSplitItem
::Image[]{src="https://app.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/7B_mm1O27P1erLUu5QAKo-20251106-200703.png" size="88" width="639" height="362" position="center" darkWidth="639" darkHeight="362" showCaption="false"}
:::
::::
:::::

:::WorkflowBlockItem
### Navigate to Suggestion

A **comment** appears inside the document with the proposed changes.&#x20;

::Image[]{src="https://app.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/6Pz1eYik4uyYbLXRdnCQi-20251106-200930.png" size="60" width="920" height="666" position="center" darkWidth="920" darkHeight="666" showCaption="false"}
:::

:::WorkflowBlockItem
### Manage the Suggestion

Click **View Suggestion** to see a document with changes on it — **removed text** in <font color="#EF4444">**red**</font> and **added text** in <font color="#22C55E">**green**</font>.

Then, you can:

- :FontAwesome[]{icon="fa-solid fa-check"} **Accept** **suggestion&#x20;**&#x61;nd to apply the changes immediately.&#x20;
- :FontAwesome[]{icon="fa-solid fa-xmark"}  **Drop Suggestion** if you prefer to keep the current version.&#x20;

::Image[]{src="https://app.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/qntiqg-N3-eUD13fcoblf-20251106-201109.png" size="70" width="1710" height="730" position="center" darkWidth="1710" darkHeight="730" showCaption="false"}
:::
::::::

:::hint{type="warning"}
⚠️   When you accept the suggestion, the document will be updated with the new one. For more complicated or multiple suggestions, we recommend to just update the file yourself.
:::

## Benefits of using Suggest Changes

The **Suggest Changes** feature promotes collaboration between readers and authors. It provides a simple, structured way to collect feedback, implement improvements, and maintain accurate, evolving documentation.

***

## Tell Us What You Think

We're trying to build something great, but **we need your unique perspective** to make it even better. Don't hold back and let us know what's on your mind.

::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
**Feedback Form**

Need to share your thoughts directly? Use the feedback form to leave a quick text feedback.
:::

:::VerticalSplitItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/JAkMADs59LUVUnWmRzKrt-20251201-230351.png)
:::
::::

::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
**Ask a Question (Q\&A Section)**

Have a specific problem or need a solution? Post it here! Below is a **public section** where **our community**, **our team**, or our AI can respond and offer help.
:::

:::VerticalSplitItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/Luw5Gz7MXb4OewV0LuSeT-20251107-110601.png)
:::
::::

::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
**Support Chat**

Need personalized support right now? Use the **blue chat bubble** in the bottom-right corner. This connects you immediately with our support team.
:::

:::VerticalSplitItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/uSVkOP9PBwhmVLRK6UiJ5-20251107-110743.png)
:::
::::


[title] Template 2
[path] HOSTED SPACES/Custom Landing Page/Landing page templates/

:::hint{type="info"}
This is a white-label template. To make it match your brand and style you need to do further customisations on the provided template
:::

### How it looks:

Use the below link to see what the white-label template looks like. Keep in mind that every color/logo/placeholder can be customized to match your style & branding.

[https://r1yfc9.csb.app/](https://r1yfc9.csb.app/)

### Custom code files:

:::hint{type="info"}
Tip: Use the :FontAwesome[]{icon="fa-solid fa-copy"} Copy button on the top-right of the code editor to copy all code
:::

We added the custom code for you to use in the code editor below. See how to use it [here](docId\:x0t9gO5mazn2uKSgR03X3)

:::CodeblockTabs
Index.html

```html
<!-- START Include headers -->
<head>
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
  />
  <link
    rel="stylesheet"
    id=""
    href="https://fonts.googleapis.com/css?family=Roboto%3A300%2C300i%2C400%2C400i%2C500%2C500i%2C700%2C700i%2C900%2C900i&#038;ver=5.2.2"
    type="text/css"
    media="all"
  />
  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"
    crossorigin="anonymous"
  ></script>
</head>
<!-- END Inclhude headers -->

<!-- START NOT NEEDED -->
<link rel="stylesheet" href="/style.css" />
<script src="/script.js"></script>
<!-- END NOT NEEDED -->

<!-- START Landing page -->
<div id="page" class="site">
  <a class="skip-link screen-reader-text" href="#content">Skip to content</a>
  <header
    id="masthead"
    class="site-header navbar-static-top navbar-light"
    role="banner"
  >
    <div class="container-fluid">
      <nav class="navbar navbar-expand-xl p-0">
        <div class="navbar-brand">
          <a href="">
            <img
              src="https://placehold.co/270x30/2166ae/fff?text=Your+logo+here"
              alt="Your logo here"
            />
          </a>
        </div>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#main-nav"
          aria-controls=""
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div id="main-nav" class="collapse navbar-collapse justify-content-end">
          <ul id="menu-pimary-menu" class="navbar-nav">
            <li
              itemscope="itemscope"
              id="menu-item-65"
              class="menu-item menu-item-type-custom menu-item-object-custom nav-item"
            >
              <a title="Link" href="" class="nav-link">Link</a>
            </li>
            <li
              itemscope="itemscope"
              id="menu-item-219"
              class="menu-item menu-item-type-custom menu-item-object-custom nav-item"
            >
              <a title="Link" href="" class="nav-link">Link</a>
            </li>
            <li
              itemscope="itemscope"
              id="menu-item-221"
              class="menu-item menu-item-type-custom menu-item-object-custom nav-item"
            >
              <a title="Link" href="" class="nav-link">Link</a>
            </li>
            <li
              itemscope="itemscope"
              id="menu-item-220"
              class="menu-item menu-item-type-custom menu-item-object-custom menu-item-220 nav-item"
            >
              <a title="Link" href="" class="nav-link" target="_blank">Link</a>
            </li>
            <!--<li itemscope="itemscope" id="menu-item-220" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-220 nav-item">
																<a title="Link" href="" class="nav-link">Link</a>
															</li>-->
          </ul>
        </div>
      </nav>
    </div>
  </header>

  <!-- #masthead -->

  <div
    id="page-sub-header"
    style="background: url(https://placehold.co/1920x425/2166ae/2166ae);"
  >
    <div class="container">
      <div class="row">
        <div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
          <h1>Title</h1>
          <p>Subtitle.</p>
        </div>
      </div>
    </div>
  </div>
  <div id="content" class="site-content">
    <div class="container">
      <div class="row modulesRow d-flex justify-content-center">
        <div class="col-xs-12 col-sm-6 col-lg-4">
          <div class="iconBlock px-4 py-2">
            <a href="" class="iconBlockWrap">
              <div class="iconImgWrap">
                <img
                  src="https://placehold.co/64/fff/2166ae?text=Icon"
                  class="iconImg"
                />
              </div>
              <div class="iconBlock-detail">
                <h3 class="title">Doc Title</h3>
                <p class="iconBlock-brief">Small doc description.</p>
                <div class="more">
                  <span class="btn btn-bordered" title="View APIs Doc">
                    View Doc
                  </span>
                </div>
              </div>
            </a>
          </div>
          <!-- ends iconBlock -->
        </div>
        <!-- ends col -->
        <div class="col-xs-12 col-sm-6 col-lg-4">
          <div class="iconBlock px-4 py-2">
            <a href="" class="iconBlockWrap">
              <div class="iconImgWrap">
                <img
                  src="https://placehold.co/64/fff/2166ae?text=Icon"
                  class="iconImg"
                />
              </div>
              <div class="iconBlock-detail">
                <h3 class="title">Doc Title</h3>
                <p class="iconBlock-brief">Small doc description.</p>
                <div class="more">
                  <span class="btn btn-bordered" title="View JS Library Doc">
                    View Doc</span
                  >
                </div>
              </div>
            </a>
          </div>
          <!-- ends iconBlock -->
        </div>
        <!-- ends col -->
        <div class="col-xs-12 col-sm-6 col-lg-4">
          <div class="iconBlock px-4 py-2">
            <a href="" class="iconBlockWrap">
              <div class="iconImgWrap">
                <img
                  src="https://placehold.co/64/fff/2166ae?text=Icon"
                  class="iconImg"
                />
              </div>
              <div class="iconBlock-detail">
                <h3 class="title">Doc Title</h3>
                <p class="iconBlock-brief">Small doc description.</p>
                <div class="more">
                  <span class="btn btn-bordered" title="View Community Forum">
                    View Doc</span
                  >
                </div>
              </div>
            </a>
          </div>
          <!-- ends iconBlock -->
        </div>
        <!-- ends col -->
        <div class="col-xs-12 col-sm-6 col-lg-4">
          <div class="iconBlock px-4 py-2">
            <a href="" class="iconBlockWrap">
              <div class="iconImgWrap">
                <img
                  src="https://placehold.co/64/fff/2166ae?text=Icon"
                  class="iconImg"
                />
              </div>
              <div class="iconBlock-detail">
                <h3 class="title">Doc Title</h3>
                <p class="iconBlock-brief">Small doc description.</p>
                <div class="more">
                  <span
                    class="btn btn-bordered"
                    target="_blank"
                    title="View Feed Docs"
                  >
                    View Doc
                  </span>
                </div>
              </div>
            </a>
          </div>
          <!-- ends iconBlock -->
        </div>
        <!-- ends col -->
        <div class="col-xs-12 col-sm-6 col-lg-4">
          <div class="iconBlock px-4 py-2">
            <a href="" class="iconBlockWrap">
              <div class="iconImgWrap">
                <img
                  src="https://placehold.co/64/fff/2166ae?text=Icon"
                  class="iconImg"
                />
              </div>
              <div class="iconBlock-detail">
                <h3 class="title">Doc Title</h3>
                <p class="iconBlock-brief">Small doc description.</p>
                <div class="more">
                  <span class="btn btn-bordered" title="View Community Forum">
                    View Doc
                  </span>
                </div>
              </div>
            </a>
          </div>
          <!-- ends iconBlock -->
        </div>
        <!-- ends col -->
        <!-- <div class="col-xs-12 col-sm-6 col-lg-4">
          <div class="iconBlock px-4 py-2">
            <a href="" class="iconBlockWrap">
              <div class="iconImgWrap">
                <img
                  src="https://placehold.co/64/fff/2166ae?text=Icon"
                  class="iconImg"
                />
              </div>
              <div class="iconBlock-detail">
                <h3 class="title">Doc Title</h3>
                <p class="iconBlock-brief">Small doc description.</p>
                <div class="more">
                  <span class="btn btn-bordered" title="View Community Forum">
                    View Doc
                  </span>
                </div>
              </div>
            </a>
          </div>
        </div> -->
      </div>
      <!-- .row -->
    </div>
    <!-- .container -->
  </div>
  <!-- #content -->
  <footer id="colophon" class="site-footer navbar-light" role="contentinfo">
    <div class="container-fluid pt-3 pb-3">
      <div class="site-info">
        Copyright 2023 &copy;
        <!-- Your company name here -->. All rights reserved.
      </div>
    </div>
  </footer>
  <!-- #colophon -->
</div>

<!-- END Landing page -->
```

Script.js

```javascript
$(".navbar-toggler").on("click", function () {
  $(".navbar-collapse").toggle("show");
});
```

Style.css

```css
:root {
  --accent-text: #2166ae;
  --secondary-text: #0a4563;
  --primary-text: #24292e;
  --background-color: #fff;
  --primary-link: #999;
  --accent-link: var(--accent-text);
  --header-title-color: #fff;
  --header-subtitle-color: #fff;
}
/*
Theme Name: jsv2doctheme
Theme URI:
Author:
Author URI:
Description:
Version: 3.3.2
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: wp-bootstrap-starter
Tags: blog, custom-menu, featured-images, threaded-comments, translation-ready, right-sidebar, custom-background, e-commerce, theme-options, sticky-post, full-width-template
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
	## Posts and pages
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
# Woocommerce
# Footer
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
body {
  margin: 0;
  -webkit-font-smoothing: auto;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.6;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden],
template {
  display: none;
}

a {
  background-color: transparent;
}

a:active,
a:hover {
  outline: 0;
}

dfn {
  font-style: italic;
}

mark {
  background: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 1em 2.5rem;
}

hr {
  box-sizing: content-box;
  height: 0;
}

button {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
  color: var(--primary-text);
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 15px;
}
h1,
h2,
h3 {
  font-weight: 500;
}
h1,
.h1 {
  font-size: 2rem;
  padding-bottom: 20px;
  color: var(--secondary-text);
}
h2,
.h2 {
  font-size: 1.55rem;
  padding-bottom: 0.3em;
  line-height: 130%;
}
h3,
.h3 {
  font-size: 1.45rem;
  line-height: 130%;
}
h4,
.h4 {
  font-size: 1.45rem;
  line-height: 130%;
}
h5,
.h5 {
  font-size: 1.1rem;
  line-height: 130%;
}

p {
  margin-bottom: 1.5em;
}
h1.entry-title {
  font-size: 1.85rem;
  /* border-bottom: 4px solid #f2f2f2; */
  /* padding-bottom: 10px !important; */
  color: var(--secondary-text);
}
h2.entry-title {
  border-bottom: 1px solid #eaecef;
  color: var(--secondary-text);
}
h3.widget-title {
  font-size: 1rem;
  margin-bottom: 5px;
  color: var(--secondary-text);
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
body {
  background: var(--background-color);
  /* Fallback for when there is no custom background color defined. */
}

img {
  height: auto;
  /* Make sure images are scaled correctly. */
  max-width: 100%;
  /* Adhere to container width. */
}

figure {
  margin: 1em 0;
  /* Extra wide images within figure tags don't overflow the content area. */
}

table {
  margin: 0 0 1.5em;
  width: 100%;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
header#masthead {
  margin-bottom: 0;
  padding: 0.85rem 0px;
  border-bottom: 1px solid #f3f3f3;
  background: var(--background-color) none repeat scroll 0 0;
  border-bottom: 1px solid #eee;
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1);
}

.navbar-brand > a {
  color: rgba(0, 0, 0, 0.9);
  font-size: 1.1rem;
  outline: medium none;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  display: block;
  width: 270px;
}

.navbar-brand > a:visited,
.navbar-brand > a:hover {
  text-decoration: none;
}

#page-sub-header {
  position: relative;
  padding-top: 6.5rem;
  padding-bottom: 6.5rem;
  text-align: center;
  background-size: cover !important;
  background-position: center !important;
}

.site-header .container-fluid,
.site-footer .container-fluid {
  max-width: 100%;
  padding-left: 5%;
  padding-right: 5%;
}
div#page-sub-header h1 {
  margin-bottom: 20px;
  text-transform: none;
  padding-top: 0;
  color: var(--header-title-color);
}
#page-sub-header p {
  margin-bottom: 0;
  font-weight: 300;
  color: var(--header-subtitle-color);
  font-size: 1.15rem;
}

a.page-scroller {
  color: #333;
  font-size: 2.6rem;
  display: inline-block;
  margin-top: 2rem;
}
/*aside#secondary {
    height: Calc(100vh - 140px);
    overflow: hidden;
}
aside#secondary:hover {
    overflow:auto;
}*/

/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
#masthead nav {
  padding-left: 0;
  padding-right: 0;
}

body:not(.theme-preset-active) #masthead .navbar-nav > li > a {
  /* color: var(--secondary-text);
  padding: 0.5rem;
  font-weight: 500;
  font-size: 0.875rem;*/
  padding: 0.2rem 0.2rem;
  font-weight: normal;
  font-size: 14px;
  margin: 0px 0.74rem;
  transition: all 0.3s ease;
  color: var(--primary-link);
}

body:not(.theme-preset-active) #masthead .navbar-nav > li > a:hover,
body:not(.theme-preset-active)
  #masthead
  .navbar-nav
  > li.current_page_item
  > a {
  color: var(--accent-link);
}
body:not(.theme-preset-active) #masthead .navbar-nav > li.active > a {
  color: var(--accent-link);
}
.navbar-brand {
  height: auto;
}

.navbar-toggle .icon-bar {
  background: #000 none repeat scroll 0 0;
}

.dropdown-menu .dropdown-toggle::after {
  border-bottom: 0.3em solid transparent;
  border-left: 0.3em solid;
  border-top: 0.3em solid transparent;
}

.dropdown.menu-item-has-children .dropdown.menu-item-has-children {
  position: relative;
}

.dropdown.menu-item-has-children
  .dropdown.menu-item-has-children
  > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 0 6px 6px 6px;
}
.dropdown.menu-item-has-children
  .dropdown.menu-item-has-children:hover
  > .dropdown-menu {
  display: block;
}

.dropdown.menu-item-has-children .dropdown.menu-item-has-children > a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #ccc;
  margin-top: 5px;
  margin-right: -10px;
}

.dropdown.menu-item-has-children
  .dropdown.menu-item-has-children:hover
  > a:after {
  border-left-color: #fff;
}

.dropdown.menu-item-has-children .dropdown.menu-item-has-children.pull-left {
  float: none;
}

.dropdown.menu-item-has-children
  .dropdown.menu-item-has-children.pull-left
  > .dropdown-menu {
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 6px 0 6px 6px;
  -moz-border-radius: 6px 0 6px 6px;
  border-radius: 6px 0 6px 6px;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
  display: block;
}

.dropdown-item {
  line-height: 1.2;
  padding-bottom: 0.313rem;
  padding-top: 0.313rem;
}

.dropdown-menu {
  min-width: 12.5rem;
}

.dropdown .open .dropdown-menu {
  display: block;
  left: 12.25em;
  top: 0;
}

.dropdown-menu .dropdown-item {
  white-space: normal;
  background: transparent;
  line-height: 1.6;
}
.dropdown-menu .dropdown-item:hover {
  background: transparent;
}

@media screen and (min-width: 37.5em) {
  .menu-toggle {
    display: none;
  }
}
@media screen and (min-width: 769px) {
  .dropdown-menu li > .dropdown-menu {
    right: -9.875rem;
    top: 1.375rem;
  }
}
@media screen and (max-width: 991px) {
  .navbar-nav .dropdown-menu {
    border: medium none;
    margin-left: 1.25rem;
    padding: 0;
  }

  .dropdown-menu li a {
    padding: 0;
  }

  #masthead .navbar-nav > li > a {
    padding-bottom: 0.625rem;
    padding-top: 0.313rem;
  }

  .navbar-light .navbar-toggler {
    border: medium none;
    outline: none;
  }
}
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
  margin: 0 0 1.5em;
  overflow: hidden;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
  float: left;
  width: 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
  float: right;
  text-align: right;
  width: 50%;
}
.comment-content.card-block {
  padding: 20px;
}

.navigation.post-navigation {
  padding-top: 1.875rem;
}

.post-navigation .nav-previous a,
.post-navigation .nav-next a {
  border: 1px solid #ddd;
  border-radius: 0.938rem;
  display: inline-block;
  padding: 0.313rem 0.875rem;
  text-decoration: none;
}

.post-navigation .nav-next a::after {
  content: " \2192";
}

.post-navigation .nav-previous a::before {
  content: "\2190 ";
}

.post-navigation .nav-previous a:hover,
.post-navigation .nav-next a:hover {
  background: #eee none repeat scroll 0 0;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  word-wrap: normal !important;
  /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}
.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  left: 0.313rem;
  line-height: normal;
  padding: 0.938rem 1.438rem 0.875rem;
  text-decoration: none;
  top: 0.313rem;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
  outline: 0;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
  display: inline;
  float: left;
  margin-right: 1.5em;
}

.alignright {
  display: inline;
  float: right;
  margin-left: 1.5em;
}

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

a img.alignright {
  float: right;
  margin: 0.313rem 0 1.25rem 1.25rem;
}

a img.alignnone {
  margin: 0.313rem 1.25rem 1.25rem 0;
}

a img.alignleft {
  float: left;
  margin: 0.313rem 1.25rem 1.25rem 0;
}

a img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption.alignnone {
  margin: 0.313rem 1.25rem 1.25rem 0;
}

.wp-caption.alignleft {
  margin: 0.313rem 1.25rem 1.25rem 0;
}

.wp-caption.alignright {
  margin: 0.313rem 0 1.25rem 1.25rem;
}

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
  content: "";
  display: table;
  table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
  clear: both;
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {
  margin: 0 0 1.5em;
  /*font-size: 1rem;*/
  /* Make sure select elements fit in widgets. */
}
.widget select {
  max-width: 100%;
}

.widget_search .search-form input[type="submit"] {
  display: none;
}

.nav > li > a:focus,
.nav > li > a:hover {
  background-color: #eee;
  text-decoration: none;
}
.half-rule {
  width: 6rem;
  margin: 2.5rem 0;
}
.widget_categories .nav-link {
  display: inline-block;
}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
#content.site-content {
  padding-bottom: 0px;
  padding-top: 0px;
}

.sticky .entry-title::before {
  content: "\f08d";
  font-family: "Font Awesome\ 5 Free";
  font-size: 1.563rem;
  left: -2.5rem;
  position: absolute;
  top: 0.375rem;
  font-weight: 900;
}

.sticky .entry-title {
  position: relative;
}

.single .byline,
.group-blog .byline {
  display: inline;
}

.page-content,
.entry-content,
.entry-summary {
  margin: 1.5em 0 0;
}

.page-links {
  clear: both;
  margin: 0 0 1.5em;
}

.page-template-blank-page .entry-content,
.blank-page-with-container .entry-content {
  margin-top: 0;
}

.post.hentry {
  margin-bottom: 2rem;
}

.posted-on,
.byline,
.comments-link {
  color: #9a9a9a;
}

.entry-title > a {
  color: inherit;
}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a {
  word-wrap: break-word;
}

.bypostauthor {
  display: block;
}

.comment-body .pull-left {
  padding-right: 0.625rem;
}

.comment-list .comment {
  display: block;
}

.comment-list {
  padding-left: 0;
}

.comments-title {
  font-size: 1.125rem;
}

.comment-list .pingback {
  border-top: 1px solid rgba(0, 0, 0, 0.125);
  padding: 0.563rem 0;
}

.comment-list .pingback:first-child {
  border: medium none;
}

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
  /* Theme Footer (when set to scrolling) */
  display: none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
  display: block;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
  border: none;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
  max-width: 100%;
}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
  background: #f1f1f1 none repeat scroll 0 0;
  border: 1px solid #f0f0f0;
  max-width: 96%;
  padding: 0.313rem 0.313rem 0;
  text-align: center;
}
.wp-caption img[class*="wp-image-"] {
  border: 0 none;
  height: auto;
  margin: 0;
  max-width: 100%;
  padding: 0;
  width: auto;
}
.wp-caption .wp-caption-text {
  font-size: 0.688rem;
  line-height: 1.063rem;
  margin: 0;
  padding: 0.625rem;
}

.wp-caption-text {
  text-align: center;
}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
  margin-bottom: 1.5em;
}

.gallery-item {
  display: inline-block;
  text-align: center;
  vertical-align: top;
  width: 100%;
}
.gallery-item .gallery-columns-2 {
  max-width: 50%;
}
.gallery-item .gallery-columns-3 {
  max-width: 33.33333%;
}
.gallery-item .gallery-columns-4 {
  max-width: 25%;
}
.gallery-item .gallery-columns-5 {
  max-width: 20%;
}
.gallery-item .gallery-columns-6 {
  max-width: 16.66667%;
}
.gallery-item .gallery-columns-7 {
  max-width: 14.28571%;
}
.gallery-item .gallery-columns-8 {
  max-width: 12.5%;
}
.gallery-item .gallery-columns-9 {
  max-width: 11.11111%;
}

.gallery-caption {
  display: block;
}

/*--------------------------------------------------------------
# Plugin Compatibility
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Woocommerce
--------------------------------------------------------------*/
.woocommerce-cart-form .shop_table .coupon .input-text {
  width: 8.313rem !important;
}

.variations_form .variations .value > select {
  margin-bottom: 0.625rem;
}

.woocommerce-MyAccount-content .col-1,
.woocommerce-MyAccount-content .col-2 {
  max-width: 100%;
}

/*--------------------------------------------------------------
## Elementor
--------------------------------------------------------------*/
.elementor-page article .entry-footer {
  display: none;
}

.elementor-page.page-template-fullwidth #content.site-content {
  padding-bottom: 0;
  padding-top: 0;
}

.elementor-page .entry-content {
  margin-top: 0;
}

/*--------------------------------------------------------------
## Visual Composer
--------------------------------------------------------------*/
.vc_desktop article .entry-footer {
  display: none;
}

.vc_desktop #content.site-content {
  padding-bottom: 0;
  padding-top: 0;
}

.vc_desktop .entry-content {
  margin-top: 0;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
footer#colophon {
  font-size: 85%;
  bottom: 0;
  position: relative;
  width: 100%;
}
body:not(.theme-preset-active) footer#colophon {
  color: #666;
  font-weight: 300;
  background: var(--background-color);
  border-top: 1px solid #eee;
}
.navbar-dark .site-info {
  color: #fff;
}
.copyright {
  font-size: 0.875rem;
  margin-bottom: 0;
  text-align: center;
}

.copyright a,
footer#colophon a {
  color: inherit;
}

@media screen and (max-width: 767px) {
  #masthead .navbar-nav > li > a {
    padding-bottom: 0.938rem;
    padding-top: 0.938rem;
  }
  .navbar-brand > a {
    width: 200px;
  }
  body:not(.theme-preset-active) #masthead .navbar-nav > li > a {
    padding: 0.75rem 0.2rem;
    font-size: 1.1rem;
    border-bottom: 1px solid #eee;
  }
  .site-header .container-fluid,
  .site-footer .container-fluid {
    width: 100%;
  }
}
/*--------------------------------------------------------------
# Media Query
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Notebook
--------------------------------------------------------------*/
@media only screen and (max-width: 1280px) {
  html {
    font-size: 95%;
  }
}

@media screen and (max-width: 1199px) {
  .navbar-dark .dropdown-item {
    color: #fff;
  }
  .navbar-nav .dropdown-menu {
    background: transparent;
    box-shadow: none;
    border: none;
  }
}
/*--------------------------------------------------------------
## Netbook
--------------------------------------------------------------*/
@media only screen and (max-width: 1024px) {
  html {
    font-size: 90%;
  }
}
/*--------------------------------------------------------------
## iPad
--------------------------------------------------------------*/
@media only screen and (max-width: 960px) {
  html {
    font-size: 85%;
  }
}
/*--------------------------------------------------------------
## iPad
--------------------------------------------------------------*/
@media only screen and (max-width: 768px) {
  html {
    font-size: 80%;
  }
}
/*--------------------------------------------------------------
## iPad
--------------------------------------------------------------*/
@media only screen and (max-width: 480px) {
  html {
    font-size: 75%;
  }
}

/* Custom CSS code by h */
ul.children.nav {
  margin-left: 1rem;
  margin-top: 5px;
}
aside#secondary {
  min-height: calc(100vh - 120px);
}
.sidebarBlock {
  background: #e7ecef;
  /* border-radius: 0px; */
  padding: 1.5rem 2em;
  border: 1px solid #e7ecef;
  /*margin-bottom: 2rem;*/
  padding-bottom: 2.5rem;
  min-height: 100%;
  outline: none;
}
.site-main {
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 60px;
}
aside .nav li {
  padding: 0px 0 0px 0px;
  list-style-type: none;
  /* background: url(../jsv2doctheme/inc/assets/images/list-icon.png) no-repeat 0 12px; */
  text-shadow: none;
  margin-bottom: 0px;
  margin-top: 0px;
  position: relative;
}
aside .nav > li {
  font-size: 14px;
}
ul.children.nav > li {
}
/*aside .nav li a:before {
  content:'';
  height:6px;
  width:6px;
  background: var(--primary-link);
  display:inline-block;
  border-radius:100%;
  margin-right: 6px;
  vertical-align: middle;
}*/
aside .nav li > a {
  padding: 5px 0px;
  transition: all 0.2s ease;
}
aside .nav > li > a:focus,
aside .nav > li > a:hover {
  /*background: none;
  background-color:transparent;
  text-decoration: none;
  color:var(--accent-link);
      margin-left: 2px;*/
  background: none;
  background-color: transparent;
  text-decoration: none;
  color: var(--secondary-text);
  margin-left: 0px;
}
h2.entry-title {
  border-bottom: 2px solid #f0f1f2;
  padding-bottom: 5px !important;
}
.search-results h2.entry-title {
  font-size: 1.35rem;
}
#comments {
  display: none !important;
}
.entry-footer {
  font-size: 0.85rem;
  opacity: 0.85;
}
.entry-footer .cat-links {
  font-weight: bold;
}
.entry-footer .cat-links a {
  font-weight: 400;
}
.home .post.type-post,
.category .post.type-post {
  background: #fff;
  padding: 20px;
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.05);
  border-radius: 3px;
  border: 1px solid #f3f3f3;
}
.post-thumbnail {
  margin-bottom: 0px !important;
}
.entry-title > a:hover,
.entry-title > a:focus {
  text-decoration: none;
  outline: none;
  opacity: 0.85;
}
.navigation.post-navigation {
  display: none;
}
.title,
.block,
.box {
  padding: 10px 15px;
}
.title-blueBg {
  background: var(--secondary-text);
  padding: 10px 15px;
  color: #fff;
}
.title-rightText,
.title-rightText a {
  display: inline-block;
  float: right;
  font-size: 0.85rem;
}
.title-rightText a {
  color: var(--accent-link);
  transition: all 0.2s ease;
}
.title-rightText,
.title-rightText a:hover,
.title-rightText,
.title-rightText a:focus {
  opacity: 0.7;
}
.title-rightLabel {
  margin-right: 5px;
  display: inline-block;
}
.card.customCard {
  margin-bottom: 20px;
  margin-top: 20px;
  margin-left: 20px;
}
.card.customCard .card-title {
  margin-bottom: 1rem;
  border-bottom: 1px solid #d8d8d8;
  padding-bottom: 10px;
}
.single .entry-footer span.cat-links {
  display: none !important;
}
/* code on 15-11-2019*/
.box {
  padding: 20px;
}
.box-greyBg {
  padding: 20px;
  background: #f8f8f8;
}
.box-greenBg {
  padding: 20px;
  background: var(--accent-link);
  color: #fff;
}
.box-blueBg {
  padding: 20px;
  background: var(--secondary-text);
  color: #fff;
}
.box-bordered {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 0px;
}
.mergeBottom {
  margin-bottom: 0px;
  padding-bottom: 10px;
}
.mergeTop {
  margin-top: 0px;
  padding-top: 10px;
}
.title-blueBg {
  background: var(--secondary-text);
  padding: 10px 15px;
  color: #fff;
  border-radius: 0px;
  box-sizing: border-box;
}
.title-greyBg {
  background: #f8f8f8;
  padding: 10px 15px;
  color: var(--secondary-text);
  border-radius: 0px;
  box-sizing: border-box;
}
.title-bottomBordered {
  background: none;
  padding: 10px 15px;
  color: var(--secondary-text);
  border-radius: 0px;
  border-bottom: 2px solid #eee;
  box-sizing: border-box;
}

.arrow-list li {
  list-style: none;
  text-indent: -22px;
}
.arrow-list > li::before {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: #000;
  border-image: none;
  border-style: solid;
  border-width: 0 1px 1px 0;
  content: "";
  display: inline-block;
  margin: 2px 5px;
  padding: 3px;
  transform: rotate(-45deg);
  margin-right: 10px;
}
.entry-content ul,
.entry-content ol {
  padding: 10px 20px !important;
}
.entry-content p {
  /* padding-left:15px; */
  /* padding-right:15px; */
}
.entry-content p a {
  color: var(--accent-link);
  transition: all 0.2s ease;
  text-decoration: none;
}
.entry-content p a:hover {
  text-decoration: underline !important;
  opacity: 0.8;
}
.mb-0 {
  margin-bottom: 0px !important;
}
.pb-0 {
  padding-bottom: 0px !important;
}

.contentSecondary,
.boxSecondary {
  margin-left: 5%;
}
.block {
  padding: 20px !important;
}
.tGreen,
.tGreen li,
.tGreen li a {
  color: var(--accent-link) !important;
}
.tBlue,
.tBlue li,
.tBlue li a {
  color: var(--secondary-text) !important;
}
.tWhite {
  color: #ffffff !important;
}
.tBlack {
  color: #000000 !important;
}
.bgGreen {
  background-color: var(--accent-link) !important;
}
.bgBlue {
  background-color: var(--secondary-text) !important;
}
.bgGrey {
  background-color: #f8f8f8 !important;
}
.bgWhite {
  background-color: #ffffff !important;
}
.bgBlack {
  background-color: #000000 !important;
}
.text-small {
  font-size: 75% !important;
}
.syntaxhighlighter .line table tr td {
  padding: 4px !important;
}
.entry-content a {
  color: var(--accent-link);
  transition: all 0.2s ease;
  font-style: italic;
  font-weight: 400;
}
/*#masthead .navbar-nav > li > a:after {content: '';height: 2px;width: 0%;display: block;background: var(--accent-link);transition: all 0.3s ease;}
#masthead .navbar-nav > li > a:hover:after { width:100%; }*/

/* header widget area, mainly for searchbar*/
.headerWidgetBlock {
  position: absolute;
  top: 52px;
  right: 0;
  width: 310px;
}
.widget-area .hw-widget {
  background: #eee;
  text-align: center;
  padding: 12px 20px;
}
.hw-widget .search-form {
  position: relative;
  margin: 0px;
}
.hw-widget .search-form label {
  display: block;
  margin: 0px;
  padding: 0px;
}
.hw-widget .search-form .search-submit.btn.btn-default {
  position: absolute;
  background: var(--secondary-text);
  color: #fff;
  border-radius: 0px;
  top: 0;
  right: 0;
  border-color: transparent;
  font-size: 14px;
}
.hw-widget input.search-field.form-control {
  border-radius: 0px;
  width: 100%;
  font-size: 14px;
}
.hw-widget input.search-field.form-control:focus {
  box-shadow: none;
}

li.cat-item.current-cat.nav-item > a,
li.page_item.current_page_item.nav-item > a,
.current_page_parent.nav-item > a {
  font-weight: bold;
}
li.cat-item.current-cat.nav-item > a:before,
li.page_item.current_page_item.nav-item > a:before {
  background: var(--secondary-text);
}

/* sidebar block search widget */

.sidebarBlock input.search-field.form-control,
.search-form input.search-field.form-control {
  width: 98%;
  height: calc(2.2rem + 0.75rem + 2px);
  padding-left: 45px;
  background-color: #fff;
  background-image: url("https://cdn1.iconfinder.com/data/icons/hawcons/32/698956-icon-111-search-512.png");
  background-position: 5px center;
  background-size: 34px;
  background-repeat: no-repeat;
  background-color: transparent;
}

.search-form label {
  width: 100%;
}
.search-form .search-submit {
  display: none;
}
.sidebarBlock .widget_search {
  margin-top: 15px;
  margin-bottom: 30px;
}
.content-area.pt-5 {
  padding-top: 2.35rem !important;
}
body.header-fixed .site-header {
  position: fixed;
  width: 100%;
  top: 0px;
  z-index: 99;
}
body.header-fixed .sidebarBlock {
  padding: 80px 2em 50px 2em;
}

/* code for Static Home page */
.modulesRow {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.iconBlock {
  text-align: center;
  padding: 0px;
  box-sizing: border-box;
  margin-bottom: 30px;
}
.iconBlock .iconImgWrap img {
  width: 64px;
  height: 64px;
  margin: 0 auto;
}
.iconBlock h3 {
  font-size: 1.15rem;
  color: var(--secondary-text);
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.iconBlock a.btn.btn-bordered,
.iconBlock .btn.btn-bordered {
  border: 1px solid #666;
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;
  width: 100%;
  padding: 8px 10px;
  transition: all 0.3s ease;
}
.iconBlock a.btn.btn-bordered:hover {
  background-color: #f2f2f2;
  text-decoration: none;
  border-color: #eee;
}
.syntaxhighlighter.preCode {
  width: 90% !important;
  margin: 2rem auto !important;
}
p.iconBlock-brief {
  min-height: 95px;
}
a.iconBlockWrap {
  display: block;
  border: 1px solid transparent;
  padding: 1rem;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
  transition: all 0.3s ease;
}
a.iconBlockWrap:hover {
  background: #fff;
  border-color: #eee;
  -webkit-box-shadow: 0 0.35rem 0.75rem rgba(0, 0, 0, 0.1) !important;
  -moz-box-shadow: 0 0.35rem 0.75rem rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 0.35rem 0.75rem rgba(0, 0, 0, 0.1) !important;
}
a.iconBlockWrap:hover .btn.btn-bordered {
  background: #eee;
  border-color: #ddd;
}

/* sidebar nav changes */

/*aside .nav li > a::before {
	-moz-border-bottom-colors: none;
	-moz-border-left-colors: none;
	-moz-border-right-colors: none;
	-moz-border-top-colors: none;
	border-color: var(--secondary-text);
	border-image: none;
	border-style: solid;
	border-width: 0 1px 1px 0;
	content: "";
	display: inline-block;
	margin: 2px 3px;
	padding: 3px;
	transform: rotate(-45deg);
	margin-right: 8px;
	background: none;
	border-radius:0px;
	margin-left:0px;
}*/

/*aside .nav li.page_item_has_children > a::after {
	-moz-border-bottom-colors: none;
	-moz-border-left-colors: none;
	-moz-border-right-colors: none;
	-moz-border-top-colors: none;
	border-color: var(--secondary-text);
	border-image: none;
	border-style: solid;
	border-width: 0 1px 1px 0;
	content: "";
	display: inline-block;
	margin: 2px 3px;
	padding: 3px;
	transform: rotate(45deg);
	margin-right: 5px;
	background: none;
	border-radius:0px;
	margin-left: 5px;
	transition:all 0.2s ease;
}
aside .nav li.page_item_has_children.activeLink > a::after {
	transform: rotate(-135deg);
	margin-top:0px;
	margin-bottom:-2px;
}*/
li.cat-item.current-cat.nav-item > a:before,
li.page_item.current_page_item.nav-item > a:before {
  background: none;
}

ul.children.nav.flex-column {
  display: none;
}

aside .nav.children li > a {
  padding-top: 2px;
  padding-bottom: 2px;
}
header.page-header {
  padding-top: 30px;
}
/* changes added by h for leftbar page link issue */
/*li.cat-item.current-cat.nav-item > a, li.page_item.current_page_item.nav-item > a, .current_page_parent.nav-item > a {
    font-weight: bold;
}	*/

a[aria-current="page"],
.current_page_item.nav-item > a,
.active.menu-item menu-item-type-custom > a {
  color: var(--accent-link) !important;
}
/*aside .nav li.page_item_has_children.activeLink, .current_page_parent.activeLink, .page_item_has_children.current_page_ancestor > ul {
	display:block !important;
}*/

aside .nav li.page_item_has_children.activeLink,
.current_page_parent.activeLink,
.page_item_has_children.current_page_ancestor > ul {
  display: block !important;
}
aside .nav li.page_item_has_children > span.customNavIcon::after {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: #000203;
  border-image: none;
  border-style: solid;
  border-width: 0 1px 1px 0;
  content: "";
  display: inline-block;
  margin: 2px 3px;
  padding: 3px;
  transform: rotate(45deg);
  margin-right: 5px;
  background: none;
  border-radius: 0px;
  margin-left: 5px;
  transition: all 0.2s ease;
}
aside .nav li.page_item_has_children.activeLink > span.customNavIcon::after {
  transform: rotate(-135deg);
  margin-top: 0px;
  margin-bottom: -3px;
}
aside .nav li > a {
  padding: 4px 0px;
  transition: none;
  display: inline-block;
  width: auto;
  /*min-width: 230px;
    max-width: calc(100% - 22px);*/
}
span.customNavIcon {
  cursor: pointer;
  display: inline-block;
  font-weight: normal;
  text-align: center;
  background: none;
  margin-left: 3px;
}
.page_item_has_children.current_page_ancestor.current_page_parent.nav-item
  > span.customNavIcon {
  pointer-events: none;
  cursor: auto;
}
.qe-faq-toggle.active .qe-toggle-content {
  background-color: #f5f5f5;
  padding-top: 20px;
  border: 1px solid #eee;
}
.qe-faq-toggle {
  margin-bottom: 8px;
  transition: all 0.5s;
}
@media (min-width: 992px) {
  aside#secondary.col-lg-3 {
    max-width: 370px;
  }
}

.toolbar .item.about,
.toolbar .item.copyToClipboard,
.syntaxhighlighter .toolbar a.item.about,
.syntaxhighlighter
  .toolbar
  a.item.copyToClipboard
  .syntaxhighlighter
  .toolbar
  .item.about,
.syntaxhighlighter .toolbar .item.copyToClipboard,
.syntaxhighlighter .toolbar .item.printSource {
  display: none !important;
  opacity: 0;
  visibility: hidden;
}
/*@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap'); */

body {
  font-family: "Roboto", sans-serif !important;
  margin: 0;
  -webkit-font-smoothing: auto;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.6;
}
div#page-sub-header h1 {
  font-size: 2rem !important;
  padding-bottom: 0px;
  font-weight: bold;
}

#content.site-content .container,
div#page-sub-header .container {
  width: 1170px;
  max-width: 100%;
}

.iconBlock h3 {
  font-weight: 500 !important;
}
a.iconBlockWrap:hover {
  color: initial;
}
```
:::


[title] Document Feedback
[path] HOSTED SPACES/Insights/

&#x20;To track the feedback from the visitors who read the published documentation, you will be using **Document Feedback&#x20;**(old Feedback Analytics) to receive votes and comments anonymously for each document.

At the end of the public page, in the bottom right corner, there's a question:

`Did this page help? 👍 Yes / 👎 No`

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/LY8iE9xAREE7SjZg5mH3Y_feedback-input-light.png)

Once the reader clicks on any of the votes, a comment pop-up will show where they can provide feedback about the document.

After clicking submit, you will see the votes and comments for the respective Space where the document was created.

## How to Enable Feedback Form

::::WorkflowBlock
:::WorkflowBlockItem
Go to the Space and click the **Settings** icon ( ⚙️ )
:::

:::WorkflowBlockItem
Click on th&#x65;**&#x20;Appearance** tab under the Public Docs Settings section
:::

:::WorkflowBlockItem
Scroll down to **Public View Configuration**
:::

:::WorkflowBlockItem
Enable **Doc Feedback&#x20;**(by default is hidden)
:::
::::

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/LohprNF28P_w-6iUqdLbf_settings-fa-light.png)

## How to Access the Document Feedback Panel

::::::Tabs
:::::Tab{title="With Insights addon"}
::::WorkflowBlock
:::WorkflowBlockItem
Go to the **Insights**&#x20;

![](https://archbee-image-uploads.s3.amazonaws.com/HCIek7I0UxvyNHQ0EFzVX-7BlsDn_5WGxp35FZjR5lb-20250218-131816.png)
:::

:::WorkflowBlockItem
Select a desired space&#x20;
:::

:::WorkflowBlockItem
Now click on **Document Feedback&#x20;**
:::
::::
:::::

:::::Tab{title="Without Insights addon"}
::::WorkflowBlock
:::WorkflowBlockItem
Open the document menu from 3 dots button (  :FontAwesome[]{icon="fa-solid fa-ellipsis-vertical"})
:::

:::WorkflowBlockItem
Click on "Document feedback"

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/K_JWZranXy1tD6qvlG2v6-neA9ND23c0D_3oHcykzdM-20250317-152718.png" size="70" width="565" height="284" position="center" showCaption="false"}
:::
::::
:::::
::::::

:::hint{type="info"}
**📅   Document Feedback Timeframe**

Like all other metrics, the document feedback presented here provides a snapshot of user opinion within **the past 30 days**. For a more extensive analysis, we recommend reviewing data over longer periods.
:::

The Document Feedback page will show the data with an overview of:

- Number of **all** **responses**
- Number of **upvotes**
- Number of **downvotes**

![](https://archbee-image-uploads.s3.amazonaws.com/HCIek7I0UxvyNHQ0EFzVX-UwaBG7_bny2rL_gyHoRfm-20250218-132029.png)

Want to dive deeper into the feedback for a specific doc? Just click the **chevron button (>)&#x20;**&#x61;t the end of the row, and you'll see exactly what your users had to say. Did they give it a thumbs up or a thumbs down? Find out!

And hey, don't forget to check in on this feedback regularly. It's a great way to stay in the loop on what your users are thinking.

[title] Custom Code
[path] HOSTED SPACES/

Adding custom code to a hosted Space.

The code that you add to a Space will only work on your domain, so you need to check the production website to see changes.

::::WorkflowBlock
:::WorkflowBlockItem
Choose a space and click on the **Settings** icon ( ⚙️ ) to open th&#x65;**&#x20;Space Settings**
:::

:::WorkflowBlockItem
Look for the **Custom Code** tab&#x20;

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/H6WN6zIZ8TLKzMY6PSa2l_customcode-light.png)
:::

:::WorkflowBlockItem
&#x20;Add your **JavaScript**, **CSS** code, include headers or add a footer.

Here is an example of [How to change the font](docId\:hkS7WFUL-ur0Z6mmc7Ida)&#x20;
:::
::::


[title] Update Space
[path] PUBLIC API/DocSpace/

{
  "id": "R-4X7aQduawsoP0uQGjdR",
  "type": "api-oas-v2",
  "data": {
    "method": "POST",
    "url": "https://api.archbee.com/api/public-api/space/update",
    "servers": [
      {
        "url": "https://api.archbee.com/api/public-api/space/update",
        "description": "Archbee API Server"
      }
    ],
    "name": "Update Space",
    "description": "Update space fields.",
    "contentType": "application/json",
    "request": {
      "pathParameters": [],
      "headerParameters": [
        {
          "name": "accept",
          "type": "string",
          "kind": "optional",
          "description": "Generated from available response content types",
          "enum": [
            "application/json"
          ],
          "default": "application/json"
        },
        {
          "kind": "required",
          "name": "Content-Type",
          "type": "string",
          "example": "application/json",
          "description": ""
        }
      ],
      "queryParameters": [],
      "bodyDataParameters": [
        {
          "kind": "required",
          "name": "body",
          "type": "object",
          "description": "",
          "schema": [
            {
              "name": "publicAccessControlPart",
              "kind": "optional",
              "type": "object",
              "description": "Configuration for public access control and authentication",
              "example": "",
              "schema": [
                {
                  "name": "publicProtectionType",
                  "kind": "optional",
                  "type": "string<None | Password | Guest accounts | Private Accounts | Private Link | Magic Link | JWT | SAML>",
                  "description": "Type of protection for the space",
                  "example": "Password",
                  "enum": [
                    "None",
                    "Password",
                    "Guest accounts",
                    "Private Accounts",
                    "Private Link",
                    "Magic Link",
                    "JWT",
                    "SAML"
                  ]
                },
                {
                  "name": "publicPassword",
                  "kind": "optional",
                  "type": "string",
                  "description": "Password required when publicProtectionType is 'Password'",
                  "example": "mySecurePassword123"
                },
                {
                  "name": "publicGuestAccounts",
                  "kind": "optional",
                  "type": "array",
                  "description": "Guest accounts required when publicProtectionType is 'Guest accounts'",
                  "example": "",
                  "itemType": "object",
                  "customType": "object[]",
                  "schema": [
                    {
                      "name": "email",
                      "kind": "optional",
                      "type": "string<email>",
                      "description": "",
                      "example": "guest@example.com",
                      "format": "email"
                    },
                    {
                      "name": "password",
                      "kind": "optional",
                      "type": "string",
                      "description": "",
                      "example": "guestPassword123"
                    }
                  ]
                },
                {
                  "name": "publicMagicLinkAccounts",
                  "kind": "optional",
                  "type": "array",
                  "description": "Magic link accounts required when publicProtectionType is 'Magic Link'",
                  "example": "",
                  "itemType": "object",
                  "customType": "object[]",
                  "schema": [
                    {
                      "name": "email",
                      "kind": "optional",
                      "type": "string<email>",
                      "description": "",
                      "example": "user@example.com",
                      "format": "email"
                    }
                  ]
                },
                {
                  "name": "publicPrivateAccounts",
                  "kind": "optional",
                  "type": "array",
                  "description": "Private accounts required when publicProtectionType is 'Private Accounts'",
                  "example": "",
                  "itemType": "object",
                  "customType": "object[]",
                  "schema": [
                    {
                      "name": "email",
                      "kind": "optional",
                      "type": "string<email>",
                      "description": "",
                      "example": "private@example.com",
                      "format": "email"
                    }
                  ]
                },
                {
                  "name": "privateLinkTokens",
                  "kind": "optional",
                  "type": "array",
                  "description": "Private link tokens required when publicProtectionType is 'Private Link'",
                  "example": "",
                  "itemType": "object",
                  "customType": "object[]",
                  "schema": [
                    {
                      "name": "description",
                      "kind": "optional",
                      "type": "string",
                      "description": "",
                      "example": "API Access Token"
                    },
                    {
                      "name": "env",
                      "kind": "optional",
                      "type": "string",
                      "description": "",
                      "example": "production"
                    },
                    {
                      "name": "token",
                      "kind": "optional",
                      "type": "string",
                      "description": "",
                      "example": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9"
                    }
                  ]
                },
                {
                  "name": "jwtValidationType",
                  "kind": "optional",
                  "type": "string<JWT-Secret | JWT-KeySet>",
                  "description": "JWT validation type required when publicProtectionType is 'JWT'",
                  "example": "JWT-Secret",
                  "enum": [
                    "JWT-Secret",
                    "JWT-KeySet"
                  ]
                },
                {
                  "name": "jwtKeyUrl",
                  "kind": "optional",
                  "type": "string",
                  "description": "<p>JWT key URL required when jwtValidationType is 'JWT-KeySet'</p>",
                  "example": "https://example.com/.well-known/jwks.json"
                },
                {
                  "name": "jwtSecret",
                  "kind": "optional",
                  "type": "string",
                  "description": "<p>JWT secret required when jwtValidationType is 'JWT-Secret'</p>",
                  "example": "myJwtSecret123"
                },
                {
                  "name": "conditionalRuleId",
                  "kind": "optional",
                  "type": "string",
                  "description": "Conditional rule ID for advanced access control",
                  "example": "21-character__string0"
                },
                {
                  "name": "jwtRedirectURL",
                  "kind": "optional",
                  "type": "string",
                  "description": "JWT redirect URL for authentication flow",
                  "example": "https://example.com/auth/callback"
                },
                {
                  "name": "samlMetadata",
                  "kind": "optional",
                  "type": "string",
                  "description": "SAML metadata required when publicProtectionType is 'SAML'",
                  "example": "<EntityDescriptor>...</EntityDescriptor>"
                }
              ]
            },
            {
              "name": "hostnamePart",
              "kind": "optional",
              "type": "object",
              "description": "Custom hostname configuration for the space",
              "example": "",
              "schema": [
                {
                  "name": "hostname",
                  "kind": "optional",
                  "type": "string",
                  "description": "Custom hostname for the space",
                  "example": "docs.example.com"
                },
                {
                  "name": "hostnamePath",
                  "kind": "optional",
                  "type": "string",
                  "description": "Path component for the hostname",
                  "example": "/api-docs"
                }
              ]
            },
            {
              "name": "spaceLinks",
              "kind": "optional",
              "type": "array",
              "description": "Links to other spaces. List should start with current space.",
              "example": "",
              "itemType": "object",
              "customType": "object[]",
              "schema": [
                {
                  "name": "label",
                  "kind": "optional",
                  "type": "string",
                  "description": "",
                  "example": "Related Documentation"
                },
                {
                  "name": "docSpaceId",
                  "kind": "optional",
                  "type": "string",
                  "description": "",
                  "example": "21-character__string0"
                }
              ]
            }
          ],
          "isExpanded": true
        }
      ],
      "formDataParameters": [],
      "oAuthParameters": [
        {
          "id": "bearerAuth",
          "name": "bearerAuth",
          "kind": "optional",
          "type": "http",
          "description": "<p>Requires the <code>Authorization</code> header in the form <code>Authorization: Bearer {base64(docSpaceId~apiKey)}</code> Where the token is base64 encoding of docSpaceId, tilde, and apiKey.</p>",
          "scheme": "bearer"
        }
      ],
      "cookieParameters": []
    },
    "responses": [
      {
        "statusCode": "200",
        "description": "Process status",
        "jsonExample": "",
        "isExpanded": true,
        "schema": [
          {
            "kind": "optional",
            "type": "object",
            "description": "Process status",
            "schema": [
              {
                "name": "status",
                "kind": "optional",
                "type": "string<OK>",
                "description": "Response Status",
                "enum": [
                  "OK"
                ]
              },
              {
                "name": "data",
                "kind": "optional",
                "type": "object",
                "description": "DocSpace id",
                "example": "",
                "schema": [
                  {
                    "name": "id",
                    "kind": "optional",
                    "type": "string",
                    "description": "doc space id"
                  }
                ]
              }
            ],
            "isExpanded": true
          }
        ]
      },
      {
        "statusCode": "400",
        "description": "Invalid request",
        "jsonExample": "",
        "isExpanded": true,
        "schema": [
          {
            "kind": "optional",
            "type": "object",
            "description": "",
            "customType": "Response400",
            "schema": [
              {
                "name": "status",
                "kind": "optional",
                "type": "string<OK | Not OK>",
                "description": "Response Status",
                "example": "Not OK",
                "enum": [
                  "OK",
                  "Not OK"
                ]
              },
              {
                "name": "messages",
                "kind": "optional",
                "type": "array",
                "description": "Array of messages",
                "example": "[\"Some error message\"]",
                "itemType": "string",
                "customType": "string[]",
                "itemExample": "Some error message",
                "itemDefault": ""
              }
            ],
            "modelRef": "#/components/schemas/Response400",
            "isExpanded": true
          }
        ]
      }
    ],
    "hasXCodeSamples": false
  },
  "children": [
    {
      "text": ""
    }
  ]
}
[title] Open Api
[path] PUBLIC API/


[title] Organization
[path] PUBLIC API/


[title] Upload single file
[path] PUBLIC API/Upload/

{
  "id": "aAh7or9Ak2rDDbXvxEyX9",
  "type": "api-oas-v2",
  "data": {
    "method": "POST",
    "url": "https://api.archbee.com/api/public-api/upload/file",
    "servers": [
      {
        "url": "https://api.archbee.com/api/public-api/upload/file",
        "description": "Archbee API Server"
      }
    ],
    "name": "Upload single file",
    "description": "Upload a single file to the File Manager",
    "contentType": "application/json",
    "request": {
      "pathParameters": [],
      "headerParameters": [
        {
          "name": "accept",
          "type": "string",
          "kind": "optional",
          "description": "Generated from available response content types",
          "enum": [
            "application/json"
          ],
          "default": "application/json"
        },
        {
          "kind": "required",
          "name": "Content-Type",
          "type": "string",
          "example": "multipart/form-data",
          "description": "",
          "default": "multipart/form-data"
        }
      ],
      "queryParameters": [],
      "bodyDataParameters": [],
      "formDataParameters": [
        {
          "kind": "required",
          "name": "file",
          "type": "file",
          "example": "upload file",
          "description": "<p>Open api file, .json or .yml or .yaml or .zip</p>",
          "default": "@swagger.json",
          "format": "binary"
        },
        {
          "kind": "optional",
          "name": "isPublic",
          "type": "string<true | false>",
          "example": true,
          "description": "OPTIONAL. Whether the uploaded file is public or not regarding AWS link.",
          "default": true,
          "enum": [
            "true",
            "false"
          ]
        }
      ],
      "oAuthParameters": [
        {
          "id": "bearerAuth",
          "name": "bearerAuth",
          "kind": "optional",
          "type": "http",
          "description": "<p>Requires the <code>Authorization</code> header in the form <code>Authorization: Bearer {base64(docSpaceId~apiKey)}</code> Where the token is base64 encoding of docSpaceId, tilde, and apiKey.</p>",
          "scheme": "bearer"
        }
      ],
      "cookieParameters": []
    },
    "responses": [
      {
        "statusCode": "200",
        "description": "Upload OK status",
        "jsonExample": "",
        "isExpanded": true,
        "schema": [
          {
            "kind": "optional",
            "type": "object",
            "description": "Upload OK status",
            "schema": [
              {
                "name": "status",
                "kind": "optional",
                "type": "string<OK>",
                "description": "Response Status",
                "example": "OK",
                "enum": [
                  "OK"
                ]
              },
              {
                "name": "data",
                "kind": "optional",
                "type": "object",
                "description": "",
                "example": "",
                "schema": [
                  {
                    "name": "src",
                    "kind": "optional",
                    "type": "string",
                    "description": "AWS link to the uploaded file"
                  }
                ]
              }
            ],
            "isExpanded": true
          }
        ]
      },
      {
        "statusCode": "400",
        "description": "Invalid request",
        "jsonExample": "",
        "isExpanded": true,
        "schema": [
          {
            "kind": "optional",
            "type": "object",
            "description": "",
            "customType": "Response400",
            "schema": [
              {
                "name": "status",
                "kind": "optional",
                "type": "string<OK | Not OK>",
                "description": "Response Status",
                "example": "Not OK",
                "enum": [
                  "OK",
                  "Not OK"
                ]
              },
              {
                "name": "messages",
                "kind": "optional",
                "type": "array",
                "description": "Array of messages",
                "example": "[\"Some error message\"]",
                "itemType": "string",
                "customType": "string[]",
                "itemExample": "Some error message",
                "itemDefault": ""
              }
            ],
            "modelRef": "#/components/schemas/Response400",
            "isExpanded": true
          }
        ]
      }
    ],
    "hasXCodeSamples": false
  },
  "children": [
    {
      "text": ""
    }
  ]
}
[title] Organizations
[path] ORGANIZATIONS/

An account can be in multiple Organization at the same time.

For example, if you:

- work for a company;
- do freelancing;
- and build your own company at the same time;

You can be **in all 3 Organization at the same time**, saving you lots of time from logging in for each of them repeatedly.

Whenever you create a new organization, you will be assigned as the super admin for that space.

Payment information is also assigned to Organizations, not individual users.


[title] IMPORT & EXPORT
[path] /


[title] Zendesk Federated Search
[path] INTEGRATIONS/

## 1.Create an API key for Archbee Integration

Go to  your Zendesk admin control panel `https://{zendeskSubdomain}.zendesk.com/admin/apps-integrations/targets/targets`and add an API key for Zendesk - Archbee integration.



::Image[]{alt="Zendesk API key - Archbee integration" src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/i9Kd1oKb0fXmkYoR3rZjp_image.png" size="88" width="2922" height="1184" caption="Zendesk API key - Archbee integration" position="center" showCaption="true"}

## 2. Archbee Zendesk integration

Go to your Archbee Account > [Integrations](https://app.archbee.com/settings/team-integrations) `https://app.archbee.com/settings/team-integrations`

Scroll to Zendesk Integration and fill the form.

![Archbee Zendesk Integration](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/VqcOjYfqNWQ3jG6GISLca_image.png "Archbee Zendesk Integration")

## 3. Sync Archbee Space with Zendesk

Go to a space that is or will published and activate Zendesk sync.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/nDRQmB1S2-u_Kd53nVgnO_image.png)

After space publish, go  Zendesk Help Center`https://{zendeskSubdomain}.zendesk.com/hc/admin/general_settings` and activate Search Settings:



::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/9EvsGmZjszDMYCQjfq_w-_image.png" size="76" width="2690" height="998" position="center" showCaption="false"}

Click **Manage**  from Search Sources&#x20;



![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/g3700CQep27Ndx6XRJgfv_image.png)

Clic&#x6B;**&#x20;Add Search Sources**

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/GWBVzpna6bH96S5asyIDO_image.png)

And activate your **Archbee Docs External content.**

:::hint{type="warning"}
If an Archbee Space Zend Federated Sync Status is disabled, after space publish, Archbee will automatically unpublish Zendesk Source.
:::

## 4. Using Zendesk Help Center Search

And now you can go to your Zendesk HelpCenter Domain and use zend desk Search:

`https://{zendeskSubdomain}.zendesk.com/hc/en_us`&#x20;



::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/ux36rHz1HVTF3mnHcBiuT_image.png" size="78" width="2468" height="1418" position="center" showCaption="false"}


[title] G-Suite (Sheets / Docs / Slides)
[path] INTEGRATIONS/Embed Examples/

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/At_k9otEG4zF8Kz3MBn6l_archbee-google.png" size="60" width="1600" height="901" position="center" showCaption="false"}

### What is Google Suite?

G-Suite embeds helps the clients to have integrated docs within the documentation page.&#x20;

It is an important embed, as they can also collaborate and make changes on the docs directly from the embed on Archbee, without the need to get on multiple tabs.&#x20;

### Google Sheets&#x20;

Is an online spreadsheet app that lets you create and format spreadsheets and work with other people.&#x20;

You can add, edit, or format text, numbers, or formulas in a spreadsheet and you can also share files and folders with people and choose whether they can view, edit, or comment on them.

### Google Docs

Is a free Web-based application in which documents and spreadsheets can be created, edited and stored online. Files can be accessed from any computer with an Internet connection and a full-featured Web browser.&#x20;

Users of Google Docs can import, create, edit and update documents and spreadsheets in various fonts and file formats, combining text with formulas, lists, tables and images.

### Google Slides&#x20;

Is a free presentation web application. It includes nearly all the capabilities of a traditional presentation program, such as Microsoft PowerPoint.&#x20;

Google Slides offers the benefit of cloud storage. Google Slides features include: the ability to insert images, formatted text, animations, other media; the use of a variety of templates; the ability to edit transitions between slides; collaborative editing for sharing between computers, devices and other users.

***

### G-Suites embed example

::google-slides{url="https://docs.google.com/presentation/d/1vmmwSOws35J2iGgy5XEzUYFvIzQHr0XnPBdbwFQtklQ/edit#slide=id.g101d6defc9_20_0"}


[title] Loom
[path] INTEGRATIONS/Embed Examples/

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/WCy-zP3e2ZVjO_2W0vV87_archbee-loom.png" size="60" width="1200" height="676" position="center" showCaption="false"}

### What is Loom?

[Loom](https://support.atlassian.com/loom) is an effective video messaging tool that enhances communication in Archbee by enabling users to create instantly shareable videos.&#x20;

You can easily record your camera, microphone, and desktop simultaneously, ensuring clear and engaging presentations. Leverage Loom to improve content delivery and collaboration within Archbee.

By inserting the Loom URL in the Archbee embed, the recording will be rendered on the Archbee page.&#x20;

### Use cases

Loom embeds help the clients bring their own demos, how-to or onboarding videos, etc.,  that they can share with the users.

::loom{url="https://www.loom.com/embed/baeccfd1dbdb4d5f9a16952f16e85db7?sid=fdb53d76-bcf5-483f-b9fc-e37661768d26"}


[title] GitHub
[path] INTEGRATIONS/

An alternative to our modern block-based editor with inline comments and markdown shortcuts is to write the content directly in GitHub, and then sync it with Archbee.

For folks that use git as a versioning system and write the content in Github, you can set it up when you add a new **Space&#x20;**&#x77;ith the GitHub integration.

## Integrate GitHub

::::WorkflowBlock
:::WorkflowBlockItem
In your Archbee account, in the top left corner, click on **Organization settings** > [Configurations](https://app.archbee.com/settings/team-integrations) page.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/LpQctYlUfwe2NvaCFSkA8_configurations-light.png "Find GitHub configuration tile")
:::

:::WorkflowBlockItem
Click on the `Connect GitHub` button to open the login page and authorize Archbee.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/3C1zzIod8L2ZQchzABNEs_github-login-light.png "Connect GitHub")
:::

:::WorkflowBlockItem
Choose what you want to sync: *All repositories* or *Only select repositories*. After you've made your selection, click **Install**.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/i6Rg9CwJxKhOJlpGuO6Vi_github-intall-light.png "Install Ar")
:::

:::WorkflowBlockItem
After the setup is done, you will be redirected to the Configurations page and you should see the `✅ Connected` status.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/bZlv3mXYHMQzWXZouzXec_github-connected-light.png "GitHub ''Connected'' status")
:::

:::WorkflowBlockItem
Now when you create a new Space, you can choose between your repositories from the *Write in GitHub* option.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/bXxfgx95AQOJBsmbgkhxh_github-create-light.png "Write in GitHub")
:::

:::WorkflowBlockItem
After you click **Add Space**, the content from the selected GitHub repository should be synced.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/F-prIG3Lp8PbenNgi2diJ_github-page-light.png "Content from GitHub synced")
:::
::::

## Next steps

- See how to [Set up the repository](docId\:fsqc31Wq96DYg7y-vml_H).
- Auto-sync your [Custom Code](docId\:CyShQt4kJc-PCmNlE3roN) from GitHub to Space Settings/Custom Code.
- Add code snippets using the [Code editor: multi-language](docId\:YJKINB_v-hnmwGuKiUrFm) block in your GitHub documentation and sync them with Archbee.
- Check out the Markdown syntax for Archbee block in [Use Markdown shortcuts](docId:9aaCRqJMq9JnYvzSgNOfs).


[title] Intercom
[path] INTEGRATIONS/

Archbee offers an Intercom integration. With the Intercom integration, you are able to search your public docs published with Archbee directly from an Intercom widget.

In a nutshell, any Intercom user that interacts with customers will have the ability to quickly search through the Archbee public doc portal/knowledge base and send a relevant article to your customer in just a few clicks.

### How it works

First, you need to integrate Intercom with Archbee (see [below](docId\:DWm3Pha0McItoKasQ3sRm) how to do it)

After the successful integration and configuration, the Archbee app will allow you to:

1. Search the content of your published Archbee docs portal/knowledge base and send your customer an article directly inside the Intercom chat
2. Send your customer a Search box so he can search topics of interests from your Archbee docs portal/knowledge base directly inside the Intercom chat

### How to configure Intercom integration

::::::WorkflowBlock
:::WorkflowBlockItem
Go to the [Integrations](https://app.archbee.com/settings/profile) page and click the Connect Intercom button

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/Ke8paKdIER6ok09j4TpOW_image.png" size="50" width="1010" height="470" position="center" showCaption="false"}
:::

:::WorkflowBlockItem
Authorise access for Archbee - Intercom integration

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/K6JQqeALXHPHtkP4qbALk_image.png" size="50" width="1240" height="576" position="center" showCaption="false"}

And if everything goes OK, you should see in the [integrations](https://app.archbee.com/settings/profile) page that Intercom is connected



::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/1am_IxjrIkkCWNfxEkxxC_image.png" size="50" width="764" height="304" position="center" showCaption="false"}
:::

:::::WorkflowBlockItem
Go to Intercom App Store and search for Archbee App

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/ubLq9_vADonrHjUxiSnlM_image.png" size="20" width="78" height="384" position="center" showCaption="false"}
:::

:::VerticalSplitItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/UzEp9gkRs1FyO62M4FOfE_image.png)
:::
::::

Check if the Archbee App is already installed (it should be installed by default after step 1 and step 2):

1. Click the Archbee app
2. A popup will open with Archbee app details - check on the lower right side for the Install/Uninstall button

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/5mhxrJZkzgwyzR3OgUAP-_image.png" size="20" width="652" height="464" position="center" showCaption="false"}
:::::

:::::WorkflowBlockItem
Now that you have the Archbee Search app installed, there are 2 ways to access it from your Intercom **Inbox** view

::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
**Archbee from the chat bar**

1\. Open **Shortcuts** menu and select **Use Archbee** from the list

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/QW2qZjvs3xVQ6k484-meC_image.png)

2\. Search by keywords and share the results with your customer by clicking the **Add to Chat** button

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/-CiSmoTmSnuWJMfpBJa-m_image.png)

3\. Click on any of the results to open them in a new tab and verify before you send
:::

:::VerticalSplitItem
**Access Archbee from the right panel**

1\. Open **Edit Apps&#x20;**&#x6F;n the bottom right and **PIN&#x20;**&#x41;rchbee to your bar

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/zYwQxXBON7U1MfzuZTyWX_image.png" size="56" width="766" height="956" position="center" showCaption="false"}

2\. Open the newly added Archbee App, type your keywords and hit Search button

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/w-yXsrhoWfytoZyv_VWAe_image.png" size="74" width="580" height="724" position="center" showCaption="false"}

3\. Click on any of the results to open them in a new tab and verify before you send
:::
::::
:::::

:::WorkflowBlockItem
This is how the articles you send will look like to your customer

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/Ctd2FQsNwm0e8OlK9Gvmy_image.png" size="36" width="800" height="1262" position="center" showCaption="false"}
:::

:::WorkflowBlockItem
With the Archbee Search App you can also send blanck search boxes and the user can search by himself directly in the Intercom app

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/vvmNfsxCirABYIDYLeH36_image.png" size="36" width="800" height="704" position="center" showCaption="false"}
:::
::::::




[title] Jira
[path] INTEGRATIONS/Embed Examples/

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/ZKJJM2u1wyJ1y2yA-ASXS_archbee-jira.png" size="60" width="1200" height="676" position="center" showCaption="false"}

### What is Jira?

Integrate Jira issues directly into your pages for Archbee, allowing for clear visibility of essential information right where you need it.&#x20;

This integration enhances project tracking, improves collaboration among team members, and ensures that all stakeholders remain aligned on project progress, ultimately leading to increased productivity and more effective decision-making.

To use Jira embeds, you need to be integrated with your Jira account. Use the following steps for integration:

::::WorkflowBlock
:::WorkflowBlockItem
Go to your [Profile](https://app.archbee.com/settings/profile) section in the Archbee account
:::

:::WorkflowBlockItem
Configurations -> Connect Jira Account
:::

:::WorkflowBlockItem
Fill up your Jira credentials&#x20;
:::
::::

Simply paste your Jira ticket into the Archbee editor, and it will be automatically formatted like this:

::jira{url="https://testarchbee.atlassian.net/secure/RapidBoard.jspa?rapidView=1&projectKey=AT&selectedIssue=AT-1" jiraIssue="[object Object]"}

:::hint{type="warning"}
We do not render Jira Iframes or Forms in Archbee editor
:::








[title] Custom code & code snippets with GitHub
[path] INTEGRATIONS/GitHub/

Integration with GitHub allows you to sync the [Custom Code](docId\:CyShQt4kJc-PCmNlE3roN):  [customCSS](docId\:d4gup0qqxInIgDThftqCn), **customJS**, **footerTemplate**, **headerTemplate**, directly from the GitHub repository. These variables can be raw text or link to a file from the `root` folder.&#x20;

You just need to define the `archbee.json` file in your repo and add your custom code or custom CSS, like in this example:

:::CodeblockTabs
archbee.json

```json
{
  "root": "docfolderwithsummary",
  "structure": {
    "summary": "summary.md",
    "assets": ".archbee/assets"
  },
  "customJS":"custom.js",
  "customCSS":"* \n {  font-family: \"Comic Sans MS\", cursive, sans-serif; }",
  "footerTemplate": "",
  "headerIncludes": ""
}
```

summary.md

```none
# Table of contents

- [Introduction](introduction.md)

## Walkthroughs

- [Installing](walkthroughs/01-installing-app.md)
- [Adding Event Handlers](walkthroughs/02-adding-event-handlers.md)
- [Defining Custom Elements](walkthroughs/03-defining-custom-elements.md)

## Docs

- [Configuring](docs/01-configuring-app.md)
- [Adding info](docs/02-adding-info.md)
- [Starting App ](docs/03-starting-app.md)
```

custom.js

```markdown
window._archbee = window._archbee || {
  queue: [],
  push: function (x) {window._archbee.queue.push(x)}
};

window._archbee.push({
  eventType: "init",
  spaceId: "PUBLISHED-0AUu0NJ_zFLC52lH2Yy5U",
});
```
:::

If you push the code to GitHub, Archbee will read the configuration from the `archbee.json` file and automatically update the **Space Settings -> Custom Code&#x20;**&#x73;ection with your new code.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/eoeIwuvZ0mtjJpZRtOcSk_github-customcode-light.png "Custom code in Space settings")

## Code snippets

You can add code snippets in your GitHub repo, you just need to configure them in the `config.md` file.

:::hint{type="warning"}
The `config.md` file must be placed in the same folder as the `summary.md` file.
:::

Below is an example of a `config.md` file:

:::CodeblockTabs
config.md

```markdown
## use a file relative to  docsPath folder
::use{file="swagger-v2.json#L2"}

## relative path to repo structure
::use{file="/app/package.json#L1-L5"}

## relative path to docsPath folder
::use{file="../app/package.json#L1-L5"}

## one single line
::use{file="../app/package.json#L5"}

## specify syntax, from and to parameters explicitly
::use{file="swagger-v2.json" from="L6" to="L10" syntax="javascript"}

```
:::

### Example

Assuming that you have the below `package.json` file (from the above example):

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/cS_lk0o5MtUDGpk-qzVbk_github-codesnippets-light.png "Code snippet example")

And also the `config.md` file:

:::CodeblockTabs
config.md

```markdown
## specify syntax, from and to parameters explicitly
::use{file="swagger-v2.json" from="90" to="127" syntax="javascript"}

```
:::

You will see the following in the Archbee doc after the import:

```javascript
      "post": {
        "tags": ["pet"],
        "summary": "Add a new pet to the store",
        "description": "",
        "operationId": "addPet",
        "consumes": ["application/json", "application/xml"],
        "produces": ["application/json", "application/xml"],
        "parameters": [
          {
            "in": "body",
            "name": "body",
            "description": "Pet object that needs to be added to the store",
            "required": true,
            "schema": {
              "$ref": "#/definitions/Pet"
            }
          }
        ],
        "responses": {
          "200": {
            "description": "Success!"
          },
          "405": {
            "description": "Invalid input"
          }
        },
        "security": [
          {
            "api_key": []
          },
          {
            "petstore_auth": ["write:pets", "read:pets"]
          }
        ]
      },
```


[title] GitHub 2-way sync
[path] INTEGRATIONS/GitHub/

## Overview

GitHub's 2-way sync feature allows for a bidirectional synchronization between GitHub repositories and Archbee. Unlike a traditional one-way sync, which only updates changes from a source to destination (Github to Archbee), 2-way sync ensures that changes made in both GitHub and Archbee are reflected on each platform.

:::hint{type="warning"}
Even though this is a 2-way sync system, we still consider GitHub as the absolute source of truth. We will open a PR, and whether you merge that request is up to you. Note that if you do merge it, the documents in Archbee will get updated.
:::

Whether you're a developer, project manager, or collaborator, this feature allows you to seamlessly synchronize your GitHub repositories with Archbee, ensuring consistency across your workflows.

## Get started 🏁

To enable the 2-way sync on your Archbee account, follow these steps:

1. [Integrate with Github](https://www.archbee.com/docs/github)
2. After the setup is done, you will be redirected to the Configurations page, and you should see the `GitHub is connected`status.

## Create a new space and write in GitHub ✍️

When you create a new Space, you can select a repository from the **Write in GitHub** option.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/E5XdR0KUblJnl0jmol1vU_create-modal-light.png "Write in GitHub")

Select your Git repository and the branch you want to import and click **Add Space&#x20;**&#x61;t the bottom of the modal:

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/ifk6IRw68pu4R-iFapJLW_git-modal-light.png "Select GitHub repo")

Once completed, you should receive a notification that your GitHub content has been imported.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/XsmkYQWHLWVcMcpH_uZdD_updates-2-light.png "Successful GitHub import")

### Edit in GitHub 👈

::::WorkflowBlock
:::WorkflowBlockItem
In the Archbee Editor, click on the **Edit in GitHub** button and you will be redirected to your GitHub account.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/3X34eFqER-fDOZdiBcfr5_edit-github-light.png "Edit in GitHub button")
:::

:::WorkflowBlockItem
Make your edits.
:::

:::WorkflowBlockItem
Click on **Commit changes** when ready.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/zwgox6xjsw-Z4dLXCuNdC_git-light.png "Commit changes buttonE")
:::

:::WorkflowBlockItem
Go back to Archbee. After you receive the notification in the lower right corner, the content should update in real-time.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/6fwrfavG3o8L8w77BE0Ig_updates-light.png "Updating content notification")
:::
::::

### Create a PR 👈

::::WorkflowBlock
:::WorkflowBlockItem
In the Archbee editor, click on th&#x65;**&#x20;Edit** button and the review system will be activated for your space.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/ddKxEhoipsIKaRuFyR4P1_edit-archbee-light.png "Edit button")
:::

:::WorkflowBlockItem
Write/replace your content in Draft mode.
:::

:::WorkflowBlockItem
Once you've completed this, go to **Publish Space** in the top right corner. Select **Push to Github Pull Request**, and then **Review & Push to Gitbub PRs** to review.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/0jmYkevXy1M7N0fs7ZrhR_publish-2-light.png "Review&Push to GitHub PR button")
:::

:::WorkflowBlockItem
Review your changes and if it's all good, hit the **Push to GitHub PR&#x20;**&#x62;utton.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/npQhrzzRke9pNHfnecada_review-light.png "Push to GitHub PR button")
:::

:::WorkflowBlockItem
Use the **Push to GitHub Pull Request** button to open the pull request in your GitHub repository:

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/Akc8HBcbXcGegwCInbCzb_push-light.png "Push to GitHub PR link")
:::

:::WorkflowBlockItem
Review the changes in the GitHub repository.
:::

:::WorkflowBlockItem
Click on **Merge Pull request** -> Confirm Merge.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/KcZcEczKWvQmFbvaer9d5_pull-2-git-light.png "Merge pull request button")
:::

:::WorkflowBlockItem
Go back to Archbee. Content will be updated in GitHub as soon as you receive this successful notification:

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/6fwrfavG3o8L8w77BE0Ig_updates-light.png "Content updated successful notification")
:::
::::



## Select GitHub branch 🕎

To initiate the sync process, you need to select the specific branch in your GitHub repository that Archbee will monitor for changes. Subsequently, you need to open pull requests in this designated branch to trigger the sync mechanism.

If that doesn't work automatically, you can force sync by navigating to **Space settings** > **GitHub integration&#x20;**> click the **Sync with repo** button.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/fI7AljLEoxH6XS-AQmjYL_settings-light.png "Select GitHub branch")


[title] Integration to Slack
[path] INTEGRATIONS/

Install our integration for Slack to get notified of your team's activity, and get your questions answered easily using commands.

## &#x20;1. Installing integration to Slack in Archbee

At this step you have installed Archbee App in Slack (2.) but you didn't connect your account in Archbee:

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/zLgNZqa4ouKwOSN6RDv_c_image.png" size="66" width="1216" height="388" position="center" showCaption="false"}

Here is what you can do:

1\. Create your Archbee account here [Signup](https://app.archbee.com/signup);
2\. Invite teammates here [Teams](https://app.archbee.com/settings/teams);
3\. On the [Integrations](https://app.archbee.com/settings/team-integrations) page, click on **Connect Slack Account**;
4\. Click Authorize. Now Archbee is integrated to Slack!

## &#x20;2. Add Archbee Slack App&#x20;

1. Go to Slack app directory and Search Archbee App -  [https://slack.com/apps/search?q=archbee](https://slack.com/marketplace/search?q=archbee)
2. Go to Slack Archbee App and click **Add to Slack**
   ::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/AOzSmTBqpJxT5BW_ELRM8_image.png" size="28" width="576" height="532" position="center" showCaption="false"}
3. Click Authorize. Now Slack is integrated to Archbee!

## &#x20;3. Test integration

1. Go to any slack channel and type  `/archbee help` command and you will receive following message from Archbee Bot.

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/L0055JN24421dmk4TBDoi_image.png" size="74" width="1326" height="594" position="center" showCaption="false"}

&#x20;        2\. By default Archbee Bot will post events in Archbee Bot Messages TAB

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/Pl291i8qaO0ZA7KfXEkOA_image.png" size="76" width="1512" height="836" position="center" showCaption="false"}

But if you want to change a slack channel you can use in the selected channel `/archbee subscribe` or  `/archbee unsubscribe`

:::hint{type="info"}
You need to invite the Archbee Bot to your subscribed slack channel to receive events. (ex: /invite @Archbee)
:::



## How it works?

In the Slack channel you will get a feed with the following team events:

- invited new members
- when a document is shared via a Public Link
- a document is moved between Spaces or archived
- when a Space is made public.

You can also use the `/archbee` command to run a deep search on your Organization documents directly from Slack.
`An example: ``/archbee integrations`

Now you will receive a list of documents you can open directly from Slack.

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/4Ova5ZH-oKa-6j2rDCPQy_image.png" size="58" width="1306" height="498" position="center" showCaption="false"}

If you configured the integration between Archbee and Open AI:&#x20;

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/_qtIeoapxCkRnZm_sRE2I_image.png" size="38" width="538" height="262" position="center" showCaption="false"}

You can also use the `/archbee ai` or `/archbee ask` command to run a ML search on your Organization documents directly from Slack.
`An example: ``/archbee ask What is Docker?` or `/archbee ask What is Archbee?`



::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/82OdqAazGpV9FFT2xzwTW_image.png" size="80" width="1472" height="380" position="center" showCaption="false"}


[title] Github Gist
[path] INTEGRATIONS/Embed Examples/

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/m1UlgT1lu0tyu-UWZHXVg_archbee-github.png" size="60" width="1200" height="676" position="center" showCaption="false"}

### What is GitHub and Github Gist?

**GitHub** is a widely used source code hosting platform that enhances collaboration among developers, and when integrated with Archbee, it further streamlines coding projects.&#x20;

With its various features, GitHub fosters efficient communication and coordination, making teamwork more effective.

**Gists** are one feature of GitHub, which defines them as "a simple way to share snippets and pastes with others. Gists serve a wide variety of uses, from saving snippets of code, to creating reusable components for web pages.

Here is an exemple of Github Gist embed :&#x20;

::githubGist{url="https://gist.github.com/8d50bc3766ccc6aca121e445272b8b8b.js"}


[title] GUIDES
[path] /


[title] Importing OpenAPI / Swagger
[path] IMPORT & EXPORT/

## Why use OpenAPI import?

If your product is built for developers or your product has an API, you need great product documentation — otherwise, you can't cut through to developers.

Once you import your OpenAPI file, Archbee will read it and convert it to a beautiful UI and make it ready to be:

- **Shared publicly&#x20;**(on a custom domain)&#x20;
- **Internally** with your colleagues and teams

Once imported, you can sync, update and test your OpenAPI. See more details in the sections below.

## Rules and default settings

:::hint{type="info"}
Imported OpenAPI files can not be manually modified in Archbee.

To update and maintain your OpenAPI, check our [sync options](docId\:a0PIjt6FkIuPohZ5EbL_N)
:::

### Supported OpenAPI versions:

Archbee currently supports the following OpenAPI versions to be imported:

1. Version 2.0 and 2.0.XX
2. Version 3.0 and 3.0.XX
3. Version 3.1  and 3.1.XX

### Supported Auth methods

Archbee currently supports the following Auth methods:

1. [Basic Authentication](https://swagger.io/docs/specification/v3_0/authentication/basic-authentication/)
2. [API Keys](https://swagger.io/docs/specification/v3_0/authentication/api-keys/)
3. [Bearer Authentication](https://swagger.io/docs/specification/v3_0/authentication/bearer-authentication/)

If you import OpenAPI files with other Auth methods, they will import correctly, and the Auth method will be ignored.&#x20;

This means that you will get the whole Archbee OpenAPI experience, **except&#x20;**&#x74;he Try It! feature, if your endpoint requires an Auth that is not in the list above.

### Others

1. If you define a "**default**" parameters in your OpenAPI and you give it a value, the code sample and the parameter box will be automatically pre-populated with that value.

   This makes it easy for your users or customers to test your API with [Try It!](docId\:kyNT6RPtjV_gjU-EgB3VW) without having to update all the required parameters.

2. If you define an "**example**" parameter in your OpenAPI, the example value will be displayed on the left side just below the API parameter.

   This makes it easy for your users to identify what type of input is needed for that specific parameter.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/fCN8X5XLW-WFI9W1yvi3K_body-light.png)

## How does it work?

::::WorkflowBlock
:::WorkflowBlockItem
Import your OpenAPI file using the **Import Content**:

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/ZIM8Bq-VEqGvv_aHHjArO_import-content-light.png)

Or use **Import** option from each space:

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/0w0sHacVm8l8N_AFkF4yf_import-option-light.png)

Or sync your OpenAPI files directly from your [GitHub](docId\:Pm3HtF9iCnqzcNFRQjqL3) repository.

With Archbee's [Github Integration](docId\:Pm3HtF9iCnqzcNFRQjqL3) you can add\&sync your openAPI files directly from your repo.
:::

:::WorkflowBlockItem
Preview and [test](docId\:kyNT6RPtjV_gjU-EgB3VW) your imported OpenAPI

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/DsF_NDr8yoe62d13qJDP6_test-it-light.png)

Preview and test your newly imported OpenAPI with Archbee's [API TRY IT!](docId\:kyNT6RPtjV_gjU-EgB3VW) feature.
:::

:::WorkflowBlockItem
**Publish** or **share it** with your colleagues or customers!

Publish it to Preview or on a Custom Domain and make it available to your colleagues, teams, or users.&#x20;

If you would like to protect the content and only share it with a selected few, check out our [Public Access Controls](docId\:w7VFvxPMFYSPdg0xnzlK1) options for published portals.
:::

:::WorkflowBlockItem
Maintain, sync and configure it:

1. [Sync it manually](docId\:a0PIjt6FkIuPohZ5EbL_N)
2. [Sync automatically via API](docId\:a0PIjt6FkIuPohZ5EbL_N)
3. [Change sample code language](docId\:a0PIjt6FkIuPohZ5EbL_N)
:::
::::

## Here's a video of how it works

::embed[]{url="https://youtu.be/LQ3nEGCcdKg"}


[title] Code base as Shadow docs
[path] INTEGRATIONS/GitHub/

### What is Code Base as Shadow Docs

When you sync a GitHub repo to a Space in Archbee, you have the possibility of importing your Code base into that Space as Shadow Docs. Visit [Shadow docs](docId:1tOWnw572B2YbhvcxyZCm)  to learn more.

This means that our [AI system](docId:1tOWnw572B2YbhvcxyZCm) will index all the Code you configured to be synched and will train the [Ask AI assistant](docId:1tOWnw572B2YbhvcxyZCm) with the provided code base.

:::hint{type="info"}
Every document added to the Shadow Docs folder will **not be visible** on your published portal, neither for your customers or for your internal users. The code provided via Shadow Docs will just be there to train your AI and be able to answer questions about your code for your users.
:::



### How can I use it?

Here are 2 of the most common use cases:

1. Sync your app code base to an Archbee Space. Publish an internal(protected, not public) portal for your tech& non-tech teams. This portal, powered by our AI, will now be able to answer questions and even suggest how to perform different improvements, integrations, optimizations, etc. based on your code-base.
2. Sync your app code base to an Archbee Space. Publish a public portal for your users. Here your users will be able to get direct answers on how to use your App, APIs, SDK, Libraries, etc

### How to configure

:::::WorkflowBlock
:::WorkflowBlockItem
First you need to configure the GitHub integration [as explained here.](docId\:Pm3HtF9iCnqzcNFRQjqL3)

Then you need to [setup the repository](docId\:fsqc31Wq96DYg7y-vml_H)
:::

::::WorkflowBlockItem
In the archbee.yaml file you need to configure the `shadowDocs` parameter with the path of your code base that you want to sync with Archbee.

:::CodeblockTabs
archbee.yaml

```yaml
# This will include all code files from your repo
shadowDocs: 
  - "*"
```
:::

:::CodeblockTabs
archbee.yaml

```yaml
# This will include only the index.ts code file
shadowDocs: 
  - "init/index.ts"

# To also include documentation files from docs folder
root: docs
```
:::
::::

:::WorkflowBlockItem
This is how it will look after import

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/mckPJUmI_MTCWHf0G-bmo_github-shadow-light.png)
:::

:::WorkflowBlockItem
Make sure you have your **AI Addon** enabled in Organisation Settings
:::
:::::

:::hint{type="success"}
**Sum-up**

- All code files sync through Shadow Docs will not be made public at any time
- The whole purpose is to provide context to our AI so it can answer technical questions and make technical suggestions to your internal or public users
:::




[title] How to change the font
[path] GUIDES/

When you publish a collection you can control the way it looks by adding [Custom CSS](docId\:d4gup0qqxInIgDThftqCn) in the [Custom Code](docId\:CyShQt4kJc-PCmNlE3roN) section.

When you want to change the font that loads on the production website, you have 2 options:

## 1. Using Google Fonts&#x20;

::::WorkflowBlock
:::WorkflowBlockItem
Click on the gear icon ⚙️ to open the **Space Settings**
:::

:::WorkflowBlockItem
Look for the **Appearance** tab on the Space Settings modal
:::

:::WorkflowBlockItem
Scroll down to **Custom Fonts&#x20;**&#x61;nd toggle it on
:::

:::WorkflowBlockItem
Choose the desired font and the changes will be automatically saved
:::
::::

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/nbN4MagEC7RqaC0FLQa16_guides-gfonts-light.png)

## 2. Use Custom CSS to reference the font&#x20;

::::WorkflowBlock
:::WorkflowBlockItem
Click on the gear icon ⚙️ to open the **Space Settings**
:::

:::WorkflowBlockItem
Look for the **Custom Code** tab on the Space Settings modal
:::

:::WorkflowBlockItem
Add the font link in the **Include Headers** box

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/1T8J80RasE65zjsyGTPw3_guides-cssheading-light.png)

**Include Headers font example:**

```html
<link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300&display=swap" rel="stylesheet"/>
```
:::

:::WorkflowBlockItem
Add the CSS properties

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/XtWUUM0yHexmsaKz-039h_guides-cssfont-light.png)

```css
<style>
body {
    font-family: Hind Siliguri, sans-serif !important;
}
</style>
```
:::
::::


[title] MISC
[path] /


[title] How to change Archbee template
[path] GUIDES/

To change an Archbee template, you can follow these steps:

::::WorkflowBlock
:::WorkflowBlockItem
**Log in** to your Archbee account.
:::

:::WorkflowBlockItem
Click on the **Settings** icon ( ⚙️ )  from the left side of your space.
:::

:::WorkflowBlockItem
From the **Space Settings** page, click on the **Appearance** tab.
:::

:::WorkflowBlockItem
**Select the template** you want to use from the available options.
:::

:::WorkflowBlockItem
Your new template **will be automatically applied** to your documentation.&#x20;
:::
::::

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/Fi9lJPU46WM5TiuiZZIlb_guides-template-light.png "Archbee templates")


[title] How to copy the URL invite link from the team member page
[path] GUIDES/

In Archbee, there are two ways of inviting your team member to your Organization:

- **By adding the team member's email address. The users will receive an e-mail with the invitation link to Archbee.**



![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/-jxdF3WjIY5Obc8iV4c8q_image.png)

- **By copying the URL invite link from the team member page**

1. Add the team member's email address and press "Invite."
2. Once added, you can copy the invite link and send it to the user.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/bRAhnIDvmDGO6TtZi96KW_image.png)




[title] How to set up web analytics tracking
[path] GUIDES/

This feature allows for integration with many web analytics tools since they work by loading a JS snippet.

If you decide to use Google Analytics, here is what you need to do.

:::hint{type="danger"}
&#x20;Google Analytics 4 is the next-generation measurement solution, replacing Universal Analytics. On July 1, 2023, standard Universal Analytics properties stopped processing new hits. If you still rely on Universal Analytics, we recommend you use Google Analytics 4 going forward.
:::

:::::WorkflowBlock
:::WorkflowBlockItem
To add the Google Analytics tracking code to your documentation portal, you’ll need a piece of code known as the “**Global Site Tag**.”

You can find this in your Google Analytics admin dashboard. Locate the tracking code under **Admin -> Data Streams -> Web stream details**.
:::

:::WorkflowBlockItem
Copy the global site tag below into the **Custom JavaScript** field under **Space Settings -> Custom Code**.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/rwPtIGtKjQqfSmJ5MWIPU_guides-customjs-light.png "Globat site tag code")
:::

:::WorkflowBlockItem
Make sure you replace the `insert measurement ID` with your own ID.

```javascript
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-80B7MQZ06B"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '{insert measurment ID}');
</script>
```
:::

::::WorkflowBlockItem
After the code is added, click **Save** and publish to production.

:::hint{type="warning"}
For security reasons, custom code is only included on a custom domain.
:::
::::
:::::

::loom{url="https://www.loom.com/embed/4418fc0ea3324216a3bb653d96159b1a?sid=387f43f4-76e7-46ed-85d1-13b75c3461f2"}


[title] How to style Archbee templates with CSS
[path] GUIDES/

[Custom Code](docId\:CyShQt4kJc-PCmNlE3roN) allows users to style their template.

You can style any of the following HTML elements that have a class that starts with `ab-`:

:::BlockQuote
.ab-callout \{ }
.ab-changeloc \{ }
.ab-code-editor \{ }
.ab-minitasker \{ }
.ab-graphiql \{ }
.ab-horizontal-divider \{ }
.ab-jira \{ }
.ab-map \{ }
.ab-mermaid \{ }
.ab-openapi \{ }
.ab-vertical-split \{ }
.ab-vertical-split-item \{ }
.ab-video \{ }
.ab-checklist \{ }
.ab-blockquote \{ }
.ab-diagram \{ }
.ab-embed \{ }
.ab-file \{ }
.ab-iframe \{ }
.ab-html \{ }
.ab-image \{ }
.ab-ul-list \{ }
.ab-ol-list \{ }
.ab-list-item \{ }
.ab-list-item-child \{ }
.ab-table \{ }
.ab-space \{ }
.ab-collection \{ }
.ab-space-container \{ }
.ab-collection-container \{ }
.ab-top-navbar \{ }
.ab-search-input \{ }
.ab-public-search \{ }
.ab-space-content \{ }
.ab-collection-content \{ }
.ab-tree-navigation \{ }
.ab-tree-navigation-link \{ }
.ab-tree-navigation-link-inactive \{ }
.ab-doc-name \{ }
.ab-h1 \{ }
.ab-h2 \{ }
.ab-h3 \{ }
.ab-expandable-heading \{ }
.ab-link \{ }
.ab-link-dynamic \{ }
.ab-nav-right \{ }
.ab-nav-right-text \{ }
.ab-bold \{ }
.ab-code \{ }
.ab-paragraph \{ }
.ab-footer-container \{ }
:::

When adding the **CSS**, please use the `<style>` tags in the **Customs CSS** field, like in the example below:

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/IejgS2OzOMqCiBgEt4CrP_custom-css-light.png "Customm CSS section")


[title] Archbee Chrome extension guide
[path] MISC/

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/rsIyB0asTl6oQdsEYXJSm_chrome-light.png)

:::hint{type="warning"}
The extension only works with **Chrome ver. 109** (Jan 10, 2023) o&#x72;**&#x20;newer**. Make sure to [update Chrome](https://support.google.com/chrome/answer/95414?hl=en\&co=GENIE.Platform%3DDesktop).
:::

## How to install

::::WorkflowBlock
:::WorkflowBlockItem
### Install the extension from the [Chrome web store](https://chromewebstore.google.com/detail/archbee-create-step-by-st/mkngmhljihmalaidkiiibfneboamobog) ↗️
:::

:::WorkflowBlockItem
### Sign up/log in with your Archbee account ⬇️
:::
::::

The system will recognize if you are logged in and prompt you to use that account to continue.

:::hint{type="success"}
If you already don't have one, [create an account](https://app.archbee.com/signup) to proceed.
:::

## How to create your step-by-step guide

### Find your desired web page ⬇️

Navigate to the web page where you want to start the capture.

Open the extension and start capturing your workflow - navigate through the website and start doing the actions necessary to complete your guide

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/-2WRRT6Mx3sNZU1XzwgwW_capture-start-light.png "Start workflow capture")

### Capture your guide and review it ⬇️

For each click, the content on the page will be saved in your capture queue.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/B_sW3xHe343oB8RDatHSj_steps-light.png "Each click equals one step")

Once you are done capturing your guide, click the  ✔️ **Finish**  button to save your step-by-step documentation.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/W3agtmG0lBQoCBc33AH36_finish-light.png "Finish button")

You will be redirected to the **Workflow captures** page where you can review your content. You can find this page on the left-hand menu (bottom left) of your Archbee account.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/-r22OQvn7gCH27l8tF1I8_worflow-light.png "Workflow captures page")

### Pause and restart ⏸️ 🔄

If you want to pause or restart your guide at any point, click the preferred option at the bottom, next to the ✔️ **Finish** button.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/sFWtl7jMVNNvrfwBSTAeb_pause-restart-light.png "Pause and restart buttons")

### Switch to dark mode, yo!

Use the dark/light mode switcher for the best experience:

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/A22ZJ6DUsLbgeouhRzLcr_extension-dark-mode.gif" size="60" width="360" height="859" position="center" caption="Dark mode" showCaption="true"}

### Enjoy the Archbee capture tool! 🚀

::::LinkArray
:::LinkArrayItem
:FontAwesome[]{icon="fa-solid fa-inbox"}**&#x20;  Got some feedback?  ⬇️**

[support@archbee.com](mailto\:support@archbee.com)
:::
::::

## Convert to Markdown ✅

With the newest update to our extension, we allow converting any web page (or a selection from a web page) to Markdown.

### How to convert

When you add the extension, and log in to your account, you will have 2 options:

1. Capture workflow
2. Convert to Markdown

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/tmZn4Lk71qVrfkPIX_hjo_extension-convert-to-markdown.png" size="60" width="360" height="859" position="center" caption="Convert to Markdown" showCaption="true"}

If you want to convert to Markdown, you can choose to **+Add page or selection**. When you are ready, click the **Import all in Archbee** button at the bottom.

Now, check your **Workflow captures** folder and continue working on your content.

::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/T3GtXeUYRjsEGvV_KZSRO_ext-import-to-archbee.png" size="60" width="360" height="859" position="center" caption="Import button" showCaption="true"}

:::hint{type="info"}
**TIP 😉**

For large pages, split them into smaller section for a smoother import process.
:::


[title] Archbee Concepts
[path] MISC/

# Organization

An organization is similar to a company.

**Imagine** you are a business owner with 2 businesses. Normally you would have to create 2 accounts with different email addresses and login logout to see the content you want at that moment. With Organizations you have a single account and the ability to switch between your Organizations (companies).

**Another scenario**

- &#x20;You are employed by a company and also doing consultancy. Normally you would have to create 2 accounts, and login logout to see the content you want at the moment. With Organizations you have single account and the ability to switch between your Organizations (companies).

**Another scenario**

- &#x20;You are employed by a company which has a customer who also is present in Archbee with their own company. Normally you would need two accounts, but with Organizations, you can be in both and not have to re-login.

Organizations are also a way for a single account (email address) to be in multiple companies.

# User groups

User groups are a way of grouping the users departments in a Organizations.

User groups are similar to departments.

For example you might want an Engineers group, Marketing group, and Management Group. You can do this with **User Groups.&#x20;**

You can create custom User groups and assign users to them.

You can also use User Groups to assign access on Spaces, so they have different views of your Organizations.

# Spaces

Spaces are the main grouping of documents.

Each Space has a document tree that can be arranged in any way you wish, it's very flexible.

Spaces can be private to your Organizations OR public.

When it's public you can share it with

- an Archbee link. Example: `https://archbee.io/public/iVK8qEuN_JAsH0aA37yR6`
- on your own subdomain. Example: [https://docs.archbee.io](https://www.archbee.com/)
- **HINT**: the above links are the same space!

Public Spaces can also be protected with a password or with guest accounts (can be created for free, and are not part of your Organizations).

# Access control

Access control allows you to define policies that give access (read and/or write) to certain user groups or to certain individual users.

# Domain slots

A domain or subdomain slot lets you attach a public space to your subdomain (example: docs.yourcompany.com), and we host it for you generating SSL certificates and providing the same SLA as main app.

[title] Limits
[path] MISC/

Archbee has the following limits:

- any doc can have **500** blocks at most;
- any doc can have **1MB** in size at most (does not include images and file uploads);
- any space can have **1000** docs at most.

These limitations might seem too harsh. However, when it comes to documents and document hierarchies, any online documentation platform is as good as its limits. We might gradually increase these limits in the future, but please do not expect any spectacular increase.

- Good limits allow for a **better readability&#x20;**&#x62;y enforcing good doc organization patterns;
- Good limits enable **high performance and stability** in your workspace and your generated doc sites;
- Good limits allow for **better protection against bad actors** trying to break the system by overloading it.

**Upload limits:**

- **8 MB** limit for file upload;
- **8 MB** limit for image upload

**Import limits**

- **1 MB** for Markdown files
- **2 MB&#x20;**&#x66;or Word docx
- **3 MB** for OpenAPI files
- **3 MB** for Postman collections
- **20 MB** for zip files: notion zip file import, gitbook zip file import, markdown zip file import

**Download limits**

- &#x20;**100** images for PDF export


[title] How to transfer super admin privileges to another user
[path] Q&A /

::::WorkflowBlock
:::WorkflowBlockItem
Go to Account Settings -> Organizations
:::

:::WorkflowBlockItem
Find the user name in the User's list and click on the "Swap super admin button" from the  Actions grid.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/UMQB5P5ZRKaybwKlNFllP_image.png)
:::

:::WorkflowBlockItem
This operation is only available to the current Super Admin user.
:::
::::


[title] Why the landing page template isn't publishing to production
[path] Q&A /

- The landing page template will not load on the domains with a URL path configured in the Space settings. You should remove Step 5 from your configuration(URL path) and re-publish your changes.
- Review the Custom Code from your space(if applicable) - check if the custom code tags are correct in `Space Settings -> Custom Code.`


[title] Why is my published space blank?
[path] Q&A /

You created your Space and docs, and you published them to your Custom Domain. You go to your published docs but the page you are viewing is blank.&#x20;

One reason for this may be that you used custom CSS or included Headers. How to fix:

- confirm if the Custom Code is the issue - delete all custom code and headers from Space Settings / Custom Code tab
- republish and check if your site is visible
- if the site is visible, the issue is in your custom code
- if the site is not visible, contact 


[title] Why can't i change the domain?
[path] Q&A /

You have a custom domain set for a Space and you want to change it. It will not work just typing a new domain over the old one and press `SET`. First you need to delete the old domain, save the state, and then add a new domain. Follow the steps below to change a custom domain for a Space:

- go to Space Settings / Custom Domain
- remove the old domain (Step 4) and  optional URL path (Step 5) and click `SET`
- add the new custom domain + optional URL path (Step 5) and click `SET`




[title] Glossary
[path] MISC/

:::hint{type="warning"}
**Glossary: Under Construction 🚧**

Our glossary is a work in progress, but we're adding new definitions all the time. Stay tuned for more!
:::

## A&#x20;

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
**Addon**
:::

:::VerticalSplitItem
An additional feature or module that can be integrated into Archbee to enhance its capabilities, such as the AI Addon for advanced AI functionalities.
:::
::::

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
[API endpoints](docId\:JwrgiyTgiu8c_7ml3Hna8)&#x20;
:::

:::VerticalSplitItem
Document your API endpoints with clarity, providing essential details for developers and users alike.
:::
::::



***

## B

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
[Blocks](docId:6B0VTQTVUnMP93e-SZQ2p)&#x20;
:::

:::VerticalSplitItem
Building blocks for your docs. Think of them as Legos for your content. You can use them to create headings, tables, images, code snippets, and more. There are basic, media, developer, and embedded blocks to choose from.
:::
::::

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
****[Button](docId\:JDAXu7IBxBA1jW3KHOrOp)&#x20;
:::

:::VerticalSplitItem
Interactive buttons that link to other internal or external pages, guiding users through your documentation or your content outside the documentation.
:::
::::



***

## C

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
[Callout](docId\:c-sJUb-iR1V0j8c_BKSmC)&#x20;
:::

:::VerticalSplitItem
Highlight important notes, tips, or warnings with visually distinct callouts to draw attention to key information.
:::
::::

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
[Changelog Block](docId\:s9KuKIUE8z2e4Y1X4V1gB)&#x20;
:::

:::VerticalSplitItem
Keep your users informed with a changelog block that documents updates and changes in your project.
:::
::::

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
[Code Editor](docId:_DmwEwV5w9YcnVMlcUI53)&#x20;
:::

:::VerticalSplitItem
A multi-language code editor for showcasing  code snippets, perfect for developers.
:::
::::

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
[Code drawers](docId:9rc9lvIrREZCwra8j4lit)&#x20;
:::

:::VerticalSplitItem
Organize your code snippets in drawers and show them side-by-side with your conent, keeping your documentation tidy and user-friendly.
:::
::::

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
[Content snippets](docId:1OcdY_lvhrvPzF35HwgHu)&#x20;
:::

:::VerticalSplitItem
Create reusable blocks of content that can be inserted across multiple documents, ensuring consistency and saving time.
:::
::::

***

## D

***

## E

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
[Editor](docId\:GZKfIYLzU2JXuPcXqo7uq)&#x20;
:::

:::VerticalSplitItem
Your go-to place for creating and editing content. It's like a digital workspace where you can use shortcuts, add different types of content blocks, and format your text using Markdown or the WYSIWYG menu. You can even embed content from other tools and link to other documents. Think of it as your one-stop shop for all things content creation!
:::
::::

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
[Embedded Blocks](docId\:ejEgS_viSAOk25-lby1x0)&#x20;
:::

:::VerticalSplitItem
Integrate content from popular tools like Loom, Figma, and Miro directly into your documentation for a cohesive experience.
:::
::::

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
[Expandable Headings](docId\:aJpn6HeMcswfb9RR4hDHZ)&#x20;
:::

:::VerticalSplitItem
Sections that can be expanded or collapsed, making it easy to navigate complex topics.
:::
::::

***

## F

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
[File](docId\:t1Ky085LzcMKkp3H9EBA_)&#x20;
:::

:::VerticalSplitItem
Upload and link files directly within your documentation, making resources easily accessible to users.
:::
::::

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
[File Manager](docId\:xgoBbCfl4DcvFc1HFK619)&#x20;
:::

:::VerticalSplitItem
Organize and manage all your files in one central location, making it easy to upload, access, and link resources within your documentation.
:::
::::

***

## G

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
[GraphQL](docId\:HcRIpOFvmBp0Pr3Xj8Mhj)&#x20;
:::

:::VerticalSplitItem
Document GraphQL APIs effectively, providing users with the information they need to interact with your services.
:::
::::



***

## H

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
[Headings](docId\:CH1EclxGmlPa-XaZAwY6u)&#x20;
:::

:::VerticalSplitItem
Used to create titles and subtitles for organizing content hierarchically.
:::
::::

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
****[Horizontal Divider](docId\:YUthnHc9mNprZRTwXPB4L)&#x20;
:::

:::VerticalSplitItem
Horizontal dividers helps you to create visual breaks between sections, enhancing the flow of your documentation.
:::
::::

***

## I

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
[Image](docId\:MfIBZf9K-Ya8z3ldzQ37V)&#x20;
:::

:::VerticalSplitItem
Enrich your documentation with images, adding visual context and engagement to your content
:::
::::

***

## J

***

## K

***

## L

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
[Link Grid](docId\:Z_VgvWiFBolvUazqD6vWM)&#x20;
:::

:::VerticalSplitItem
Create dynamic links to other documents or external resources, facilitating easy navigation within your content.
:::
::::

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
[Lists](docId\:D02_VQ5GNbt-SUeqoTQ3g)&#x20;
:::

:::VerticalSplitItem
Utilize ordered and unordered lists to break down information into digestible points, improving readability.
:::
::::



***

## M

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
[Map](docId:_6bL0kZA7bB9RgcNylSWS)&#x20;
:::

:::VerticalSplitItem
Integrate maps to display location-based information, enhancing the relevance of your content.
:::
::::

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
[Mermaid diagrams](docId\:fRhB6aopNdkyYjeQDeJLG)&#x20;
:::

:::VerticalSplitItem
Create flowcharts and diagrams using the Mermaid syntax, adding visual aids to your documentation.
:::
::::

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
[Minitaskers](docId\:VYT5x0nyqUpzGwz906R56)&#x20;
:::

:::VerticalSplitItem
Organize tasks into manageable subtasks with Minitaskers, inspired by Trello, to keep your projects on track.
:::
::::



***

## N

***

## O

***

## P

***

## Q

***

## R

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
**Reusables**
:::

:::VerticalSplitItem
Create and manage reusable content blocks that can be inserted into multiple documents, ensuring consistency and saving time across your documentation.
:::
::::

***

## S

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
[Spaces](docId\:uTknpnOKl1OY-VxI5I8jo)&#x20;
:::

:::VerticalSplitItem
Containers for documents organized by teams or projects. Each account has a personal space, and organizations can create custom ones with access control.
:::
::::

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
[Space group](docId:3WvwJduDFhTbA4wz9vJch)&#x20;
:::

:::VerticalSplitItem
Think of them as folders for your Spaces. You start with one called "Spaces." Make more folders if you need them. You can add, rename, or delete folders (but only if they're empty). To put a Space in a folder, just drag it there, use the move action, or create it in the folder.
:::
::::

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
[Space Links](docId\:CFtSj1sEfjJUG3ZsDlvQq)&#x20;
:::

:::VerticalSplitItem
Connect multiple published Spaces for easy navigation between docs (e.g., User Guides, API docs). Add links in Space settings, label them, and publish. Changes to links automatically update across connected Spaces.&#x20;
:::
::::

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
[Swagger Block](docId\:BKf0SkSgsYaIMm6EK1CPb)&#x20;
:::

:::VerticalSplitItem
Seamlessly integrate OpenAPI specifications to enhance your API documentation.
:::
::::



***

## T

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
[Table](docId\:XISmEqbPiMGonZxHooHwZ)&#x20;
:::

:::VerticalSplitItem
Use table block to present data in a clear and organized manner, perfect for comparisons and structured information.
:::
::::

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
[Tabs](docId\:nIaGbRRi7rJFXXCkkHd1c)&#x20;
:::

:::VerticalSplitItem
Organize content into multiple tabs for a clean and efficient navigation experience, allowing users to switch between topics easily.
:::
::::

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
[TeX Equation](docId\:W4KY8zdZZGYouNMTXuLiT)&#x20;
:::

:::VerticalSplitItem
Render complex mathematical equations using TeX, making your documentation suitable for technical subjects.
:::
::::

***

## U

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
**User Groups**
:::

:::VerticalSplitItem
Are like departments for your users. You can create different groups (like Engineers, Marketing, or Management) and assign users to them. This helps you organize your users and give them different access levels to different parts of your organization.
:::
::::



***

## V

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
[Vertical Split](docId\:VTOI7mkPJHKCQCC4xOAty)&#x20;
:::

:::VerticalSplitItem
Showcase content side-by-side with the vertical split block, ideal for comparisons or related information.
:::
::::

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
[Video](docId\:B2Ip7DJZj3gHcRxc42rIL)&#x20;
:::

:::VerticalSplitItem
Embed videos from [Youtube](https://www.youtube.com) and [Loom](docId:3m8IIfx1QCQmO4ngqb0IJ) platforms to provide dynamic content and tutorials directly within your documentation.
:::
::::

***

## W

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
[Workflow](docId\:tNgOuV2y9_9uT1vnWHqXJ)&#x20;
:::

:::VerticalSplitItem
Visualize processes and workflows with this block, helping users understand steps and sequences clearly.
:::
::::

::::VerticalSplit{layout="left"}
:::VerticalSplitItem
[WYSIWYG Menu](docId\:WBvFMF8cfYoJgkqNrJVIG)&#x20;
:::

:::VerticalSplitItem
A user-friendly "What You See Is What You Get" menu that allows you to format your content visually, making document creation intuitive and straightforward.
:::
::::

***

## X

***

## Y

***

## Z



Here’s a branded list of additional features available in Archbee, complete with descriptions:

### Archbee Reusables

- **Reusables**: Create and manage reusable content blocks that can be inserted into multiple documents, ensuring consistency and saving time across your documentation.

### Archbee File Manager

- **File Manager**: Organize and manage all your files in one central location, making it easy to upload, access, and link resources within your documentation.

### Archbee Markdown

- **Markdown**: Utilize Markdown syntax to format your text quickly and efficiently, allowing for a streamlined writing experience while maintaining flexibility in document design.

### Archbee WYSIWYG Menu

- **WYSIWYG Menu**: Experience a user-friendly "What You See Is What You Get" editor that allows you to format your content visually, making document creation intuitive and straightforward.

### Archbee Emojis

- **Emojis**: Enhance your documentation with emojis to add personality and visual interest, making your content more engaging and relatable to users.

### Archbee Drag & Drop

- **Drag & Drop**: Easily rearrange blocks and content within your documents using a simple drag-and-drop interface, allowing for quick adjustments and organization.

### Archbee Variables

- **Variables**: Use variables to insert dynamic content that can change based on context, making your documentation adaptable and personalized for different users.

### Archbee Space-Specific Variables

- **Space-Specific Variables**: Define variables that are unique to specific spaces, allowing for tailored content that meets the needs of different projects or teams.

### Archbee Glossary

- **Glossary**: Create a glossary of terms to provide definitions and explanations for specialized vocabulary, enhancing user understanding and accessibility.

### Archbee Docs Tagging

- **Docs Tagging**: Organize your documents with tags for easy categorization and retrieval, improving navigation and searchability within your documentation.

### Archbee Display Rules

- **Display Rules**: Set conditions for when specific content should be shown or hidden based on user roles or other criteria, allowing for a customized user experience.

### Archbee Find & Replace

- **Find & Replace**: Quickly locate and replace text throughout your documentation, streamlining the editing process and ensuring consistency.

### Archbee Notifications

- **Notifications**: Stay informed with real-time notifications about updates, comments, and changes in your documentation, keeping you connected to your team.

### Archbee Notification Center

- **Notification Center**: Access a centralized hub for all your notifications, allowing you to manage and review updates efficiently.

### Archbee Comments

- **Comments**: Collaborate with your team by adding comments directly within documents, facilitating discussions and feedback on specific content.

### Archbee Templates

- **Templates**: Utilize pre-designed templates to kickstart your documentation projects, ensuring a consistent look and feel across your content.

### Archbee Category

- **Category**: Organize your documents into categories for better structure and easier navigation, helping users find relevant information quickly.

### Archbee Document History

- **Document History**: Track changes and revisions made to your documents over time, allowing you to revert to previous versions if needed.

### Archbee Review System

- **Review System**: Implement a structured review process for your documents, ensuring quality and accuracy before publication.

### Archbee Verify Documents

- **Verify Documents**: Ensure the integrity and accuracy of your documentation by verifying content against established standards or guidelines.

### Archbee Hidden Docs

- **Hidden Docs**: Keep certain documents private or hidden from users while still allowing them to be indexed for search purposes, maintaining confidentiality.

These features empower you to create, manage, and collaborate on documentation effectively, enhancing the overall user experience within Archbee.

[title] Subprocessors
[path] MISC/

Working with third-party providers doesn’t mean stepping away from accountability. Even when your information is handled by our vendors, we remain fully responsible for its protection. Every vendor is vetted and must sign binding agreements that tightly control how Users’ Personal Information is processed, in line with our Privacy Statement ([https://www.archbee.com/privacy-policy)](https://www.archbee.com/privacy-policy).

| Name             | Location | Description               |
| ---------------- | -------- | ------------------------- |
| Microsoft Azure  | US, EU   | Hosting & infrastructure  |
| Amazon AWS       | US, EU   | Hosting & infrastructure  |
| Google Cloud     | US       | Hosting & infrastructure  |
| Cloudflare       | Global   | CDN, Security             |
| Stripe           | US       | Subscriptions, payments   |
| Google Workspace | US       | Internal tools            |
| HubSpot          | US, EU   | Internal tools            |
| Slack            | US       | Internal tools            |
| Zoom             | US       | Internal tools            |
| Churnkey         | US       | Subscriptions             |
| SendGrid         | US       | Email infrastructure      |
| Mailgun          | US       | Email infrastructure      |
| Sentry           | US       | Error management          |
| Customer.io      | US       | Email infrastructure      |
| Airtable         | US       | Internal tools            |
| Iframely         | US       | Internal tools            |
| Google Analytics | US       | Website analytics         |
| PostHog          | US       | Website and app analytics |
| Google Fonts     | US       | Font CDN                  |
| Dropbox Sign     | US       | Signatures                |


[title] SignUp - Join your organization
[path] GUIDES/

## Overview

When you go through the registration process to Archbee, and you enter your email domain, our system will recognize if an organization with the same domain already exists and allow you to join your organization.

What we do here is detect if an organization associated with the user's email domain is waiting for their participation. Users can request to join the organization, receive approval from an admin, and start contributing to the team's documentation right away.&#x20;

Alternatively, you can choose the **I want to test Archbee myself** option to create your own organization and explore Archbee at your own pace.

## How it works

- **Email domain detection**: When you sign up using your email address, our system automatically detects your email domain:

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/PsRf2MbSmEMB-59IcZ-mS_discoveraccount-light.png "Email domain detection")

- **Organization detection**: With the email domain, we can identify if an organization  associated with said domain already exists in our system. If your email domain matches an existing org/s, they'll appear under **Available organizations**.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/oPYosKw7qGm3FiWhvp1ck_available-orgs-light.png "Available organizations")

- **Request to join**: Once detected, you have the option to request to join the organization. Your organization's administrator will receive a notification to approve your request.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/KdjDpBgZBBGJmKOePk_vP_reqsent-light.png "Request to join organization")

- **Admin approval**: The organization’s administrator will review your request. Once they approve it, you will be a part of the organization.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/nRjKqv4qad7VliSxTaeF__accept-light.png "Admin approval")

- **Contribute to  your team’s documentation**: After joining the organization, you can start contributing to your team’s documentation and collaborate effectively with your colleagues right away.


[title] How to show the full title in Portal tree
[path] GUIDES/

:::hint{type="success"}
Make your docs easier to navigate by displaying **full article titles** in the left-side navigation (Portal Tree).
:::

### 📍 Where to Find It

1. Go to **Space Settings**
2. Click on **Appearance**
3. Find the option **"Show Full Title in Portal Tree"**
4. Toggle it **on**

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/7RJkKQI7mvHvXabNY5hmY_image.png)

### 💡 Why Use It?

By default, long titles in the portal tree may be truncated. Enabling this option ensures your readers see the **entire document title**, improving clarity and navigation—especially helpful for technical or detailed documentation.

:::hint{type="danger"}
This will avoid using custom CSS for this configuration, you just need toggle the option on
:::


[title] Insert copyright, registered, and trademark symbols
[path] GUIDES/

You can add **©**, **®**, and **™** symbols using keyboard shortcuts. It works for both Windows and macOS.

Insert copyright and trademark symbols for **Windows**:

- To insert the **Copyright (©)** symbol, press `Ctrl`+`Alt`+`C`
- To insert the **Trademark (™)** symbol, press `Ctrl`+`Alt`+`T`
- To insert the **Registered Trademark (®)** symbol, press `Ctrl`+`Alt`+`R`

Here's how to type copyright, registered, and trademark symbols in **macOS**:

- **Copyright (©)**: `Option` + `G`
- **Trademark (™)**: `Option` + `2` (or `Option` + `Shift` + `2`)
- **Registered Trademark(®)**: `Option` + `R`

***

::::VerticalSplit
:::VerticalSplitItem
You can also add inline emojis using the Archbee shortcuts `:` + `copyright` .

This will open a pop-up where you can search for emojis. Next you can type the keywords: **copyright** **©️**, **registered ®️**, and **trademark ™️**.
:::

:::VerticalSplitItem
![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/DCKjplVvH6qeNZF0XqXrD_guides-copy-light.png)
:::
::::


[title] Search Shortcuts and Operators
[path] MISC/

Archbee Search supports multiple types of operators and commands.&#x20;

Accepted operators:

- `+` and `- `
- `AND` and `OR` (`&` and `|`)&#x20;

:::hint{type="info"}
You can use combinations of operators in a search.&#x20;

Ex: `'custom event' & 'data' - handler`
:::

### Example list of search using operators:

:::::WorkflowBlock
::::WorkflowBlockItem
:::BlockQuote
'supernovae stars' -crab
:::

Use this type of command to show all documents containing `supernovae stars` and not containing `crab`
::::

::::WorkflowBlockItem
:::BlockQuote
'sad cat' or 'fat rat"'
:::

Use this type of command to show all documents containing `sad cat` or `fat rat`
::::

::::WorkflowBlockItem
:::BlockQuote
'signal' -'segmentation fault'
:::

Use this type of command to show all documents containing `signal` and not containing `segmentation fault`
::::

::::WorkflowBlockItem
:::BlockQuote
'custom event' & 'data' -handler
:::

Use this type of command to show all documents containing `custom event` and `data` but not containing `handler`
::::
:::::




[title] CloudPrem
[path] MISC/

CloudPrem is a single-tenant deployment of Archbee that runs entirely inside an AWS account you own and control. Your documentation, your database, your files, and your backups all live within your cloud boundary. Archbee operates the application for you, but your data stays in your account.

This model is sometimes called Bring Your Own Cloud (BYOC): you get the full Archbee product as a managed service, with the data residency, isolation, and compliance posture of running it in your own infrastructure.

## What CloudPrem is

- **Architecture**. A single-tenant, dedicated deployment ensuring complete environment isolation.
- **Infrastructure**. Hosted within your own AWS account in a region of your choosing.
- **Data Residency**. All primary data, including documents, databases, and backups, remains inside your cloud boundary.
- **Operations**. Fully managed by Archbee DevOps to ensure system health, updates, and recovery.

Because the deployment lives in your account, you retain full visibility and control over the underlying resources, while Archbee handles the operational burden of running the product.

## How we deploy

Archbee CloudPrem is provisioned as code using the AWS Cloud Development Kit (CDK). Everything - networking, database, content delivery, compute, and the application itself - is defined in versioned infrastructure templates and deployed into your AWS account. There is no manual, click-through setup.

The deployment is organized into a set of coordinated stacks:

- **Networking**. An isolated VPC spread across up to three Availability Zones, private subnets, security groups, and a load balancer.
- **Database.&#x20;**&#x41;mazon Aurora Serverless v2 (single writer configuration) and Amazon ElastiCache for Redis, in private subnets.
- **CDN.&#x20;**&#x41;mazon S3 object storage and an Amazon CloudFront distribution.
- **Compute.&#x20;**&#x54;he Amazon ECS cluster (AWS Fargate) that runs the application.
- **Main.&#x20;**&#x54;he Archbee application services, load-balancer routing, secrets, and logging.

## Releasing new versions

Archbee ships application updates from external private runners (using pnpm run build and CDK deploy), which authenticate into your AWS subaccount to update ECR and CDK targets. Rollouts are health-checked: new tasks must pass an application health check before old tasks are retired, so in normal operation deploys complete without downtime.

The application runs as three independently managed service types on AWS Fargate:

- **app** - the Next.js frontend
- **api** - the Express backend
- **worker** - background jobs (not internet-facing)

Application traffic reaches the services over HTTPS, terminated at an Application Load Balancer with an ACM-managed TLS certificate, and CloudFront sits in front of the load balancer for content delivery.

## Release cadence

Archbee delivers updates to your CloudPrem deployment on a regular weekly cadence, keeping the application current with new features, fixes, and dependency updates. Archbee manages the release process so you don’t have to operate it yourself.

When a critical fix or security patch is required, Archbee ships it as soon as it is ready, outside the normal weekly window. The principle is simple: routine improvements roll out weekly; urgent fixes arrive immediately.

## What Archbee DevOps does

The Archbee DevOps team manages the application lifecycle on your behalf by:

- **Lifecycle Management.** Handling all version upgrades, dependency updates, and security patches.
- **SLA Commitment.** Providing guaranteed service availability as defined in your service agreement.
- **Incident Response.** Managing comprehensive backup, restore, and failover procedures.

You own the AWS account and its guardrails; Archbee owns the application running inside it.

## Access model

Archbee operates on a least-privilege, no-standing-access basis.

- Archbee DevOps has **no standing access&#x20;**&#x74;o your application data, your application logs, or your database. There is no always-on operator path into your data.
- When an investigation requires access, Archbee requests it. Access is granted only after you explicitly approve it.
- Granted access is time-bound and audited - it expires automatically, and the activity is recorded.

The controlled path for any database-level work is a bastion host inside your VPC. Logs are routed directly to AWS CloudWatch; inspecting logs does not use the VPC bastion host but requires approved access to the AWS Console or CloudWatch APIs. Every database-specific access therefore flows through a single, auditable, approval-gated channel that you control.

## Disaster recovery

Archbee CloudPrem combines AWS-native resilience - the inherent durability and failover properties of the managed services it runs on (Aurora, S3, ElastiCache, ECS Fargate) - with Archbee’s operational backup and recovery procedures. Some of the protections below are built into the AWS services themselves; others are operational commitments Archbee configures and runs for your deployment.

A few terms used below:

- **Region**. a geographic location of AWS (for example, the eastern United States).
- **Availability Zone (AZ).** one of several independent data centers inside a region.
- **Backup**. a saved copy of data that can be restored later.

## How your data is protected

- **Multi-AZ database storage durability.** Amazon Aurora automatically maintains six copies of your data across three Availability Zones, independent of how many database instances are running. This storage-layer redundancy means the loss of an individual disk or AZ does not lose data.
- **Automatic failover.** Archbee relies on Aurora’s native storage-layer redundancy for data durability. For compute availability, Aurora recreates the writer instance in the event of failure; compute-level failover expectations are defined in your service agreement.
- **Continuous, point-in-time backups.** Aurora continuously backs up the cluster volume and supports point-in-time restore within its configured retention window, which lets us undo an accidental change or deletion. Archbee configures the retention window for your production deployment; confirm the exact number of days against your service agreement.
- **Cross-region backup copies (operational commitment).** This is an optional operational configuration. Where contracted, Archbee configures the replication of backups to a second, geographically separate region so your data can be recovered if an entire region becomes unavailable.
- **Long-term archive (operational commitment).** Where contracted, Archbee takes a periodic full backup retained for long-term archival. The frequency and retention period are defined in your service agreement.
- **Durable file storage.** Uploaded files, images, diagrams, document revisions, and exports are stored in Amazon S3, which is designed for 99.999999999% (eleven 9s) of object durability by keeping multiple redundant copies across Availability Zones automatically. Content is delivered globally through Amazon CloudFront.
- **Resilient cache.** In production, the Redis cache runs in Multi-AZ mode with a replica and automatic failover, so a single node failure does not interrupt service.
- **Self-healing compute.** Application tasks run on AWS Fargate, spread across multiple Availability Zones behind load-balancer health checks. If a task becomes unhealthy or an AZ has a problem, the load balancer removes the affected task from rotation and ECS automatically replaces it - no manual intervention required.
- **Document version history.** Each time a document is saved, earlier versions are retained in dedicated, durable storage, so previous copies of a document can be recovered through Archbee’s restore process.
- **Encryption everywhere.** All data is encrypted in transit (TLS 1.2 or higher) and at rest. S3 objects are encrypted with a customer-managed AWS KMS key with automatic annual key rotation, and the cache is encrypted at rest and in transit.

## AI Inference

Archbee's AI features run on foundation models hosted in Amazon Bedrock, invoked within your own AWS account and region. Prompts, document content, and model responses never leave your cloud boundary - there is no call to any external AI provider and no data is used for model training. Inference traffic stays inside your VPC over AWS's private network, governed by the same KMS encryption and least-privilege access controls as the rest of your deployment.

## Recovery scenarios

| ### Situation                                          | ### How Archbee recovers                                                                                                                   |   |
| ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ | - |
| **Data changed or deleted by mistake**                 | Restore the database to a moment just before it happened, within the configured point-in-time retention window.                            |   |
| **A whole region goes down**                           | Where cross-region backups are configured, rebuild the database from the copy kept in the second region and bring the service back online. |   |
| **A file version is lost or overwritten**              | Restore the previous version through Archbee’s document version-history restore process.                                                   |   |
| **An application instance or Availability Zone fails** | The load balancer routes around the failure and ECS Fargate automatically launches a healthy replacement across AZs.                       |   |

## Shared responsibility

CloudPrem is a partnership. Responsibilities are clearly split:

| ### You own                                   | ### Archbee owns                                     |
| --------------------------------------------- | ---------------------------------------------------- |
| The AWS account and its guardrails            | The Archbee application and its updates              |
| Approving and scoping any access requests     | Deploys and the weekly / out-of-band release process |
| Your data, residency, and compliance boundary | The uptime SLA (per your agreement)                  |
|                                               | Disaster recovery (backups, restore, failover)       |

In short: you control the cloud and the data; Archbee runs the product inside it and is accountable for keeping it available and recoverable.

[title] How can i arrange and group my imported OpenAPI docs
[path] Q&A /

:::hint{type="info"}
Imported OpenAPI file will be added to a separate folder inside a space. That folder(and the docs below) can not be modified or rearranged
:::

See how to import an OpenAPI file [here](docId\:C3Jz_iuwGeAEynhRJ5D-7)

**How to organise your methods and docs in an imported OpenAPI file:**

:::hint{type="info"}
Our internal structure keeps track of `tags` from your OpenAPI file and create a folder structure based on them
:::

::::WorkflowBlock
:::WorkflowBlockItem
Edit your OpenAPI file and tag all your desired folders

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/ErNG4NtfNMcB1SQgY6OqC_image-may-10-2023-05-23-51-2724-pm.png)
:::

:::WorkflowBlockItem
Import your OpenAPI file as shown [here](docId\:C3Jz_iuwGeAEynhRJ5D-7)
:::

:::WorkflowBlockItem
Check your imported OpenAPI in the editor



::Image[]{src="https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/OJMNUEUY_ZD9VfY-OUy26_image.png" size="50" width="592" height="650" position="center" showCaption="false"}
:::
::::




[title] Untitled
[path] SOCIAL LINKS /


[title] Create a docs website
[path] GUIDES/

Documentation comes in many shapes and forms. You might already have some resources or need to start from scratch. Let's cover how to add content with Archbee.

## Write in Archbee

Once you create a new document, you can start adding content using either **markdown shortcuts&#x20;**&#x6F;r any of the **30+ custom blocks**.

The custom blocks help you format the content as you need. To open them, type forward slash `/` in the editor and go through the options.

The blocks are grouped under **Basic**, **Media**, **Developer**, **Embed**, and **Content Reuse**.

For example, if you want to dynamically link to other documents, type `@` and the document title. This will connect to the document id. If you change the title or the position of the document, the link will always point to it.

Another example is calling out the block name. Hit `/` and type the block's name, e.g., `/verticalsplit`, which will filter out the block you want to use.

The third option is to use parentheses, and the name of the block - e.g. **(api)** - will add the API endpoint block.

### Copy-paste

The old-school copy-paste brothers. But why cover this one? Since Archbee's editor supports Markdown, if you want to paste in this format, you might get the following message:

:::BlockQuote
We have detected some Markdown content in your clipboard. Are you trying to paste Markdown?
:::

If you click the cancel button, the content will not be rendered, and if you click OK in the dialog box, we will convert the Markdown to Archbee's blocks.

So you have a code example that will be rendered as a code editor block in Archbee.

### Import Markdown or Word files

Copy-pasting works just fine, but if you have Markdown or Word files, why not import them into a Space?

Before importing any content, make sure you click on the Space where you want to import the files. You just clicked on the type of file you have and saved minutes of copy-pasting from other sources.

### Import OpenAPI/Swagger files or Postman collections

When it comes to documenting APIs, you have multiple options.

Let's say you are using the OpenAPI (previously Swagger) standard. This allows for easy import and sync of the files.

Once imported to Archbee, the content will be rendered in a 3-column layout that allows for easy-to-manage documentation.

### Sync a GitHub repo

It happens that the documentation is written in a GitHub repository, and you can continue writing in GitHub and sync the repo with an Archbee Space. The benefit is that you can publish that Space to your custom domain and add other Spaces with additional information like API references.

## Set up the custom domain and access control

Before you get started with the content, take a small step that will make a difference later. Set up your subdomain to have access to the preview and production environments. Go to [Hosting Spaces on a custom domain](docId\:PhPdT07jvT42ScfHSTlHu)[ ](https://www.archbee.com/docs/hosting-spaces-on-a-custom-domain)and follow the steps to add your custom domain.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/ihdZldxJRjXhZ6tQVFOIi_guides-domain-light.png)

Multiple options are available under the **General** tab - you can switch off the **Indexable by search engines** (if public) from the same Space Settings. You often want this activated so that users find your site on the search engine results page. You can go to the Public access control option and pick any of the fice options for more control.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/blWxSmSe3Bv7Jvq4B6-Uh_guides-general-light.png)

- **None** - does exactly what the name says, keeps your settings regarding the public Space.
- **Password** - Set a Space password. Everyone with the link and password will be able to read the content.
- **Guest Accounts&#x20;**- Create guest accounts. Everyone with the link and a guest account can read the content. Guest accounts are not charged as seats in Archbee.
- **Magic link&#x20;**- You enter specific emails or allowlist entire domain names, and users will authenticate using a link that we send to their email address;
- **JWT authentication&#x20;**- Check [JWT - secret visitor authentication](docId\:w7VFvxPMFYSPdg0xnzlK1) to learn to set it up. It's a perfect option if you don't want the users to log in each time.

## Start building pages

Before you write any documentation, consider the main topics you will cover. This time a pen and paper might help you to draw the structure.

Next, create a document, convert it to a category, and give it a name.

Once you have these, you are ready to add documents under each category.

Start with a document introducing the main things a user will find on the documentation site. It doesn't have to be complicated; here is how we did it in our **User & Dev Guide**:

- **Getting Started**
- **Editor**
- **Documents**
- **Spaces**
- **Hosted Spaces**
- **Organizations**
- **Import & Export**
- **Integrations**
- **Guides**
- **Public API**
- **Misc**

When you start to add content, it's essential to have a workflow. Here's a potential one, but you might want to adapt it:

- Start the draft in **Personal docs**. This will help you write anything that you don't want to share with the team yet.
- When ready, **move** it to the public **Space**
- **Ping a teammate** that the doc is ready and needs to review it
- If any, add inline **comments** where input from other users is required.
- After you are comfortable with the changes, **publish to preview&#x20;**&#x74;o see the staging site.
- If everything looks good, hit **publish to production** and announce that everything is live.

Working with templates makes it easy for contributors to start writing content. You can save a set of templates to help you kickstart content production. If you need inspiration, when you create a new document, you will see a button called: Start with a template at the bottom of the page. To build your own templates, go to the navigation on the left side, Templates, and start creating docs with the structure your documents need.

You might as well introduce the custom blocks that an author will be using or add examples from other sources.

### Permalinks and SEO settings

These options are at the document level. So you need to click on the three dots `⋮` on the top right side and pick **SEO Meta Controls**.

Add a relevant **title**, change the **URL**, write a **meta description** or **upload an image** for previews.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/bHxgCTW8EyYZ1TqOak2HA_seo-modal-light.png)

## Brand and customize your docs website

In the **Appearance** tab, you will find the banding options like **Accent Color**, **Logo**, and **Favicon**, along with other options for the template.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/iftMejOcUmqa9q8lY1Jhe_guides-apperance-light.png "Archbee Appearance Options")

## Create a navigation menu with multiproduct or product versions

Depending on the type of products or services, you might want to have different Space URL paths.

You can have a Space as the primary docs and create different Spaces for other products or even versions of them.

There's a shortcut! You can create a clone of any Space if the changes are incremental. This will help you keep the structure and make the edits for the new version.

So if versioning and multiproduct is something you need, use a different Spaces and append it with the relevant path or custom domain.

Go to [Space Links](docId\:CFtSj1sEfjJUG3ZsDlvQq) and start building your navigation.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/DlJ5An0ZMH5p14oHU0eUw_spacelinks-show-light.png "Space Links view on Stripey template")

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/PNTDeQDhJ1MCZwMIOpMM5_external-show-light.png "External Links view on Stripey template")

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/Gm7nDVmsIYMfyT580sRmk_version-show-light.png "Version Links view on Stripey template")

## Craft a landing page

The main goal of the homepage is to help the visitor go to the next page.

Building a landing page for your documentation website doesn't have to check the same practices for a presentation website.

The first document page is important to introduce your product or service to the users, so keeping it short and setting expectations goes a long way.

![](https://global-uploads.webflow.com/5f7178312623813d346b8936/62d13f507f7288f9eefe5678_archbee-user-guide.png)

You can use the [Custom Landing Page](docId\:PlNjgK2-0ne2m8QLNb9wd) feature and add your **HTML** for more control over the first page. There are many options to get inspiration from, and if you want to change the look and feel of the first page, this is your option.

Here is how one of our customers built their starting page for their help page.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/W78CicsWp6bniZbiQbrBn_guides-lpexample-light.png)

## Add custom code

Use [Custom CSS](docId\:d4gup0qqxInIgDThftqCn) if you want to add your own <font color="#a855f7">**flavor**</font> to the documentation site. If you are familiar with CSS classes, you will find some starting ab- and you can target them.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/egtHRBMdds2f-Jrc8PnEZ_custom-css-light.png)


[title] Document converter
[path] MISC/

### What is Archbee Document Converter

The Document Converter is an efficient tool that allows you to effortlessly convert your documents from any format to any format.&#x20;

If you are migrating from another platform and need to transform your content into an Archbee-supported format, use our Document Converter.

We recommend converting your content and documents into Markdown format, as this is the easiest and most efficient way to import into Archbee.

:::hint{type="info"}
The Document Converter is free for everyone as long as it is available on Archbee's website.
:::

### How to use it

::::WorkflowBlock
:::WorkflowBlockItem
Go to: [https://www.archbee.com/free-document-convertor](https://www.archbee.com/free-document-convertor)
:::

:::WorkflowBlockItem
Drag and drop the files or use the "Choose files" option.
:::

:::WorkflowBlockItem
Choose the desired format(Hundreds of supported formats), including Docx, HTML, JSON, PDF, and **Markdown**.
:::

:::WorkflowBlockItem
Add your email when requested. We will send your converted docs via email when they are ready.
:::

:::WorkflowBlockItem
Press "Convert files" -> The conversion will take some time, so we’ll send you an e-mail with the converted files.
:::
::::


[title] Q&A 
[path] /


[title] How can I add an additional custom domain to my organization
[path] Q&A /

**Whenever** you need an additional domain for your account, you can request it via our Support channel, and we will make sure to get back to you as soon as possible.

::::WorkflowBlock
:::WorkflowBlockItem
Click on the "?" mark from the lower right corner.
:::

:::WorkflowBlockItem
Select "Send us a message"
:::

:::WorkflowBlockItem
Open a support ticket
:::

:::WorkflowBlockItem
Give us more details about your additional domain request and our Support team will make the changes for you 🏗️
:::
::::


[title] How to manage URLs for redirects
[path] GUIDES/

[SEO Meta Controls](docId\:E-aARn44KIsrXycjGAMZg) allows for flexible URL structures. With Archbee, you can control the URL path of each document.

This is helpful when you migrate your documentation from a different platform to Archbee, but you want to keep a similar URL structure to avoid 404 errors.

Instead of using redirects, you can add the same URL path.

For example, if you have the Space hosted on `docs.acme.com`, and you want the final **URL** to be something like `docs.acme.com/category/subcategory/article-title`, you add in the **URL Key** field `category/subcategory/article-title`

Go to document settings by clicking on the 3 dots `⋮` at the top right corner.

Next, go to **SEO Meta controls**, and in the new windows, under the **URL KEY**, you can set up any structure you need.

The **URL KEY** of each document should exclude the subdomain you added in the Space Settings.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/AxkPefbw93O4s-oV27CZz_seo-modal-light.png)


[title] How to manage the card and billing details
[path] GUIDES/

Managing your card and billing details in Archbee is a straightforward process.&#x20;

::::WorkflowBlock
:::WorkflowBlockItem
First, log in to your account
:::

:::WorkflowBlockItem
Click on your organization name and select **Subscription & Billing**
:::

:::WorkflowBlockItem
From there, you can&#x20;

- Update your payment information
- View past invoices
- Manage your subscription plan by clicking on the **Purchase Subscription&#x20;**&#x62;utton
:::
::::

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/l2ALV1KTCGvGCeHDv1Gk4_guides-subscription-light.png)








[title] Editor Keyboard Shortcuts
[path] MISC/

Click the question mark bottom left corner in app and click **Keyboard shortcuts** to see a list of updated shortcuts for the app.

You can also hit `Cmd`**&#x20;+&#x20;**`/` ( (:FontAwesome[]{icon="fa-brands fa-apple"} Mac)**&#x20;or&#x20;**`Ctrl`**&#x20;+&#x20;**`/` (:FontAwesome[]{icon="fa-brands fa-windows"}  Windows) to bring up the same interface.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/JGbs8I0s7AnjW2bzWQu32_misc-shortcuts-light.png)

::::Tabs
:::Tab{title="Windows"}
## Main shorcuts

| **Action**              | **Shortcut**           |
| ----------------------- | ---------------------- |
| Undo                    | `Ctrl` + `Z`           |
| Redo                    | `Ctrl` + `Shift` + `Z` |
| Search                  | `Ctrl` + `Shift` + `F` |
| Knowledge Graph         | `Ctrl` + `Shift` + `G` |
| Toggle light/dark theme | `Ctrl` + `]`           |
| Toggle focusm mode      | `Ctrl` + `\`           |
| New document            | `Ctrl` + `M`           |
| Shortcuts               | `Ctrl` + `/`           |
| Toggle Outline          | `Ctrl` + `8`           |

## Editor shortcuts

| **Action**                       | **Shortcut**            |
| -------------------------------- | ----------------------- |
| New paragraph                    | `Enter`                 |
| New line, same paragraph         | `Shift` + `Enter`       |
| Toggle edit mode                 | `Ctrl` + `E`            |
| Sharing options                  | `Ctrl` + `H`            |
| Toggle H1                        | `Ctrl` + `Shift` + `1`  |
| Toggle H2                        | `Ctrl` + `Shift` + `2`  |
| Toggle H3                        | `Ctrl` + `Shift` + `3`  |
| Heading 1                        | `#` + `Space`           |
| Heading 2                        | `##` + `Space`          |
| Heading 3                        | `###` + `Space`         |
| Expandable Heading 1             | `>>#` + `Space`         |
| Expandable Heading 2             | `>>##` + `Space`        |
| Expandable Heading 3             | `>>###` + `Space`       |
| Toggle Bulleted List             | `Ctrl` + `Shift` + `4`  |
| Toggle Numbered List             | `Ctrl` + `Shift` + `5`  |
| Toggle Checklist                 | `Ctrl` + `Shift` + `6`  |
| Toggle Code Block                | `Ctrl` + `Shift` + `L`  |
| Toggle Bold                      | `Ctrl` + `B`            |
| Edit Link                        | `Ctrl` + `K`            |
| Toggle Italic                    | `Ctrl` + `I`            |
| Toggle Underline                 | `Ctrl` + `U`            |
| Toggle Strike                    | `Ctrl` + `O`            |
| Mention team mate or document    | `@`                     |
| Add reusable variable            | `{{`                    |
| Emoji                            | `:` + `Emoji Code`      |
| Pick and add a Font Awesome icon | `(fa)`                  |
| Today's date                     | `(today`                |
:::

:::Tab{title="Mac (Apple)"}
## Main shorcuts

| **Action**              | **Shortcut**        |
| ----------------------- | ------------------- |
| Undo                    | `⌘` + `Z`           |
| Redo                    | `⌘` + `Shift` + `Z` |
| Search                  | `⌘` + `Shift` + `F` |
| Knowledge Graph         | `⌘` + `Shift` + `G` |
| Toggle light/dark theme | `⌘` + `]`           |
| Toggle focusm mode      | `⌘` + `\`           |
| New document            | `⌘` + `M`           |
| Shortcuts               | `⌘` + `/`           |
| Toggle Outline          | `⌘` + `8`           |

## Editor shortcuts

| **Action**                       | **Shortcut**                           |
| -------------------------------- | -------------------------------------- |
| New paragraph                    | `Enter`                                |
| New line, same paragraph         | `Shift` + `Enter`                      |
| Toggle edit mode                 | `⌘` + `E`                              |
| Sharing options                  | `⌘` + `H`                              |
| Toggle H1                        | `⌘` + `⌥` + `1`                        |
| Toggle H2                        | `⌘` + `⌥` + `2`                        |
| Toggle H3                        | `⌘` + `⌥` + `3`                        |
| Heading 1                        | `#` + `Space`                          |
| Heading 2                        | `##` + `Space`                         |
| Heading 3                        | `###` + `Space`                        |
| Expandable Heading 1             | `>>#` + `Space`                        |
| Expandable Heading 2             | `>>##` + `Space`                       |
| Expandable Heading 3             | `>>###` + `Space`                      |
| Toggle Bulleted List             | `⌘` + `Shift` + `4`                    |
| Toggle Numbered List             | `⌘` + `Shift` + `5`                    |
| Toggle Checklist                 | `⌘` + `Shift` + `6` or `⌘` + `⌥` + `6` |
| Toggle Code Block                | `⌘` + `Shift` + `L`                    |
| Toggle Bold                      | `⌘` + `B`                              |
| Edit Link                        | `⌘` + `K`                              |
| Toggle Italic                    | `⌘` + `I`                              |
| Toggle Underline                 | `⌘` + `U`                              |
| Toggle Strike                    | `⌘` + `O`                              |
| Mention team mate or document    | `@`                                    |
| Add reusable variable            | `{{`                                   |
| Emoji                            | `:` + `Emoji Code`                     |
| Pick and add a Font Awesome icon | `(fa)`                                 |
| Today's date                     | `(today)`                              |

## Blocks shortucts
:::
::::

| **Block**            | **Shortcut**             |
| -------------------- | ------------------------ |
| Heading 1            | `#` + `Space`            |
| Heading 2            | `##` + `Space`           |
| Heading 3            | `###` + `Space`          |
| Expandable Heading 1 | `>>#` + `Space`          |
| Expandable Heading 2 | `>>##` + `Space`         |
| Expandable Heading 3 | `>>###` + `Space`        |
| Callout              | `(callout)`              |
| Vertical split       | `(vs)`                   |
| Link blocks          | `(lb)`                   |
| File                 | `(file)`                 |
| Image                | `(image)`                |
| Table                | `(table)`                |
| Button               | `(button)`               |
| Video                | `(video)`                |
| Tab                  | `(tab)`                  |
| Minitasker           | `(minitasker)` or `(mt)` |
| Mermaid diagram      | `(mermaid)`              |
| API endpoint         | `(api)`                  |
| Swagger UI           | `(swagger)`              |
| GraphiQL             | `(gql)`                  |
| Code snippet         | `(code)`                 |
| Code drawer          | `(codeDrawer)`           |
| Changelog            | `(changelog)`            |
| iFrame embed         | `(iframe)`               |
| HTML embed           | `(html)`                 |
| Map                  | `(map)`                  |

## Editor markdown shortcuts

| **Markdown**         | **Syntax**                          |
| -------------------- | ----------------------------------- |
| Link Markdown        | `[label](www.go.com)` + `space bar` |
| Divider Markdown     | `---` + `space bar`                 |
| Heading 1            | `#` + `space bar`                   |
| Heading 2            | `##` + `space bar`                  |
| Heading 3            | `###` + `space bar`                 |
| Checklist            | `[]` + `space bar`                  |
| Quote                | `>`                                 |
| Inline Code Markdown | `` `text` ``                        |
| Bold Markdown        | `**text**`                          |
| Underline Markdown   | `__text__`                          |
| Italic Markdown      | `*text*`                            |
| Italic Markdown      | `_text_`                            |
| Strike Markdown      | `~~text~~`                          |
| Numbered List        | `1.` + `space bar`                  |
| Bulleted List        | `-` + `space bar`                   |
| Bulleted List        | `*` + `space bar`                   |
| Add code snippet     | ` ``` `                             |


[title] Search Analytics
[path] MISC/

## How to access Search Analytics

1. On the left navigation sidebar, go to the Search option at the top.
2. Under the newly opened window, go to Search Analytics under the search bar.
3. A new window will open, and you will see the list of queries searched by team members or readers.

![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/ktgJd7qm6pcAZjh8nOWxJ_image.png)

Search analytics allows you to view metrics on the queries typed in the search bar by readers or users.

1. customer query = search analytics for keywords typed in by readers on the internal Teams
2. team query = the search analytics for internal teams



![](https://archbee-image-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/zkkx1SEeRg3hqr--qdC4x_image.png)

The left panel includes metrics about the following values.

- How many times was a keyword searched
- How many documents are returned for a keyword


[title] Firewall Blocking Document Access
[path] MISC/

If a company has strict firewall rules, their customers may not be able to access the documentation portal(s).

But if they can go through a process of allow-listing different subdomains or allow-listing a top-level domain, then this should be rectified.



Here is a complete list of all Archbee subdomains that they need to allow for access:


- archbee.com
  - app.archbee.com
  - api.archbee.com
  - email.archbee.com
- archbee.io
  - app.archbee.io
  - api.archbee.io
- archbee.ai
- archbeehosting.com
- archbeemailer.com
- archbeeteam.com
- archbee.net
- archbee.new
- archbee.space
- documentation.new
- kb.new
- knowledgebase.new
- archbeeteam.com
- cdn.archbee.com
- cdn1.archbee.com
- cdn2.archbee.com
- cdn3.archbee.com
- archbee-image-uploads.s3.amazonaws.com
- archbee-image-uploads.s3.amazonaws.com
- archbee-doc-uploads.s3.amazonaws.com
- archbee-assets.s3.amazonaws.com
- archbee-profile-photos.s3.amazonaws.com


[title] How to setup your account
[path] MISC/

**Organizations&#x20;**&#x63;ontain Spaces, user groups and users.

Organizations are a way for your account to be in multiple contexts, for example if you might have multiple companies. They are not a way for you to group users in 1 company.&#x20;

![](https://archbee-doc-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/VOufuQ51t0cWmrIuyCmu5_workspaces.png "Organizations = Companies")



**User groups** are a way to group users in 1 company, e.g. your departments. User groups allow you to assign access policies to certain **Spaces** so that only some users are able to see or edit content.

:::hint{type="warning"}
## Do not use Organizations as a way to group members of the same company

This will work against you. Search works at Organization level, thus you will not be able to search for information in all your Organizations.

It's also not possible to mention people & docs from other Organizations as mentions and docs are at the Organizations level as well.
:::

![](https://archbee-doc-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/uQZVp0J3hQrrrvKhxhWhN_usergroups.png "User Groups = Departments")



**Spaces&#x20;**&#x61;re a way to group documents. They are similar to projects in your company. They can be assigned access policies so that only certain groups of people.

**Users&#x20;**&#x61;re members of 1 company.&#x20;

![](https://archbee-doc-uploads.s3.amazonaws.com/bNBm7nPJgXjbjLyfbHNh2/by1moxiVGMVr4DfZhwdYS_users.png "Users = Employees")




[title] SOCIAL LINKS 
[path] /