DropFix
Setup guide V1 - 3 of 12

Install the script tag

Paste one small HTML snippet into your app so DropFix can load in the background.

Step 1

Pick your install method

DropFix supports four install methods. Pick the one that matches how your app is built — they're all equivalent. The script tag is the easiest if you're not sure.

Method

Script tag (CDN)

Use this when

You have any HTML page — works with Next.js, React, Vue, plain HTML, Webflow, WordPress, Shopify, everything

Method

npm / yarn / pnpm

Use this when

You build your app with a bundler (Vite, Next.js, CRA, Webpack) and want a real import

Method

ESM CDN

Use this when

No build step (vanilla HTML / Astro static / etc.) but you want module imports

Option A — Script tag (recommended)

Paste this snippet once, anywhere inside your <head> element. The SDK reads the public key off the data-key attribute and initialises itself — no JavaScript wiring needed.

HTML — paste in <head>
<script
  src="https://cdn.jsdelivr.net/npm/@dropfix/sdk/dist/dropfix.js"
  data-key="YOUR_PUBLIC_KEY"
  defer>
</script>

Replace YOUR_PUBLIC_KEY

Replace YOUR_PUBLIC_KEY with your actual key from Settings → Security → Public Key. It looks like pk_live_xxxxxxxxxxxx.

Option B — npm / yarn / pnpm

For React, Next.js, Vue, Svelte and any other bundled app. Run ONE of these install commands in your terminal at your project root:

Terminal — npm
npm install @dropfix/sdk
Terminal — yarn
yarn add @dropfix/sdk
Terminal — pnpm
pnpm add @dropfix/sdk

Then add the init call to your app's root entry file (e.g. app/layout.tsx for Next.js, main.tsx for Vite/React, main.ts for Vue):

TypeScript / JavaScript
import { DropFix } from "@dropfix/sdk";

DropFix.init({
  key: "YOUR_PUBLIC_KEY",
});

Option C — ESM CDN (no build step)

For projects without a bundler — vanilla HTML, static Astro pages, or any setup where you want ES-module imports straight from a CDN. Paste this anywhere inside your <head> or just before the closing </body>:

HTML — paste in <head> or before </body>
<script type="module">
  import { DropFix } from "https://cdn.jsdelivr.net/npm/@dropfix/sdk/dist/dropfix.esm.js";

  DropFix.init({
    key: "YOUR_PUBLIC_KEY",
  });
</script>

Where to paste it by framework

Framework / tool

Next.js App Router

Where to paste

app/layout.tsx — inside <head> (script tag) or top of layout (npm init)

Framework / tool

Next.js Pages Router

Where to paste

pages/_app.tsx or pages/_document.tsx — inside <Head>

Framework / tool

React (Vite / CRA)

Where to paste

src/main.tsx or src/index.tsx — call DropFix.init() before render

Framework / tool

Vue 3 / Nuxt

Where to paste

main.ts (Vue) or plugins/dropfix.client.ts (Nuxt) — call DropFix.init()

Framework / tool

Svelte / SvelteKit

Where to paste

src/routes/+layout.svelte — call DropFix.init() in <script>

Framework / tool

Angular

Where to paste

src/main.ts or AppModule — call DropFix.init() on app start

Framework / tool

Astro

Where to paste

src/layouts/Layout.astro — inside <head> with the script tag

Framework / tool

Plain HTML

Where to paste

Your main HTML file — script tag in the <head>

Framework / tool

Webflow

Where to paste

Project Settings → Custom Code → Head Code

Framework / tool

Bubble

Where to paste

Settings → SEO / Metatags → Script / meta tags in header

Framework / tool

WordPress

Where to paste

Appearance → Theme Editor → header.php — inside <head>

Framework / tool

Shopify

Where to paste

Online Store → Themes → Edit code → theme.liquid — inside <head>

How to know it is working

  1. 1Open your app in a browser.
  2. 2Click a few buttons and visit a few pages.
  3. 3Go to the DropFix dashboard and open your workspace.
  4. 4Look for a green SDK Connected notification within 60 seconds.
  5. 5Check that the live event feed shows the clicks you just made.

Localhost testing

When the SDK detects localhost / 127.0.0.1, events are not recorded on the dashboard — we keep test traffic out of your production stats. To verify your integration while developing, open your browser DevTools console: every event fires as a [DropFix SDK] event_name line with the full payload. Once you deploy to a real domain, events start flowing into Live Now / Users / Signals as normal.

Domain allow-list — one thing to know before you deploy

DropFix maintains a per-workspace list of approved domains for security. The first production domainthat sends an event is auto-added — you don't need to configure anything for your first deploy. But if you later ship to a new domain (custom subdomain, www vs apex, staging vs prod, a domain rename), you need to add it manually at Settings → Security → Allowed domains before deploying. Events from unlisted domains are rejected with a clear console message, but the dashboard simply shows no traffic until the domain is added.

No-code website builders

Webflow, Squarespace, Wix, and most website builders have a custom code or header code section. Paste the script tag snippet (Option A) there. You do not need to edit any files.