Integration guide

Sign up with Google — your client ID is shown on the dashboard Overview tab.

<script src="https://developers.myfellowpet.com/v1/id.js"></script>

The library auto-discovers any element with data-mfp-id. When the user authorizes, it populates any matching <input name="..."> on the page. The minimal version is just three attributes:

<button data-mfp-id
        data-client-id="<your-uid>"
        data-fields="pet_name,pet_breed,pet_age_years,pet_weight_kg">
  Fill with MyFellowPet
</button>

We don't style your button — you own your design system. But since “put a logo + two lines next to your form” is what most partners end up doing, here are two ready-to-paste variants (light and dark) that match how the official button renders on our own demos. Logo lives at https://developers.myfellowpet.com/v1/logo.png — no asset hosting required on your side.

Get Pet Datawith MyFellowPetlight mode

<button data-mfp-id
        data-client-id="YOUR_CLIENT_ID"
        data-fields="pet_name,pet_breed,pet_age_years,pet_weight_kg"
        style="display:inline-flex;align-items:center;gap:10px;
               padding:8px 14px 8px 8px;background:#fff;color:#0a0a0a;
               border:1px solid #e5e7eb;border-radius:12px;cursor:pointer;
               font-family:system-ui,sans-serif;box-shadow:0 1px 2px rgba(0,0,0,0.04);
               transition:background .15s;"
        onmouseover="this.style.background='#fafafa'"
        onmouseout="this.style.background='#fff'">
  <img src="https://developers.myfellowpet.com/v1/logo.png"
       alt="" width="32" height="32" style="border-radius:8px;">
  <span style="display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;">
    <span style="font-size:14px;font-weight:700;letter-spacing:-0.1px;">Get Pet Data</span>
    <span style="font-size:11px;font-weight:500;color:#6b7280;margin-top:1px;">with MyFellowPet</span>
  </span>
</button>

Get Pet Datawith MyFellowPetdark mode

<button data-mfp-id
        data-client-id="YOUR_CLIENT_ID"
        data-fields="pet_name,pet_breed,pet_age_years,pet_weight_kg"
        style="display:inline-flex;align-items:center;gap:10px;
               padding:8px 14px 8px 8px;background:#0a0a0a;color:#fff;
               border:1px solid #1f1f1f;border-radius:12px;cursor:pointer;
               font-family:system-ui,sans-serif;
               transition:background .15s;"
        onmouseover="this.style.background='#1a1a1a'"
        onmouseout="this.style.background='#0a0a0a'">
  <img src="https://developers.myfellowpet.com/v1/logo.png"
       alt="" width="32" height="32" style="border-radius:8px;">
  <span style="display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;">
    <span style="font-size:14px;font-weight:700;letter-spacing:-0.1px;">Get Pet Data</span>
    <span style="font-size:11px;font-weight:500;color:#a3a3a3;margin-top:1px;">with MyFellowPet</span>
  </span>
</button>

MFPID.fill({
  clientId: "<your-uid>",
  fields: ["pet_name", "pet_breed", "pet_weight_kg"],
  onSuccess: (data) => {
    // data = { pet_name: "Fluffy", pet_breed: "Golden Retriever", ... }
    setForm(data);
  },
  onError: (err) => console.error(err),
});

Fields you request get filtered server-side against your approved scope. Pick what you need in the dashboard's Field Selection tab; an MFP admin approves within one working day. See the full field catalog.

ai_summary is a paid scope. Instead of raw fields, you receive an interpreted paragraph:

“Bruno is a 5yo Lab, anxious around bigger dogs, due for vaccination in 3 weeks, prefers chicken over kibble.”

Email partners@myfellowpet.com to enable.

Requests from origins not on your allowed_domains list are rejected. Add domains in your dashboard Settings tab — admin reviews each new entry.

Every fill needs explicit consent. Pet parents see exactly which fields you're asking for, and can revoke any time. The audit log is parent-owned — partners don't see it.