How-To SessionComplexity: EasyIntegrationsAdoptables

Display Your Adoptable Pets (Widgets)

Use a Petfinder or Adopt-a-Pet widget to show adoptables on your website.

Petfinder’s legacy API is deprecated, so Petfinder setup is widget-only.

Widgets are quick to launch, but give you less control over design.

Quick Path

Generate the pet-list widget in Petfinder or Adopt-a-Pet.
Copy the embed snippet (exactly as provided).
Send the snippet to 4leggedIT so we can embed it safely.

Step 1 — Generate your pet-list widget (Petfinder or Adopt-a-Pet)

➡ What this step does

Pet platforms like Petfinder and Adopt-a-Pet provide widgets you can embed on your website.

You’ll generate a snippet by filling out a short form inside your account.

📋 What to do

Choose the platform you use for your public adoptables (Petfinder or Adopt-a-Pet).
If you use Petfinder: log in to your Petfinder Pro account and open the widget generator: Custom Pet List widget (getting started)
If you use Adopt-a-Pet: generate your pet list widget using their instructions (iFrame or JavaScript): Embed your pet list widget (iFrame or JavaScript)
Complete the fields (organization/shelter, status, limit, optional display settings).
Copy the full embed snippet (or iFrame URL) the tool generates.
Before sharing publicly, anonymize it (replace org/shelter IDs with placeholders).

✅ What should happen

You have a widget snippet ready to share.

Step 2 — Send the widget snippet to 4leggedIT

➡ What this step does

The widget embed code is what we need to put adoptables on your website.

It does not require sharing any API keys.

📋 What to do

Decide where the widget should appear (usually an “Available Pets” page/section).
Send the embed snippet to 4leggedIT (copied exactly as the platform provides it).
Tell us if you want a title above the list (e.g., “Adoptable Dogs”) and any intro text.

✅ What should happen

We have everything needed to embed the widget.

Step 3 — Embed the widget on your website (technical notes)

➡ What this step does

Widgets can be script-based (Petfinder, Adopt-a-Pet generator) or iFrame-based (Adopt-a-Pet option).

To keep the website stable, embed it in a dedicated component and load any scripts safely.

📋 What to do

Easy (UI-only)

If it’s a script-based snippet: load the script once and only in the browser (avoid SSR errors).
If it’s an iFrame: set width to 100% for mobile friendliness and choose a sensible height.
Render the widget element/iFrame with the exact attributes/URL from the snippet.
Add a visible heading and short intro that always renders, even if the widget fails to load.

Hard/manual (optional, technical)

Optional reference for technical teams.

Implementation reference (technical teams)

Copy exactly as shown. Do not modify.

Expand to copy: Petfinder (anonymized example snippet)

Copy exactly as shown. Do not modify.

<!-- Pet List Widget - Start -->
<script src="https://www.petfinder.com/pet-scroller.bundle.js"></script>
<pet-scroller
  s3Url="https://dbw3zep4prcju.cloudfront.net/"
  apiBase="https://psl.petfinder.com/graphql"
  organization='["ORG_ID_HERE"]'
  status="adoptable"
  petfinderUrl="https://www.petfinder.com/"
  hideBreed="false"
  limit="24"
  petListTitle="">
</pet-scroller>
<!-- Pet List Widget - End -->

Expand to copy: Adopt-a-Pet (anonymized example iFrame URL)

Copy exactly as shown. Do not modify.

https://searchtools.adoptapet.com/cgi-bin/searchtools.cgi/portable_pet_list?shelter_id=SHELTER_ID_HERE&title=&color=green&clan_name=&size=450x320_list&sort_by=pet_name&hide_clan_filter_p=

AI helper prompt

Expand to copy: AI helper prompt

Copy exactly as shown. Do not modify.

Goal: Embed a pet-list widget into the website (Petfinder or Adopt-a-Pet).

Inputs I will provide:
- Petfinder widget embed HTML snippet (from Petfinder Pro) OR Adopt-a-Pet widget code / iFrame URL
- The page/section where it should appear (usually an “Available Pets” page)

Do this:
1) Add a clear section with heading + short intro text.
2) Embed the widget snippet:
   - If the snippet is script-based, isolate it to a dedicated component and do not allow user input.
   - Ensure the script is loaded once (idempotent) and only in the browser (no SSR crashes).
   - For Petfinder, render the <pet-scroller> element with the attributes from the snippet.
   - For Adopt-a-Pet, prefer their iFrame option when using website builders (set width to 100% for mobile).
3) Make it responsive (mobile friendly) and keep the rest of the page readable if the widget fails to load.
4) Pre-render-safe:
   - Ensure the heading and intro text render in the pre-rendered HTML (avoid hidden-first animation states).

✅ What should happen

The “Available Pets” page loads with a visible heading and intro text.

The widget loads adoptables (or fails gracefully without breaking the page).

Official References

Open these only if something doesn’t match your screen.

You do not need to read them to complete the guide.

Petfinder widget generator Adopt-a-Pet widget instructions

Related How-To Sessions

Publish With Cloudflare Pages + GitHub

Deploy reliably and connect your domain (Cloudflare Pages).

Cloudflare Account Setup

DNS access so your rescue controls its website foundation.

Want Us to Implement Your Pet Listings?

Send us your widget snippet and where it should go (usually an “Available Pets” page). We’ll implement it safely and test the page output.

Get in Touch Back to Resources