Glopzi
Sign up

Integration

SvelteKit.

SvelteKit’s src/app.htmlfile is the HTML template for every page. Drop the Glopzi tags there and you’re done.

In app.html

HTMLsrc/app.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
    <meta name="viewport" content="width=device-width" />
    %sveltekit.head%
    <link
      rel="stylesheet"
      href="https://cdn.glopzi.com/YOUR_API_KEY.css"
    />
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display: contents">%sveltekit.body%</div>
    <script
      src="https://cdn.glopzi.com/modules/glopzi.js"
      data-glopzi-key="YOUR_API_KEY"
      async
    ></script>
  </body>
</html>

That’s the entire integration. Every route SvelteKit renders inherits this template, so the Glopzi tags land on every page automatically.

Why app.html and not a layout

SvelteKit also has a root layout (src/routes/+layout.svelte), which seems like the natural place for global tags. But layouts render inside app.html, and putting a stylesheet link there means it loads after first paint has already started.

For the anti-FOUC stylesheet to land in the head before first paint, it has to be in app.html itself. The script tag could go either place; we put it next to the stylesheet for clarity.

Common pitfalls

  • Putting tags in +layout.svelte: the link tag works, but it loads too late to prevent FOUC on the first paint of a streaming SSR response. Use app.html.
  • SvelteKit’s preload-on-hover doesn’t affect Glopzi. Our runtime is independent of SvelteKit’s navigation prefetch.
  • Server-only routes (API endpoints): don’t apply tags from app.html; they return JSON. Glopzi only renders on visual pages, which is what you want.
  • Strict CSP: if you’ve configured Content Security Policy in your SvelteKit hooks, allow cdn.glopzi.com in script-src and style-src.

Next steps