> For the complete documentation index, see [llms.txt](https://docs.fact-finder.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.fact-finder.com/webcomponents-overview/web-components-4.x./guides/quick-start/including-scripts.md).

# Including Scripts

Load FactFinder scripts in order and prevent unstyled content flashes.

### Boilerplate

The following section shows a boilerplate for including FactFinder Web Components in your website. `custom-elements-es5-adapter.js` and `webcomponents-loader.js` will load the required Polyfills minimized to the needs of the calling browser.

Note that the [default-styles.css](https://github.com/FACT-Finder-Web-Components/ff-web-components/blob/release/4.x/dist/default-styles.css) within our dist folder is already bundled into `bundle.js` and hence is not required to be referenced on your page. It is only for reference.

**Boilerplate Code**

```html
<head>
    <!-- Do not change the order of the scripts to ensure all required polyfills are loaded before our script -->
    <script src="../dist/vendor/custom-elements-es5-adapter.js"></script>
    <script src="../dist/vendor/webcomponents-loader.js"></script>
    <script defer src="../dist/bundle.js"></script>
</head>
```

### Prevent Flash Of Unstyled Content (FOUC)

Depending on the browser's page loading time you might encounter ugly flashes of unstyled content and incomplete HTML template pieces. To prevent this simply annotate all elements that have a visual component and are shown immediately after page load with the `unresolved` attribute. This attribute is removed when the component is fully initialized and connected to the document.

```html
<ff-record-list unresolved></ff-record-list>
```

Also add suitable CSS rules to the top of the page before FactFinder Web Components are referenced.

The following CSS snippet hides elements marked as unresolved (as well as their descendants) in the document:

```html
<head>
    <style>
        [unresolved] {
            display: none;
        }
    </style>
</head>
```

{% hint style="info" %}
There are several ways to hide an HTML element, like setting its `opacity` or `visibility` CSS property.

Unlike `display: none`, elements with `opacity: 0` or `visibility: hidden` will occupy their place in the document, but will not be visible.

You can apply any style you need to `unresolved` elements.

Please see the official CSS specification for details.

The `<style>` tag must be inlined in the main document. If you add it to a CSS file, it might not be loaded fast enough and FOUC might still occur.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.fact-finder.com/webcomponents-overview/web-components-4.x./guides/quick-start/including-scripts.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.