Install the snippet

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

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:

<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 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 below.

Place a component

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

<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 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.

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:

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

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.