Install with AI

Install the Chatyol live chat widget on this website.

## The snippet
```html
<script src="https://cdn.chatyol.com/widget.js" data-key="pk_your_key" async></script>
```
- Public key: pk_your_key (safe to commit; it only works on pages of example.com and its subdomains).
- Load it ONCE for the whole site, as late as possible (end of <body>, async/defer). Never inside a component that re-renders or remounts.

## Where to put it (pick what this project uses)
- Plain HTML / static site: before </body> on every page, or in the shared footer/layout.
- React (Vite / Create React App): index.html (public/index.html for CRA), before </body>. Not in useEffect.
- Next.js App Router: app/layout.tsx with next/script, strategy="afterInteractive".
- Next.js Pages Router: the same <Script> in pages/_app.tsx.
- Vue (Vite): index.html before </body>. Nuxt 3: nuxt.config.ts → app.head.script.
- Angular: src/index.html before </body>.
- SvelteKit: src/app.html before </body>. Astro: the base layout, before </body>. Remix: app/root.tsx inside <body>.
- Laravel / Blade, Django, Rails, PHP: the main layout template before </body>.
- WordPress: wp_footer hook in a child theme's functions.php (or a header/footer plugin).
- Shopify: layout/theme.liquid before </body>.

## Content Security Policy (only if the site sends one)
Add these sources to the existing policy (don't replace it):
- script-src https://cdn.chatyol.com
- connect-src https://api.chatyol.com wss://api.chatyol.com
- img-src https://cdn.chatyol.com https://api.chatyol.com https://app.chatyol.com data: blob:

## Don't
- Don't add npm packages, iframes or wrappers; the single script is the whole integration.
- Don't copy widget.js into the project; always load it from https://cdn.chatyol.com.
- Don't add it twice.

## Optional: open or identify from code
```js
window.Chatyol?.open();                       // e.g. from a "Contact support" button
window.Chatyol?.identify({ name, email });    // logged-in users: prefills their details
```

## Check it works
1. Run or deploy the site on example.com and open any page: a chat bubble appears bottom right.
2. In the browser console, `typeof window.Chatyol` is "object".
3. On localhost the bubble still loads, but sending says "This chat isn't available on this site". That's expected.

When done, tell me which file you changed and show the diff.