website logo
⌘
K
Book a DemoSign Up ->
🌐
Help Center
πŸ’Ό
Jobs
πŸš€GETTING STARTED
πŸ‘‹Welcome to Archbee πŸ€“
Learn the basics
How to get started
πŸ“EDITOR
πŸ“ƒDOCUMENTS
πŸ—ƒοΈSPACES
🌎HOSTED SPACES
πŸ”ƒPUBLIC API
GET
Get document
POST
Update / Create document
DELETE
Delete document
GET
Search document
β˜•ORGANIZATIONS
πŸ“¦IMPORT & EXPORT
πŸ”ŒINTEGRATIONS
πŸ“₯GUIDES
➿MISC
πŸ™‹Q&A
Docs powered by
Archbee
HOSTED SPACES

Custom Landing Page

This feature is available on these plans:

βœ”οΈ Scaling βœ”οΈ Enterprise

ο»Ώ

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:

  1. Click on the Space you want to add a custom HTML landing page.
  2. Look for the icon gear βš™οΈ and click on it.
  3. In the Space Settings window, go to the Landing Page tab.
  4. Select Custom HTML.
  5. Add your HTML & CSS code and click Save.
Custom HTML
Custom HTML
ο»Ώ

The Custom HTML supportsΒ Handlebars and Tailwind. 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:

First level variables
Prop Interfaces
|
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>{{ 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:

Document image
ο»Ώ

You should see something like this, with the above code:

Document image
ο»Ώ

ο»Ώ

Updated 22 Sep 2023
Did this page help you?
PREVIOUS
Feedback Analytics
NEXT
Landing page templates
Docs powered by
Archbee
Docs powered by
Archbee