Astro

Astro is the easiest target — the embed script is a static <script> tag, which Astro ships unchanged.

1. Add to your base layout

---
const wholisphereKey = import.meta.env.PUBLIC_WHOLISPHERE_KEY;
---
<!doctype html>
<html lang="en">
  <head>
    <slot name="head" />
  </head>
  <body>
    <slot />
    {wholisphereKey && (
      <script
        src="https://cdn.wholisphere.ai/embed.js"
        data-key={wholisphereKey}
        data-position="bottom-right"
        data-wholisphere
      />
    )}
  </body>
</html>

2. Set the env var

PUBLIC_WHOLISPHERE_KEY=org_yourkey

The PUBLIC_ prefix is Astro’s convention for client-exposed variables.

3. (Optional) Per-page disable

If you want the agent on most pages but not, say, your login flow:

---
import Base from '../layouts/Base.astro';
---
<Base disableWholisphere>
  …
</Base>

Update Base.astro to read the prop and skip the script when set.

4. Trigger cache invalidation on deploy

- name: Invalidate Wholisphere cache
  uses: wholisphere/cache-invalidate-action@v1
  with:
    api-key: ${{ secrets.WHOLISPHERE_API_KEY }}
    urls: "https://${{ vars.PROD_URL }}/*"

That’s it. Build, deploy, FAB shows up.