URL: /quickstart

---
title: Quickstart
description: Get scored pageviews flowing into your dashboard in minutes
---

This tutorial gets your first scored pageview into the dashboard. You create a project, paste the beacon into your page, load it in a browser, and watch the observation land in Logs. It takes a few minutes and needs only a publishable key.

By the end you will have a live observation with a score, a decision, and a user-agent classification.

<Steps>
  <Step title="Create a project and a publishable key">
    Open the [dashboard](https://formshield.dev/app) and create a project for the site you want to track. In the project's **Settings**, create a **publishable key**. It looks like `fs_pub_live_…` and is safe to expose in the browser.

    Copy the full key — you paste it into the beacon next.
  </Step>

  <Step title="Paste the beacon into your page">
    Add this `<script>` tag to your page's HTML, just before `</body>`. Replace `fs_pub_live_…` with your key.

    ```html
    <script
      async
      src="https://api.formshield.dev/js/formshield.js"
      data-fs-project-key="fs_pub_live_…"
      data-fs-action="pageview"
      data-fs-mode="pageload"
    ></script>
    ```

    `data-fs-mode="pageload"` records exactly one scored pageview on load and does no form handling. The tag is `async` and auto-initializes — there is no other code to write.
  </Step>

  <Step title="Load your page">
    Open the page in a browser. On window load the beacon collects browser and automation signals and posts one `page.view` observation to FormShield. There is no visible UI and nothing blocks rendering.

    A real human visit scores low and resolves to `allow`.
  </Step>

  <Step title="Watch it land in the dashboard">
    Open the project's **Logs** in the dashboard. FormShield scores the pageview instantly at the edge; the observation appears in Logs within a few minutes, once events sync from the edge buffer. It carries a `score`, a `decision` (`allow` for a normal browser), the `reasons` that fired, and a user-agent classification (browser, OS, device).

    Click the observation to see the full IP profile and signal breakdown.
  </Step>
</Steps>

## What you just recorded

The observation carries the scoring result FormShield computed at the edge.

| Field | Example | Meaning |
| --- | --- | --- |
| `score` | `0.09` | Risk from `0.0` (clean human) to `1.0` (almost certainly a bot). |
| `decision` | `allow` | `allow` below `0.45`, `review` from `0.45`, `block` from `0.8`. |
| `reasons` | `[]` | Rules that fired. A clean human pageview has none. |
| `action` | `pageview` | The label from `data-fs-action`. |

A visit from an automation tool tells a different story — `webdriver` automation pushes the score past the block threshold:

```json
{
  "score": 0.93,
  "decision": "block",
  "reasons": ["automation_detected", "ua_bot", "bot:automation"]
}
```

## Next steps

<CardGroup cols={2}>
  <Card title="Pageview tracking" icon="chart-line" href="/guides/pageview-tracking">
    Every beacon attribute, the three modes, and the full observation shape.
  </Card>
  <Card title="Server reporting" icon="server" href="/guides/server-reporting">
    Capture AI crawlers and bots that never run JavaScript.
  </Card>
  <Card title="Next.js" icon="atom" href="/guides/nextjs">
    Add the beacon with `next/script` in the App Router.
  </Card>
  <Card title="React and TanStack Start" icon="layers" href="/guides/react">
    SPA and full-stack integration patterns.
  </Card>
</CardGroup>