Quickstart: any website: Glopzi Docs

Before you start

You need:

A Glopzi account. Sign up at dashboard.glopzi.com. The trial is free, no card required.
Access to your site’s HTML head, or wherever your stack lets you inject a script tag (theme settings on Shopify, custom code on Webflow, the root layout on Next.js, and so on).

Note

On WordPress, use the WordPress quickstart instead. The plugin handles installation for you.

1. Sign up and add your site

Create your account at dashboard.glopzi.com. You’ll get a 6-digit code by email to confirm your address.
In the dashboard, click Add a custom site and enter the domain you want Glopzi to run on (for example, example.com).
We’ll generate an API key for that site. The dashboard shows it next to the install snippet.

Domain binding

The API key only works on the domain you registered. This protects you from someone copying your snippet onto another site. You can add or change domains anytime from the dashboard.

2. Copy your script tag

The dashboard shows a single tag that looks roughly like this. Thedata-glopzi-key value is your unique API key.

HTML

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

That single tag handles both production rendering (when visitors arrive) and editing (when you open the editor with a special URL parameter). You don’t need to install anything else.

3. Paste it into your site

Add the tag to your site’s HTML, ideally inside the <head> or just before the closing </body>. The exact spot depends on your platform.

Plain HTML or static sites.Drop it into your template’s head.
Shopify. Open Online Store → Themes → Edit code, find theme.liquid, paste the tag inside<head>.
Webflow. In Project Settings → Custom Code, paste the tag in Head Code and publish.
Framer. In Site Settings → General → Custom Code → Start of head tag, paste and publish.
Next.js, Astro, Remix, SvelteKit. Paste in your root layout, then read the SSR section below for the second tag you need.

4. Open the editor

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

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

Glopzi detects the parameter, redirects you to the editor at studio.glopzi.com, and loads that page in a frame so you can design animations on it. You only need this URL the first time you open the editor for a given page; from then on, the dashboard’s site list lets you jump back to the editor with one click.

Note

On a domain protected by HTTP Basic Auth or a staging firewall, make sure the editor (and your browser) can both reach the page. If your site is behind a login wall, sign in first in the same browser, then open the edit URL.

SSR frameworks: a second tag

If your site streams HTML to the browser (Next.js, Astro, Remix, SvelteKit, anything with server-side rendering), add a stylesheet link next to the script tag. It prevents a flash of content during the first paint.

HTML

<link
  rel="stylesheet"
  href="https://cdn.glopzi.com/YOUR_API_KEY.css"
/>
<script
  src="https://cdn.glopzi.com/modules/glopzi.js"
  data-glopzi-key="YOUR_API_KEY"
  async
></script>

The stylesheet is auto-generated from your animations and stays in sync every time you save in the editor.

For per-framework recipes (where exactly to paste each tag), see the integration guides:

If something goes wrong

The editor URL redirects but shows an error. The most common cause is a key/domain mismatch. Open the dashboard, confirm the domain you registered exactly matches the one in your browser’s address bar (with or without www as you have it).
Animations don’t appear after saving. Hard refresh the page (Ctrl/Cmd+Shift+R) to bypass your browser’s cache. Bundles propagate to the CDN within seconds, but your browser may hold the old version for a minute.
Console error mentions CORS. If your site is behind a strict Content Security Policy, you may need to whitelist cdn.glopzi.com in your script-src and style-src directives.

Any website in five minutes.