Standards

Adoptable Pets — Adopt-a-Pet

Links out to an org's Adopt-a-Pet shelter page, with an optional live widget when a shelterId is available.

Example

Animal Friends of the Valleys (Wildomar, CA) is a real rescue whose public listings are used below to demonstrate this adapter with real-world data. This template and 4leggedIT are not affiliated with Animal Friends of the Valleys.

Adoptable Pets

Adopt-a-Pet listings

Open Adopt-a-Pet

Or view all pets on Adopt-a-Pet, GetBuddy or Petfinder.

Apply to Adopt

Standard

- Use `mode="adoptapet"` (or the standalone `AdoptAPetEmbed`) for a site whose listings live on Adopt-a-Pet rather than Petfinder/GetBuddy/PawPlacer.

- `listingsUrl` is the org's Adopt-a-Pet shelter page — strip tracking query params (utm_*, gclid, gbraid, gad_*) before using it as a canonical link.

- `shelterId` is the numeric ID in that URL's slug (e.g. `74343` from `/shelter/74343-org-name`). When set, renders Adopt-a-Pet's real "Pet Scroller" widget — their script sets a global `AAPPetScrollerSettings` object and uses `document.write()`, so it's mounted inside an isolated iframe (`srcDoc`) rather than injected into the page directly, matching the exact embed code Adopt-a-Pet issues per shelter. `scrollerWidth`/`scrollerHeight` default to their own defaults (450×320).

- The "Or view all pets on..." cross-link line is the no-JS-safe fallback — it always renders as a plain link regardless of whether `shelterId`'s widget loads.

- Standard helper line is part of the adapter (`Or view all pets on Adopt-a-Pet`) — cross-links to `petfinderUrl`/`getbuddyUrl`/`pawPlacerUrl` render alongside it automatically when those props are set.

- Component: `template/src/components/patterns/AdoptAPetEmbed.tsx`, wired into `AdoptablePetsSection.tsx` as mode `"adoptapet"`.