# DOM Header Insertions

### Purpose

Use the DOM (Document Object Model ) insertions to add HTML, Meta Data tags, CDN's and JavaScript in your app. Code can be added and edited from the **Environment > DOM Header Insertions** tab in your [site settings](/reference/site-settings.md). This feature is useful for installing custom fonts or a [favicon](https://github.com/DelfsEngineering/fm-betterforms/blob/master/guides/styling/favicon.md), or other third-party [libraries](/reference/components-overview/3rd-party-elements.md).

### Code Insertion Sections

**DOM Header Insertions - Load First**

Klai Studio will load this code into your app before the first element of the app is rendered. Use this section when you need to ensure code or links are available before the app attempts to draw the page.

If you are upgrading an older BetterForms V2 project and need to restore legacy Bootstrap 3 `glyphicon` support for custom HTML, see the cookbook note on backward compatibility:

* [Backward Compatibility for V2 to V3](/cookbook-backlog/backward-compatibility-v2-to-v3.md)

**DOM Header Insertions - Load Later**

Code in this area is loaded at an undetermined point after the main application begins to load. This is ideal for adding libraries, like a payment gateway, into your app without affecting its loading and startup performance. Only put code here that your application does not need immediately. While it usually loads early, there is a possibility that rendering will start before this code loads.

#### Optimizations

Moving code and links into the load later section will decrease your application's initial loading time, particularly noticeable during the first load of the app. Klai Studio internally caches most of your external assets, so they will not need to be fetched on app revisits.


---

# 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/dom-header-insertions.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.