Glopzi
Sign up

Integration

Plain HTML and static sites.

The simplest install Glopzi offers. One script tag in your HTML head, save your animations, done. Works with any static site generator (Hugo, Jekyll, Eleventy, Pelican) and any hand-built page.

The tag

From your dashboard, copy your install snippet. It looks like:

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

That’s the entire integration. The tag pulls in our loader; the loader fetches your compiled bundle (which contains both JavaScript and the anti-FOUC stylesheet); your animations run.

Where to paste it

Drop it inside <head> or just before the closing </body>. Both work.

  • In <head>: best for anti-FOUC (the stylesheet inside the bundle applies sooner). The recommended placement.
  • Before </body>: also fine. The async attribute means the script doesn’t block parsing either way.

Note

On Hugo, Jekyll, Eleventy, or any static site generator, the script goes into your <head> partial or base layout. One paste covers every page on the site.

Open the editor

Once the tag is live on your site, append ?glopzi-edit=1to any page’s URL and load it:

https://example.com/?glopzi-edit=1

You’re redirected to studio.glopzi.com, which loads your page inside its frame so you can edit. After your first visit, the dashboard’s site list lets you jump back to the editor with one click; the URL parameter is only needed once.

No build step required

You don’t need npm, webpack, Vite, or anything else. The script tag is the only piece of integration. Glopzi has no source code in your repository, no dependencies in your package.json, no build pipeline to maintain.

When we update the runtime, your site picks it up automatically. When we add new features, your site benefits without you doing anything.

Next steps