# Install the snippet

> Paste one script tag, give each component a fallback, and what a visitor sees when something fails.

The snippet is one script tag. It loads a small loader that fetches only the components your site
uses, in the version your site's environment picks (Staging or Production). A new version reaches the page without editing the page
again.

## Get your snippet

```sh
node taggor.mjs sites snippet
```

prints the tag for the site saved in `taggor.json`. It has this shape, with your own site key
(`st_` followed by letters and digits) in the address:

```html
<script async src="https://cdn.taggorcdn.com/s/<site-key>.js"></script>
```

The address is the one the API gives for your environment; paste the tag exactly as the command prints
it.

- Put it once per page, anywhere in `<head>` or at the end of `<body>`. It is `async`, so it never
  blocks the page.
- The loader is small and sets no cookie. The only global it adds to your page is `window.taggor`.
- A page that is mostly components can show them earlier: `node taggor.mjs sites snippet --preload` adds
  preload hints for `<head>`, and [Load Taggor early](https://taggor.dev/docs/load-early.md) has the rest of the recipe.
- If your site sends a Content-Security-Policy, the snippet needs a `nonce` and the policy needs the
  CDN origin: see [Content-Security-Policy](#content-security-policy) below.

## Place a component

Write the component's tag where it should appear, with its props as attributes:

```html
<faq-accordion multiple></faq-accordion>
```

## Write a fallback

What you write inside the tag is plain HTML of your own page: Taggor shows it until the component loads,
and for good when it cannot. [Fallback content and slots](https://taggor.dev/docs/fallback.md) has the pattern, what the
visitor sees in each situation and the mistakes to avoid. The platform you paste on may add limits of its
own: see the [platform guides](https://taggor.dev/docs/platforms.md).

## Content-Security-Policy

Taggor works under a strict policy: nothing inline, no `unsafe-eval`, no `unsafe-inline`. Give the
snippet the `nonce` of the response, and allow the CDN origin your snippet names:

```html
<script async nonce="{NONCE}" src="https://cdn.taggorcdn.com/s/<site-key>.js"></script>
```

```text
Content-Security-Policy:
  default-src 'none';
  script-src 'nonce-{NONCE}' https://cdn.taggorcdn.com;
  style-src 'nonce-{NONCE}';
  img-src 'self' https://cdn.taggorcdn.com;
  font-src https://cdn.taggorcdn.com;
  connect-src 'self' https://cdn.taggorcdn.com;
  base-uri 'none';
  require-trusted-types-for 'script';
  trusted-types taggor
```

The `default-src 'none'` is a strict starting point: add what your own page needs. `img-src` and
`font-src` matter only if a component uses images or fonts, `connect-src` only if a component sends
data. If you require Trusted Types, list the policy `taggor`.

To check it on your site, start with `Content-Security-Policy-Report-Only` and a report address of
your own, open a page with a component and watch the console: no violation is expected with this
policy. A `script-src-elem` violation on the CDN means the origin or the nonce is missing; a
`trusted-types` violation means `taggor` is not listed.