# Slots / Code Injection

**Slots** are definable HTML templates that can be inserted into various areas of BetterForms. Slots can be used for customizing the header area, navigation and footer areas (footer not developed yet).\
Slots can accept HTML and VueJs HTML.

Slot scope for VueJS HTML content will depend on the slot location. All slots can see `window.formGen` from there you can access `formGen.formSchema.model` etc.

Slots replace default slot content if there is a default content (Eg. `logout`)

To edit your site's slots, go to the **Appearance > Slots** tab of your [site settings](/v1/reference/site-settings.md).

### Slot Locations:

| Slot Name             | Description                                                                                               |
| --------------------- | --------------------------------------------------------------------------------------------------------- |
| `headerBrandLeft`     | To the left of the logo brand block                                                                       |
| `headerBrand`         | Company Name / Logo Area, if set, replaces default text                                                   |
| `headerSidebarToggle` | Replaces default sidebar hamburger toggle is set                                                          |
| `headerLeft`          | Top Header area left most position to the right of the brand                                              |
| `headerMiddle`        |                                                                                                           |
| `headerRight`         |                                                                                                           |
| `logout`              | Replaces the default logout code *(This slot hides conditionally depending if the user is authenticated)* |
| `formFooter`          | Footer area of page body                                                                                  |
| `appFooter`           | Footer area of entire page                                                                                |
| `sidebarLeftTop`      | Left navigation menu above menu items                                                                     |
| `sidebarLeftBottom`   | Left navigation menu below menu items                                                                     |
| `sidebarLeftFooter`   | Left navigation menu footer area, good for logos, You will need to add CSS to bottom align this \`div\`   |

## DOM Header Insertion

If you need to insert HTML in the header of every page in your site, go to the **Environment > DOM Header Insertions** tab in your [site settings](/v1/reference/site-settings.md). This feature is useful for installing custom fonts or a [favicon](/v1/usage/stylingverview/favicon.md) for the browser tab. You may also need to use it for certain [Custom Form Elements](/v1/reference/components-overview/3rd-party-elements.md)

#### Optimizations

Inserted tags will generally load and block other code execute that renders the page while the module loads. Since these modules are often used for only a small part of the work flow, you can delay their loading by using `async` and `defer` tags in the script tag.

```javascript
<script async defer src="https://cdn.somelig.com/" type="text/javascript"></script>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.klai.studio/v1/reference/site-settings/slots-code-injection.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.