---
title: Custom Landing Page
slug: archbee-docs/custom-landing-page
description: Learn how to create a personalized HTML landing page for your Space on the docs site using this comprehensive document. Find step-by-step instructions to access the Space Settings, select the Landing Page tab, and choose the Custom HTML option. Explore co
docTags: 
createdAt: 2021-04-30T17:47:36.000Z
---

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
Look for the **Settings** gear ( ⚙️ ) and click on it
:::

:::WorkflowBlockItem
In the **Space Settings** window, go to the **Landing Page** tab
:::

:::WorkflowBlockItem
Select **Custom HTML**
:::

:::WorkflowBlockItem
**Add** your **HTML code **in **Landing page HTML **field and hit **Save**. 
Keep in mind that this is your `index.html` file.
:::
::::

![](https://app.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/B5CZvTt5IrgUSOw1Jut85_custom-html-lp-light.png "Custom HTML")

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://app.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/t4kCqi3UsLbZxU18egfrW_lp-hierarchy-light.png)

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

![](https://app.archbee.com/api/optimize/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.