# Connecting Setka Editor files to the pages of your site

Setka Editor files should be launched both on the post editing page (for the editor's tool operation) and on the post preview page (to connect Setka Editor styles to your content).

### On a post-editing page: <a href="#h_a183f48b-307e-4d3e-b2b2-109a91dbae28" id="h_a183f48b-307e-4d3e-b2b2-109a91dbae28"></a>

* `content_editor_files` — JS и CSS editor files
* `theme_files` — JSON config file and a concatenated CSS file of your styles

### On a post preview page <a href="#h_fe2b27f9-7c27-45d5-915e-aff1e765d318" id="h_fe2b27f9-7c27-45d5-915e-aff1e765d318"></a>

* `plugins` — scripts to launch interactive post elements (animations and galleries)
* `theme_files` *—* style files
* concatenated CSS file for styles from theme\_files (if there are 1 or 2 styles in your Style Manager) and `standalone_styles` (if there are many styles in your account and the common style is too large)

{% hint style="info" %}
To use separate styles; there are 3 files from [standalone\_styles](https://editor-help.setka.io/hc/en-us/articles/115002594605-Integration-with-Style-Manager#h_e5a17340-1f1f-487e-ad13-dade200cca33) array needed:

* `common` *—* common rules of Setka Editor styles
* `themes` *—* a style of a specific post. Take a style ID into your account when saving it to metadata on your stack
* `layouts` *—* layout grid used for your content. Take a layout grid ID into your account when saving it to metadata on your stack.
  {% endhint %}

#### Public.js additional initialization parameters

By default, `public.js` initializes when all the content on the page is loaded. However, there may be times when you need to initialize `public.js` without waiting for all the content to load.

To initialize `public.js` on the `DOMContentLoaded` event, add configuration parameters with the `startEvent` key to the post's HTML code before the  element that includes public.js.

Possible values are `load` (default) and `DOMContentLoaded`. Sample code:

```javascript
<script>
      window.SEPublicConfig = {
        startEvent: 'DOMContentLoaded',
      };
</script> 
```

#### **A choice of the page scrolling container**

If a page scrolling container is not a `window` but some other DOM-element, send the following parameter to initialization:

```javascript
window.SEPublicConfig = {
  $scrollingElement: document.querySelector(‘.scrollable-area’)
};
```

Where *.scrollable-area* is a container where page scrolling occurs.&#x20;

#### **Enabling polyfills**

To optimize the size of the `public.js` file, since version 2.11.21, we don't include a polyfill for [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) and [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) into it by default. If the visitor's browser does not support any of these APIs, `public.js` will automatically load the polyfill from Setka CDN before initialization.

To enable custom polyfills, pass this parameter into the initialization:

```javascript
window.SEPublicConfig = {
  polyfillsPath: 'https://ceditor.setka.io/editor-polyfill/polyfills.pylyfillid.min.js'
};
```

Where `polyfillsPath` is an absolute polyfill URL.

### On AMP pages <a href="#h_7523578a-4073-413d-b59c-2173a4eb8f3f" id="h_7523578a-4073-413d-b59c-2173a4eb8f3f"></a>

AMP does not allow connecting separate style files to pages. To do that, you need to save files' content and connect it to [common files of AMP page styles](https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/?referrer=ampproject.org).&#x20;

{% hint style="info" %}
There are 3 files from the [amp-styles](https://editor-help.setka.io/hc/en-us/articles/115002594605-Integration-with-Style-Manager#h_ed62cf24-451d-4557-8bd2-8c5237ddb188) array of files that need to be saved:&#x20;

* `common` — common rules of AMP page styles
* `themes` — a style of a specific post. Take a style ID into account when saving it to metadata on your stack
* `layouts` — layout grid used for your content. Take a grid ID into account when saving it to metadata on your stack
  {% endhint %}


---

# 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://setka.gitbook.io/help-center/api/setka-editor-api/integration-with-style-manager/connecting-setka-editor-files-to-the-pages-of-your-site.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.