# Slots / Code Injection

Slots are reusable HTML or Vue template insertion points that let you customize the BetterForms app shell and page wrapper without editing the core application code.

To edit slots in the IDE, go to:

* `Styling > Slots`

## Reference

| Slot Name             | Where it renders                                                       | Notes                                                                       |
| --------------------- | ---------------------------------------------------------------------- | --------------------------------------------------------------------------- |
| `header`              | Standalone app-level header area rendered below the top navigation bar | App-shell level slot handled separately from the named header-bar slots     |
| `headerBrandLeft`     | Left of the brand/logo area in the top navigation bar                  | Header-bar slot                                                             |
| `headerBrand`         | Brand / app-name area in the top navigation bar                        | Replaces the default app-name block                                         |
| `headerSidebarToggle` | Sidebar toggle area in the top navigation bar                          | Replaces the default left-nav toggle button                                 |
| `headerLeft`          | Left-side header content area                                          | Header-bar slot                                                             |
| `headerCenter`        | Center header content area                                             | Current runtime slot name; use this instead of older `headerMiddle` wording |
| `headerRight`         | Right-side header content area                                         | Header-bar slot                                                             |
| `logout`              | Logout area in the top navigation bar                                  | Only shown when the user is authenticated                                   |
| `sidebarLeftTop`      | Above the left navigation menu items                                   | Sidebar slot                                                                |
| `sidebarLeftBottom`   | Below the left navigation menu items                                   | Sidebar slot                                                                |
| `sidebarLeftFooter`   | Footer area of the left navigation bar                                 | Often used for logos or custom footer content                               |
| `formHeader`          | Above the current page body                                            | Page-wrapper slot inside the form layout                                    |
| `formFooter`          | Below the current page body                                            | Page-wrapper slot inside the form layout                                    |
| `appFooter`           | Footer area of the overall app shell                                   | App-shell level footer slot                                                 |

## Notes

* Slots can replace or extend default shell content depending on where they are inserted.
* `logout` is a conditional slot because the default logout control only renders for authenticated users.
* `formHeader` and `formFooter` are page-wrapper slots, so they render around the current page content rather than inside the top navigation or sidebar.
* `appFooter` renders at the app-shell level and is separate from page-level footer content.

## Advanced Note

Some slot templates can access runtime browser-side objects such as `window.formGen`, depending on where the slot is rendered and what page context is currently active.

Treat that as advanced behavior:

* it is useful for custom dynamic templates
* it should not be the main mental model for learning slots
* if you rely on it heavily, document the expected page context clearly in your own implementation notes


---

# 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/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.