SGA Review Tool

Review and annotate your deliverables in one place. Draw directly on designs, leave comments, and approve when you're ready — everything syncs with our project management system automatically.

How it works

1Your project manager sends you a review link specific to your project.
2Open the link, enter your name and email, and browse all deliverables.
3Draw on the areas you want to discuss and leave your feedback.
4When everything looks good, click Approve and your team is notified.

Looking for your review link?

Check your email or message thread from your SGA project manager. Review links look like: review.sga.team/1234567890

SGA Team — Open a review link

Build or edit deliverable markup

Skip hand-writing the [REVIEW] block. Fill out a form, preview the markup, and copy it or save it directly to an Asana task. Loading an existing task lets you edit its current deliverables.

Open markup builder →

Add requests to a deliverable

When a deliverable needs things from the client — a logo, the final domain, a link to their brand assets — mark those items up on the page and they appear as an answerable checklist in the review sidebar (“Needs attention from you”). The client types an answer, pastes a link, or uploads a file, and each response posts back to the Asana task. Answered items get a checkmark and strike through on the page.

Mark each item with data-sga-request attributes on any block element (div, li, section):

<li data-sga-request="logo-vector"
    data-sga-request-type="file"
    data-sga-request-label="Vector logo">
  Your logo as an SVG or AI file.
</li>

data-sga-request — a unique, stable id in kebab-case. Never change it once a client has answered (it links the response to the request).
data-sga-request-type — text, url, or file (file lets the client upload, or paste a link for large assets).
data-sga-request-label — optional short label for the sidebar (defaults to the element's text).

Include the reporter snippet once per page, just before </body>— it's the same one-line script used for height reporting:

<script src="https://review.sga.team/sga-review-height.js" defer></script>

See the example cover page →

Show reviewers a heads-up (notice banner)

A deliverable can show a sticky amber banner at the top of the Comments sidebar — for anything a reviewer should know before they start. The banner includes an “Open live page” link so they can see the real thing in a new tab, and it clears itself when they switch to a deliverable that doesn't declare one.

When to use it

Scroll-driven motion— scrollytelling, sticky/pinned scenes, parallax, “animate as you scroll.” The review frame lays the page out full-height and scrolls it as one piece (so annotations stay locked to the content), which means these effects don't play here. The page still renders fine — full-screen 100vhheroes are handled automatically — they just won't move. Point reviewers to the live page.
Anything else that only works live — video with sound, third-party embeds, multi-step interactions.
Any general note — “Copy is placeholder,” “Mobile layout still in progress.” It is not limited to animations.

Declare it any one of these ways (a bare / empty form uses default wording):

<!-- 1. meta tag (simplest) -->
<meta name="sga-review-notice"
      content="This page has scroll animations best viewed live.">

<!-- 2. data attribute on any element -->
<body data-sga-notice="...">       <!-- bare data-sga-notice = default text -->

<!-- 3. JS variable -->
<script>window.sgaReviewNotice = "..."  /* or = true for default text */</script>

Needs the same reporter snippet below, once per page. That's it — no change to the [REVIEW] block.

See it on the example cover page →

Iframe Content Reporter (optional)

For pages we build, add this to the page's HTML so the review tool can track exact content height and scroll position. Pages with the snippet render at their correct size on load (no infinite-scroll expansion) and annotations stay anchored when the reviewer clicks jump links. Third-party sites work without it — they fall back to expanding-on-scroll and annotations are fixed to the drawn position.

<script src="https://review.sga.team/sga-review-height.js" defer></script>

Where to paste it

Paste the copied code into the page's HTML, right before the closing </body> tag. For sites with a shared layout / template, paste it once in the template so every page gets it.

<body>
  <!-- page content -->
  ...

  <!-- paste the copied code here -->
</body>

Safe for any HTML page — the script only runs when embedded in an iframe, so it has zero effect on normal site visitors.