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

What to paste

The script tag is the only code that runs inside your app. It loads the DropFix tracking library in the background after your page has appeared.

Script tag

<script
  src="https://cdn.dropfix.in/sdk.min.js"
  data-pk="YOUR_PUBLIC_KEY"
  async>
</script>

Replace YOUR_PUBLIC_KEY

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

Where to paste it by framework

Framework / tool

Next.js App Router

Where to paste

app/layout.tsx - inside the <head> tag

Framework / tool

Next.js Pages Router

Where to paste

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

Framework / tool

React Create React App

Where to paste

public/index.html - inside the <head> tag

Framework / tool

Vue 3 / Nuxt

Where to paste

index.html or nuxt.config.ts head section

Framework / tool

Svelte / SvelteKit

Where to paste

src/app.html or src/routes/+layout.svelte <svelte:head>

Framework / tool

Angular

Where to paste

src/index.html - inside the <head> tag

Framework / tool

Plain HTML

Where to paste

Your main HTML file - inside the <head> tag

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>

Framework / tool	Where to paste
Next.js App Router	app/layout.tsx - inside the <head> tag
Next.js Pages Router	pages/_app.tsx or pages/_document.tsx - inside <Head>
React Create React App	public/index.html - inside the <head> tag
Vue 3 / Nuxt	index.html or nuxt.config.ts head section
Svelte / SvelteKit	src/app.html or src/routes/+layout.svelte <svelte:head>
Angular	src/index.html - inside the <head> tag
Plain HTML	Your main HTML file - inside the <head> tag
Webflow	Project Settings -> Custom Code -> Head Code
Bubble	Settings -> SEO / Metatags -> Script / meta tags in header
WordPress	Appearance -> Theme Editor -> header.php - inside <head>
Shopify	Online Store -> Themes -> Edit code -> theme.liquid - inside <head>

How to know it is working

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

Localhost behavior

If you are testing on localhost, events will not appear in the dashboard. They only show in your browser developer console. Deploy to a live URL to see dashboard events.

No-code website builders

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