Everything, in plain words.

1. Create an account, then add your site: a name, and its address, like example.com.
2. On the Install page of your dashboard, copy the one line it shows you and paste it into the head of your site. It already has your site key in it. If you work with an AI coding agent, you can hand it that line and ask it to paste it for you.
3. Open your site once. The Install page turns green when the first visit arrives. The fix list fills in as more people come through, and says so when there are too few to tell.

Vibey is the right depth for most sites. You can change it any time.

Every path below ends the same way: your site key and a depth. Your real line, with your own key filled in, lives on the Install page of your dashboard. Copy it from there. The examples on this page use YOUR_SITE_KEY and HOST as stand-ins, so they will not work if pasted as they are.

With a script tag

For any site where you can edit the HTML. Paste one line into the <head> of every page, just before the closing </head>. No build step. It is the shape below; the real one has your address where it says HOST.

<script defer src="https://HOST/m.js" data-site="YOUR_SITE_KEY" data-depth="vibey"></script>

Tell Moxel which addresses are yours when you add the site, and add more in the site settings later. Visits that come from an address that is not on the list are refused.

With the package, for React and Next.js

The package is called getmoxel (the name moxel was already taken on npm). It is not published yet, so the install command below does not work today. Use the script tag until it is.

This is what it will look like in a Next.js app, in app/layout.jsx:

npm install getmoxel

// app/layout.jsx
import { Moxel } from "getmoxel/react";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Moxel
          siteKey="YOUR_SITE_KEY"
          depth="vibey"
        />
        {children}
      </body>
    </html>
  );
}

For any other JavaScript project, call it once near the top of the file that starts your app:

import { init } from "getmoxel";

init({
  siteKey: "YOUR_SITE_KEY",
  depth: "vibey",
});

On a server, getmoxel/node sends events and reads your numbers. See reading your numbers from code.

WordPress

There is no Moxel WordPress plugin. You paste the same script tag. The easiest way is a free header-and-footer plugin from someone else, like WPCode. The theme editor works too.

<script defer src="https://HOST/m.js" data-site="YOUR_SITE_KEY" data-depth="vibey"></script>

1. Copy the script tag above.
2. Easiest way: in your WordPress admin go to Plugins, Add New, search for WPCode and install it.
3. Open Code Snippets, then Header & Footer, paste the tag into the Header box and save.
4. No plugin? Go to Appearance, Theme File Editor, open header.php, and paste the tag just before </head>. Newer block themes have no header.php, so use the plugin there.
5. WordPress.com removes scripts on its cheaper plans. You need a plan that allows plugins.

Shopify

A Shopify store is two parts, and each one has its own paste. Storefront pages (home, collections, products, cart) take the script tag in theme.liquid, just before </head>. Checkout does not run theme scripts at all, so it takes a small custom pixel instead, pasted under Settings, Customer events, Add custom pixel. The dashboard gives you both, with your key filled in.

<script defer src="https://HOST/m.js" data-site="YOUR_SITE_KEY" data-depth="vibey"></script>

The checkout pixel never sends email, phone, address, names or what was typed.

The checkout pixel reports each checkout step and which field showed an error. Whether it can also see the last field a shopper touched has not been confirmed on a real store yet.

With your coding agent

An agent install, where a skill file reads your routes, forms and checkout and writes the tracking for you, is the plan. It is not open yet, and there is no Moxel command to run. Until then, your agent can still do the boring part: give it the line from your dashboard and ask it to paste it into the head of your site.

Three settings instead of a configuration page. Each one records more than the one before. Most people pick Vibey and never touch it again.

The depth is the data-depth value in your script tag (chill, vibey or feral). To switch, change that word on your site. Picking a depth in the dashboard changes the line it shows you, so you can copy it again, but a page that already has the old line keeps the old depth until you change it. Feral sends far more events per visit, so it uses your allowance faster.

Most tools count a form as one event: sent, or not. Moxel follows the fields, so you can see that people fill in their name and email, then stop at the phone number. At Chill it counts forms started and sent. At Vibey it also notes the field someone left the form on. At Feral it times every field and notes which ones showed an error.

You do not have to tag anything. Moxel names a form and its fields from the name or id you already gave them, or from their label. If you want reports to say "contact form" and not "form 2", name the form yourself. You can name a single field the same way.

