Widget de Mascotas | PetFi Developers

code PetFi Developers

Widget de Mascotas en Adopción

Muestra las mascotas de tu fundación en tu propio sitio web con solo 3 líneas de código.

rocket_launch

Inicio rápido

Copia y pega este código en tu sitio web. Reemplaza TU_FOUNDATION_ID con el ID de tu fundación en PetFi.

<div id="petfi-foundation-rescues"></div>
<script src="https://petfi.io/widgets/foundation-rescues-widget.js?v=20260925"></script>
<script>
  PetFiFoundationWidget.init({
    target: "#petfi-foundation-rescues",
    foundationId: "TU_FOUNDATION_ID"
  });
</script>

fingerprint

¿Dónde encuentro mi Foundation ID?

Inicia sesión en tu dashboard de PetFi

Ve a Configuración

Tu Foundation ID aparece en la sección "Información de la cuenta"

info

También puedes contactarnos por Instagram @petfiapp y te enviamos tu ID.

tune

Parámetros

Parámetro Tipo Default Descripción

target string #petfi-foundation-rescues Selector CSS del contenedor

foundationId string requerido ID de tu fundación en PetFi

limit number 24 Cantidad inicial de mascotas a mostrar

species string all Filtrar: "dog", "cat" o "all"

code

Ejemplos

Solo perros, máximo 6

PetFiFoundationWidget.init({
  target: "#mis-perros",
  foundationId: "TU_ID",
  species: "dog",
  limit: 6
});

Solo gatos

PetFiFoundationWidget.init({
  target: "#mis-gatos",
  foundationId: "TU_ID",
  species: "cat"
});

Múltiples widgets en una página

<div id="perros"></div>
<div id="gatos"></div>

<script src="https://petfi.io/widgets/foundation-rescues-widget.js?v=20260925"></script>
<script>
  PetFiFoundationWidget.init({ target: "#perros", foundationId: "TU_ID", species: "dog" });
  PetFiFoundationWidget.init({ target: "#gatos", foundationId: "TU_ID", species: "cat" });
</script>

api

API REST (opcional)

Si prefieres construir tu propia UI, puedes consumir el endpoint directamente:

GET https://petfi.io/api/foundation/{foundationId}/rescues

Query params:
  limit    número (default 50, max 200)
  offset   número (default 0) — paginación
  species  "dog" | "cat" | omitir para todas
  status   default "published" · "all" · lista CSV
           valores: draft, published, adopted, deceased
  token    requerido solo si status incluye "draft"

Filtrar por estado

# Solo publicados (comportamiento por defecto)
GET .../rescues

# Estados públicos (separado por comas)
GET .../rescues?status=published,adopted,deceased

# Incluir borradores → requiere token
GET .../rescues?status=all&token=TU_TOKEN

Paginar (recorre hasta hasMore=false)

# Página 1
GET .../rescues?status=all&token=TU_TOKEN&limit=100&offset=0

# Página 2 → usa "nextOffset" de la respuesta anterior
GET .../rescues?status=all&token=TU_TOKEN&limit=100&offset=100

Respuesta:

{
  "items": [
    {
      "id": "abc123",
      "name": "Luna",
      "species": "dog",
      "breed": "Mestizo",
      "status": "published",
      "photoUrl": "https://...",
      "slug": "luna-abc123",
      "city": "Santiago",
      "age": "2 años",
      "size": "Mediano",
      "tags": ["Juguetón", "Sociable"],
      "daysWaiting": 45,
      "isNew": false
    }
  ],
  "count": 100,
  "offset": 0,
  "total": 240,
  "hasMore": true,
  "nextOffset": 100,
  "foundationName": "Fundación Patitas",
  "foundationSlug": "fundacion-patitas"
}

Cada item incluye "status" (draft, published, adopted o deceased). Por defecto la respuesta trae solo los publicados; usa el parámetro status para recibir los demás estados y filtra del lado de tu aplicación. Los borradores (draft) son datos privados: incluirlos exige un token de acceso; sin token, "draft" se omite y recibes el resto. Para catálogos grandes, pagina con limit + offset: recorre incrementando offset (usa "nextOffset") hasta que "hasMore" sea false. El orden es estable (más recientes primero).

info

¿Quieres mostrar TODOS los rescatados de PetFi (no solo los de tu fundación), con filtros por región y especie? Revisa el widget de rescatados.

auto_awesome

Características

shield

Estilos aislados

Shadow DOM evita conflictos con los estilos de tu sitio

devices

Responsive

Se adapta automáticamente a cualquier ancho de pantalla

touch_app

Interactivo

Cards clickeables, botón "Cargar más" y CTA a PetFi

speed

Rápido

Datos cacheados en servidor, carga en menos de 1 segundo

money_off

Gratis

Sin costos adicionales para fundaciones verificadas

¿Necesitas ayuda? Escríbenos a contacto@petfi.io o por Instagram @petfiapp