Install

EkhaneMark is one script tag. Use the line from your project's Settings & install page; it contains the project key. The same line works on localhost, staging and live. Whether it should be on the live site at all is your call: see Keep it off the live site.

Plain HTML, PHP, Laravel, Django, Rails

In the layout file every page uses, just before </body>:

<script src="https://ekhanemark.com/w.js" data-project="your-project-key" async></script>

Next.js

App Router: in app/layout.tsx (or src/app/layout.tsx):

import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://ekhanemark.com/w.js" data-project="your-project-key" strategy="afterInteractive" />
      </body>
    </html>
  );
}

Pages Router: put the same <Script> in pages/_app.tsx, after <Component {...pageProps} />.

React, Vue, Svelte, Solid (Vite)

Paste the line into index.html at the project root, before </body>. Client-side routing is followed automatically: pins update when the route changes.

Nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [{ src: "https://ekhanemark.com/w.js", "data-project": "your-project-key", async: true }],
    },
  },
});

WordPress

With the free WPCode plugin: Code Snippets → Header & Footer → Footer, paste the line, save. Or add it to your theme's footer.php before </body>.

Shopify, Webflow, Wix, Squarespace

Use the site's custom code setting for the end of the page body (Webflow: Site settings → Custom code → Footer code; Shopify: edit theme.liquid before </body>).

Check that it works

1. Add the site's address to the project (see Site addresses and modes).
2. Press Open site next to that address in the dashboard. The toolbar should appear at the bottom of the page within a second or two.
3. Not there? See Troubleshooting.

Keep it off the live site (recommended)

Most teams only need EkhaneMark where they review: localhost and staging. Load the line only there, and the live site never downloads anything from EkhaneMark. Why that matters is explained in Security.

Next.js: set NEXT_PUBLIC_EKHANEMARK=on in .env.development and on the staging server, and leave it out of the live build:

{process.env.NEXT_PUBLIC_EKHANEMARK === "on" && (
  <Script
    src="https://ekhanemark.com/w.js"
    data-project="your-project-key"
    strategy="afterInteractive"
  />
)}

Vite apps: set VITE_EKHANEMARK=on the same way and add the script from main.ts instead of index.html:

if (import.meta.env.VITE_EKHANEMARK === "on") {
  const s = document.createElement("script");
  s.src = "https://ekhanemark.com/w.js";
  s.dataset.project = "your-project-key";
  s.async = true;
  document.body.appendChild(s);
}

WordPress, Shopify, Webflow and the like: add the line to the staging copy only. If the client has to review the live site itself, keep the line there and set that address to Review.

Content Security Policy

If the site sends a Content-Security-Policy header, allow your EkhaneMark address in script-src, connect-src, img-src and media-src. The widget adds its own styles, so style-src needs 'unsafe-inline' too:

script-src 'self' https://ekhanemark.com;
connect-src 'self' https://ekhanemark.com;
img-src 'self' data: blob: https://ekhanemark.com;
media-src 'self' blob: https://ekhanemark.com;
style-src 'self' 'unsafe-inline';

Make pins sturdier (optional)

EkhaneMark finds elements without any help, but a stable attribute on important elements makes matching exact even after big redesigns. It recognises data-testid, data-fb, data-test, data-cy and data-qa:

<button data-testid="checkout">Pay now</button>

To keep something out of screenshots, add data-ekhanemark-private. Password inputs and card fields are hidden automatically.