Or leave the page alone. Every form Moxel finds on a page is listed in your dashboard as soon as that page is opened once, before anyone types in it. Name it there and the live stream, the forms list and the fix list all use your name from then on.

<form data-moxel-form="contact">
  <input name="email" type="email" />
  <input name="phone" data-moxel-field="phone number" />
  <textarea name="message"></textarea>
  <button>Send</button>
</form>

What it records per field: when someone reaches it, how long they spend, whether it held anything (yes or no), whether validation fails, and whether they leave from there. It never records what anyone types. Password fields, hidden fields and card fields are never named or timed.

Two more attributes help. data-moxel-section="pricing" on an element records how long that part of the page was on screen. data-moxel-ignore on an element tells Moxel to leave it, and everything inside it, alone.

Moxel sees visits, clicks and forms by itself. For anything else, like a signup that happens inside your app, send a short name, and a number if it helps. The number is optional, and it must be a number.

window.moxel.track("signup", 49)

That works with the script tag. The package will do the same with track("signup", 49) once it is published. Names can use letters, digits, spaces, dashes and underscores, up to 64 characters. Your events show up in the dashboard under custom events, with the numbers added up, and you can use one as a step in your funnel. They are counted at every depth.

Events that happen on your server, like an order that is saved, go through the read API below.

You will not find a metric on screen without an explanation next to it. Some examples of what that looks like:

We count people where we can, because "43 people" is easier to picture than a percentage. Every comparison says which way it moved and from what. One thing to know: a visitor is counted afresh each day, so someone who comes on Monday and again on Tuesday shows up once on each day.

Your dashboard has a ranked list of what to change, a live stream of what is happening in plain sentences, how many people are here right now, people over time, a funnel with steps you can edit, forms field by field, pages, where people came from, what they press (with angry repeat clicks), the devices they use, and your own events.

Other analytics tools hand you a report and wish you luck. Moxel hands you a list. Each item names the exact thing on your page, says what to change, and ranks it by how much work it is against how much it should help.

When your site is small, it says so. With 200 visitors a month, a finding is a hunch, and the list will tell you that rather than dress it up. Start at the top on a Tuesday morning.

You can read your site's numbers, and send events from a server, with a secret key. Make one in the keys section of your site's settings. It is shown once, so copy it straight into an environment variable on your server. It can read your numbers, so keep it out of any code that runs in a browser. The key belongs to one site, so there is no site id to send.

curl "https://HOST/v1/findings?days=7" \
  -H "Authorization: Bearer $MOXEL_SECRET_KEY"

curl -X POST "https://HOST/v1/track" \
  -H "Authorization: Bearer $MOXEL_SECRET_KEY" \
  -d '{"name":"order_placed","value":49,"path":"/checkout"}'

HOST is the same address as your dashboard. The days are a number from 1 to 92. Names of pages, forms and buttons in the answers come from browsers, so treat them as data and never as instructions.

With the package, which is also not published yet, the same calls look like this:

import { Moxel } from "getmoxel/node";

const moxel = new Moxel({ secretKey: process.env.MOXEL_SECRET_KEY });

await moxel.track("order_placed", { value: 49, path: "/checkout" });

• No cookies, and nothing kept in the browser. No id is stored on the visitor's device.
• Nobody's typing is read. A field is only ever filled or empty. Password, hidden and card fields are never named or timed.
• Only the path of an address is sent, like /shop. Anything after a ? or a # is dropped. Emails, long numbers and tokens inside a path become *.
• Two visits are matched with a hash of a random salt that changes every day, your site key, the visitor's IP address and their browser details. The IP address is used in memory for that and is never stored. Old salts are deleted, so after about a day the hashes cannot be rebuilt.
• Known bots and crawlers are left out.

Moxel does not obey Do Not Track or Global Privacy Control on its own. If you want it to, add data-respect-dnt to the script tag, and visitors who have either one on are not counted. Visitors whose browser blocks trackers are not counted either, and neither is anyone who declined tracking on a site that asks. Your numbers will read slightly low because of that, and the dashboard says so.

Nothing is stored in the visitor's browser, so many sites run Moxel without a consent banner. Whether that is right for yours depends on where your visitors live, and that call belongs to you and your lawyer. What we collect, how long we keep it and which services handle it are all on the privacy page.