Glopzi
Sign up

Integration

Astro.

Two tags in your main layout. Same pattern across static and SSR Astro setups. Works alongside any framework you’re using for your islands.

In your main layout

In your main layout (commonly src/layouts/Layout.astro), add the link tag inside the head and the script tag inside the body:

Astrosrc/layouts/Layout.astro
---
const { title } = Astro.props;
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>{title}</title>
    <link
      rel="stylesheet"
      href="https://cdn.glopzi.com/YOUR_API_KEY.css"
    />
  </head>
  <body>
    <slot />
    <script
      src="https://cdn.glopzi.com/modules/glopzi.js"
      data-glopzi-key="YOUR_API_KEY"
      async
    ></script>
  </body>
</html>

Astro doesn’t process raw <link> and <script> tags (without the is:inline directive they’d be bundled). Use the inline form by default, or add is:inline to preserve the tag verbatim:

Astro
<script
  is:inline
  src="https://cdn.glopzi.com/modules/glopzi.js"
  data-glopzi-key="YOUR_API_KEY"
  async
></script>

Static vs SSR Astro

  • Static Astro (the default): pages are pre-rendered at build time. Glopzi works normally; the link tag is in the static HTML and applies before paint.
  • SSR Astro (with an adapter like Node, Vercel, Cloudflare): pages render on demand. Same setup; the link tag still lands in the head of every response.

Glopzi doesn’t care which mode you use. The tags go in the layout either way.

Islands and Glopzi

Astro’s islands (interactive components in React, Vue, Svelte, Solid, etc.) hydrate after page load. Glopzi waits for window.load before initializing, which gives islands time to mount. Animations targeting elements inside islands work as expected.

Tip

Animate the static HTML version of an element when possible (i.e., target the wrapper, not a child that only exists after hydration). Static targets are reliable from the first frame.

Common pitfalls

  • Forgetting is:inline: without it, Astro tries to bundle the script and may break. The bundled form would also defeat the purpose of pulling Glopzi from our CDN.
  • CSP headers in your Astro adapter: if you’ve added Content Security Policy headers, allow cdn.glopzi.com in script-src and style-src.
  • View transitions: Astro’s<ViewTransitions /> component navigates with persisted DOM. Glopzi re-initializes on each navigation; animations on new elements work, but ones already running may need a moment to re-attach.

Next steps