> ## Documentation Index
> Fetch the complete documentation index at: https://docs.allgoodhq.com/llms.txt
> Use this file to discover all available pages before exploring further.

# A complete example page

> One page that bridges a consent banner, loads the tag, captures a form and reports a conversion.

Every other page in this section explains one piece of this. Copy it, replace the four placeholders, and it works.

| Placeholder        | Replace with                | From                                                        |
| ------------------ | --------------------------- | ----------------------------------------------------------- |
| `mk.brand.com`     | Your connected domain       | [Connect a domain](/mk/developer/web-edge/connect-a-domain) |
| `agsk_REPLACE_ME`  | Your tracking key           | [Web tracking](/mk/developer/web-edge/web-tracking-tag)     |
| `f7k2m9qp`         | Your form's short id        | The form's Settings tab                                     |
| `window.__consent` | Your configured signal path | [Consent provider](/mk/developer/web-edge/consent-provider) |

```html theme={null}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Request a demo — Brand</title>

  <!--
    1. CONSENT FIRST.
    The tag reads this as soon as it starts up, so a value already here means
    no waiting at all. Replace the body with your real platform's callback.
  -->
  <script>
    window.__consent = window.__consent || {};
    function agSyncConsent(granted) {
      window.__consent = {
        analytics: !!granted,
        marketing: !!granted,
        necessary: true,
      };
    }
  </script>

  <!--
    2. THE CALL QUEUE, before the tag.
    Anything pushed here is replayed once the tag is ready, and push keeps
    working afterwards — so you never branch on whether it has loaded.
  -->
  <script>
    window.agq = window.agq || [];
  </script>

  <!--
    3. THE TAG.
    data-ag-key is needed for tracking. It is NOT needed for form capture.
  -->
  <script src="https://mk.brand.com/_ag/v1.js"
          data-ag-key="agsk_REPLACE_ME" async></script>
</head>

<body>
  <h1>Request a demo</h1>

  <!--
    4. YOUR OWN MARKUP.
    allGood never renders or restyles this. All it needs is the data-ag-form
    attribute and name attributes matching the form's fields.
    Do NOT add a honeypot field yourself — the script adds it.
  -->
  <form data-ag-form="f7k2m9qp" class="demo-form">
    <label>Work email
      <input type="email" name="email" required />
    </label>
    <label>First name
      <input type="text" name="firstName" />
    </label>
    <label>Company
      <input type="text" name="company" />
    </label>

    <!-- Hidden fields are captured like any other. -->
    <input type="hidden" name="utm_source" value="linkedin" />
    <input type="hidden" name="pageVariant" value="pricing-cta" />

    <button type="submit">Request a demo</button>
  </form>

  <!-- 5. WHERE THE OUTCOME MESSAGE GOES. Omit it to write your own copy. -->
  <p data-ag-form-status="f7k2m9qp" role="status" aria-live="polite"></p>

  <button id="calc">Open the pricing calculator</button>

  <script>
    // ---- 6. YOUR OWN EVENTS ---------------------------------------------
    document.getElementById("calc").addEventListener("click", function () {
      window.agq.push(["track", "Pricing Calculator Used", {
        seats: 250,
        plan: "enterprise",
      }]);
    });

    // If your site already knows who this is, say so. `email` is what
    // resolves them to a known person.
    // window.agq.push(["identify", { email: "ada@example.com" }]);

    // ---- 7. REACTING TO THE FORM ----------------------------------------
    document.addEventListener("allgood:form:submitted", function (e) {
      var d = e.detail; // { formId, status, submissionId, email, redirectUrl }

      // Fires BEFORE any success redirect, so a conversion tag still runs.
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({ event: "generate_lead", form_id: d.formId });
    });

    document.addEventListener("allgood:form:rejected", function (e) {
      var d = e.detail; // { formId, status, errors? }

      if (d.status === "unknown_source") {
        // Not the visitor's fault — a configuration problem.
        console.error("allGood: this form or origin is not accepting submissions");
      }
    });
  </script>
</body>
</html>
```

## What happens when someone loads it

The tag reads its own address and key, binds the form, fetches its configuration, adds the honeypot, starts watching for navigation, records the first page view — or holds it — and fires `allgood:ready`.

Then, depending on the visitor's answer:

| Consent         | The page view and the `track()` call               |
| --------------- | -------------------------------------------------- |
| Already granted | Sent immediately                                   |
| Granted later   | Held, then sent — nothing is lost                  |
| Denied          | Discarded, and nothing more is sent this page load |
| Never answered  | Held for a while, then dropped                     |

**The form submission is sent either way.** It's never gated on consent.

## Four checks

| Check                  | Where                               | Healthy                                   |
| ---------------------- | ----------------------------------- | ----------------------------------------- |
| The script loaded      | Console                             | `window.allgood.version` returns a string |
| Your origin is allowed | Network → the configuration request | It reports the origin as authorised       |
| The form is live       | Same response                       | It reports the form as registered         |
| Events are flowing     | Network → the event request         | Accepted                                  |

If there's no event request at all and no errors, the tag is holding events waiting for consent. Set the consent global to `true` in the console and reload to confirm.

## What this deliberately leaves out

|                             | Why                                                                   |
| --------------------------- | --------------------------------------------------------------------- |
| Any styling                 | Your form's presentation is entirely yours                            |
| The honeypot field          | The script adds it. Adding your own, or styling it visible, breaks it |
| The bot-check widget        | The script adds it when the form requires one                         |
| Disabling the submit button | The script owns the double-submit guard                               |
| A client timestamp          | Never accepted — allGood stamps when it received the event            |
| Any secret                  | The tracking key is public by design; nothing here is confidential    |

## Through GTM instead

Remove the tag `<script>` from `<head>` — the container injects it. Everything else is unchanged. See [Install with GTM](/mk/developer/web-edge/install-with-gtm).
