# Requirements

URL: https://docs.ablyft.com/developers/installation/requirements/

> What the ABlyft snippet needs from your website and from your visitors' browsers.



The snippet is a single JavaScript file without dependencies. This page lists what it needs to run, so you can check
your setup, your security policies and your support targets.

## Website

| Requirement          | Details                                                                                                                                                                                                        |
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Snippet in the page  | One `<script>` tag with your project ID, ideally in the `<head>`. See [Embed the snippet](https://docs.ablyft.com/developers/installation/snippet/).                                                                                  |
| One snippet per page | A second ABlyft snippet on the same page logs a warning and does not start.                                                                                                                                    |
| No build step        | The snippet is loaded from the CDN. You do not install a package.                                                                                                                                              |
| CMS and tag managers | Anything that lets you add a script tag or a Google Tag Manager tag is enough. Loading through a tag manager can cause flicker, see [Embed the snippet](https://docs.ablyft.com/developers/installation/snippet/#google-tag-manager). |

## Browser

The snippet is delivered as modern JavaScript and is **not** converted to older language versions. It uses, among others:

* arrow functions, optional chaining (`?.`), nullish coalescing (`??`) and logical assignment (`||=`)
* `URL` and `URLSearchParams`
* `MutationObserver` and `IntersectionObserver`
* `navigator.sendBeacon()` to send events
* `localStorage`, `sessionStorage` and cookies

Use a current version of a major browser (Chrome, Edge, Firefox, Safari, Samsung Internet). Old browsers that cannot parse
modern syntax, such as Internet Explorer, cannot run the snippet.

> The snippet does not use `fetch`. Events are sent with `navigator.sendBeacon()`.

## Network and Content Security Policy

If you restrict which domains your pages may contact (for example with a Content Security Policy), allow these:

| Domain                      | Used for                                                          | CSP directive                        | Needed                                                                  |
| --------------------------- | ----------------------------------------------------------------- | ------------------------------------ | ----------------------------------------------------------------------- |
| `https://cdn.ablyft.com`    | Loading the snippet (JavaScript)                                  | `script-src`                         | Always                                                                  |
| `https://log.ablyft.com`    | Receiving events and tracking payloads (sent with `sendBeacon`)   | `connect-src`                        | Always                                                                  |
| `https://assets.ablyft.com` | Images                                                            | `img-src`                            | When your variations use images hosted by ABlyft                        |
| `https://editor.ablyft.com` | Visual Editor (JavaScript, CSS and images)                        | `script-src`, `style-src`, `img-src` | Only while you edit a variation in the Visual Editor                    |
| `https://app.ablyft.com`    | API requests of the Visual Editor, and the quality assurance tool | `connect-src`                        | Only while you edit a variation in the Visual Editor or use the QA tool |

An example header for the always needed domains, to merge into your existing policy:

```http
Content-Security-Policy: script-src 'self' https://cdn.ablyft.com; connect-src 'self' https://log.ablyft.com; img-src 'self' https://assets.ablyft.com
```

To use the Visual Editor on a site with a strict policy, also add `https://editor.ablyft.com` to `script-src`,
`style-src` and `img-src`, and `https://app.ablyft.com` to `connect-src`.

If your project uses a custom tracker URL or custom snippet location, the domains differ. Those settings are managed by
ABlyft support.

Two further points matter for strict policies:

* The snippet runs the JavaScript of your experiments, variations, audiences and [prerequisite rules](https://docs.ablyft.com/developers/consent-and-security/consent-manager/) with `eval` and `new Function`. A policy that forbids this (no `unsafe-eval`) prevents that code from running.
* Variations add `<style>` elements to the page, and the anti-flicker mode sets an inline style on the `<html>` element.

## iFrames

By default, the snippet does not run inside an iFrame. If you want to test content in an iFrame, enable
**Allow in iFrames** under **Settings → Project Settings → Project Activations Settings**, and add the snippet to the page
inside the iFrame. Alternatively, set `window.ablyftAllowIframe = true` before the snippet loads, see
[Window flags](https://docs.ablyft.com/developers/reference/javascript-api/#window-flags).

## Bots

Visitors whose user agent contains words like `bot`, `google`, `crawler`, `spider`, `robot`, `crawling` or
`facebookexternalhit` are treated as bots. The snippet does nothing for them: they do not see variations and are not tracked.

## Cookies and storage

The snippet stores a small amount of data in the visitor's browser, by default in `localStorage`. The storage is how ABlyft remembers which variation a visitor has seen. See [Storage & privacy](https://docs.ablyft.com/developers/consent-and-security/storage-and-privacy/)
for the full list.

## Next steps

- [Publishing](https://docs.ablyft.com/developers/installation/publishing/): How changes reach your visitors.
- [Storage & privacy](https://docs.ablyft.com/developers/consent-and-security/storage-and-privacy/): What is stored in the browser.