# 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 %}