Skip to main content Accessibility Feedback

Documentation

Getting started

1. Include Fetch on your site

Unzip fetch.zip. You need to include two files on your site: fetch.js and fetch.css. How you do this will vary depending on which CMS (NationBuilder, Weebly, Squarespace, etc.) you use.

<link rel="stylesheet" type="text/css" href="fetch.css">
<script src="fetch.js"></script>

2. Add the markup to your page

On the page where you want your Petfinder listings to appear, add a <div> with the .fetch-container class. You should include a message for people who’s browsers aren’t supported by Fetch—ideally a link to your listings on Petfinder.

<div class="fetch-container">
    Anything you want to display if Fetch isn't supported by the visitor's browser.
</div>

3. Initialize Fetch

In the footer of your page, after the content, initialize Fetch. There’s only three things you need to include:

  1. Your Petfinder API key
  2. Your Shelter ID
  3. The number of pets to display (if your organization has more than 25 pets)
<script>
    fetch.init({
        key: "YOUR API KEY",
        shelter: "YOUR SHELTER ID",
        count: 25,
    });
</script>

And that’s it, you’re done. Nice work!

Note: If you don’t have one already, you’ll need to create a Petfinder API key here.

An example

<link rel="stylesheet" type="text/css" href="fetch.css">
<script src="fetch.js"></script>

<div class="fetch-container">
    <a href="http://awos.petfinder.com/shelters/AA11.html">View our pets on Petfinder.</a>
</div>

<script>
    fetch.init({
        key: "7zQqMRcGFeznhF3BgyH9",
        shelter: "AA11",
        count: 25,
    });
</script>

Getting started with WordPress

If you’re using WordPress, getting started with Fetch is even easier.

  1. From the WordPress Dashboard, upload fetch.zip under Plugins > Add New > Upload Plugin.
  2. Activate Fetch in the Dashboard under Plugins.
  3. On the page where you want your Petfinder listings to appear, use the [fetch][/fetch] shortcode, passing in your API key and shelter ID (and number of pets if greater than 25):

    [fetch key="YOUR API KEY" shelter="YOUR SHELTER ID" count="25"]
    Anything you want to display if Fetch isn't supported by the visitor's browser.
    [/fetch]

A WordPress Example

[fetch key="7zQqMRcGFeznhF3BgyH9" shelter="AA11"  count="25"]
<a href="http://awos.petfinder.com/shelters/AA11.html">View our pets on Petfinder.</a>
[/fetch]

Options and Settings

You can update Fetch defaults and options using fetch.init() or the WordPress shortcode.

Options with fetch.init();

These are the defaults. You only need to include the ones you want to change.

fetch.init({
	// API Defaults
	key: null, // Your Petfinder API key
	shelter: null, // Your shelter ID
	count: 25, // The number of pets to display (must be larger than)

	// Template info
	allPetsTitle: 'Our Pets', // Header for the "All Pets" page
	allPetsText: '', // Optional text to display on the "All Pets" page
	adoptionFormLink: null, // The URL of your adoption form
	adoptionFormText: 'Fill out an adoption form', // Text for your adoption form link
	adoptionFormClass: '', // CSS classes for your adoption form link
	showFilters: true, // Display filters to hide and show pets by categories
	filterAnimals: true, // Display animal filters
	filterSizes: true, // Display size filters
	filterAges: true, // Display age filters
	filterGenders: true, // Display gender filters
	filterBreeds: true, // Display breed filters
	filtersToggleClass: '', // CSS class for the button that toggles filter visibility on smaller screens
	hasSidebar: false, // Set to true for a special layout on narrow pages

	// Miscellaneous
	loading: 'Fetching the latest pet info...', // What to display while retrieving data from Petfinder
	noPet: '<div>Sorry, but this pet is no longer available. <a href="{{url.all}}">View available pets.</a></div>', // What to display if a pet is no longer listed in Petfinder ({{url.all}} is replaced with a link to the "All Pets" view)

	// Pet photos
	noImage: '', // An image to show if no image is available for a pet

	// Animal Text
	animalUnknown: 'Not Known', // Text to use if animal type is unknown

	// Size Text
	sizeUnknown: 'Not Known', // Text to display if size is unknown
	sizeS: 'Small', // Text to display for small pets
	sizeM: 'Medium', // Text to display for medium pets
	sizeL: 'Large', // Text to display for large pets
	sizeXL: 'Extra Large', // Text to display for extra large pets

	// Age Text
	ageUnknown: 'Not Known', // Text to display when age is unknown
	ageBaby: 'Baby', // Text to display for baby pets
	ageYoung: 'Young', // Text to display for young pets
	ageAdult: 'Adult', // Text to display for adult pets
	ageSenior: 'Senior', // Text to display for senior pets

	// Gender Text
	genderUnknown: 'Not Known', // Text to display when gender is unknown
	genderM: 'Male', // Text to display for male pets
	genderF: 'Female', // Text to display for female pets

	// Options Text
	optionsSpecialNeeds: 'Special Needs', // Text to display for pets with special needs
	optionsNoDogs: 'No Dogs', // Text to display for pets that aren't good with dogs
	optionsNoCats: 'No Cats', // Text to display for pets that aren't good with cats
	optionsNoKids: 'No Kids', // Text to display for pets that aren't good with kids

	// Multi-Option Text
	optionsNoDogsCatsKids: 'No Dogs/Cats/Kids', // Text to display for pets that aren't good with dogs, cats, or kids
	optionsNoDogsCats: 'No Dogs/Cats', // Text to display for pets that aren't good with dogs or cats
	optionsNoDogsKids: 'No Dogs/Kids',  // Text to display for pets that aren't good with dogs or kids
	optionsNoCatsKids: 'No Cats/Kids', // Text to display for pets that aren't good with cats or kids
});

Options with the WordPress shortcode

You would add these to the [fetch][/fetch] shortcode. These are the defaults. You only need to include the ones you want to change.

Example:

[fetch key="7zQqMRcGFeznhF3BgyH9" shelter="AA11" allpetstitle="Our Dogs" showfilters="false"][/fetch]
// API Defaults
key="null" // Your Petfinder API key
shelter="null" // Your shelter ID
count="25" // The number of pets to display (must be larger than)

// Template info
allpetstitle="Our Pets" // Header for the "All Pets" page
allpetstext="" // Optional text to display on the "All Pets" page
adoptionformlink="null" // The URL of your adoption form
adoptionformtext="Fill out an adoption form" // Text for your adoption form link
adoptionformclass="" // CSS classes for your adoption form link
showfilters="true" // Display filters to hide and show pets by categories
filteranimals="true" // Display animal filters
filtersizes="true" // Display size filters
filterages="true" // Display age filters
filtergenders="true" // Display gender filters
filterbreeds="true" // Display breed filters
filterstoggleclass="" // CSS class for the button that toggles filter visibility on smaller screens
hassidebar="false" // Set to true for a special layout on narrow pages

// Miscellaneous
loading="Fetching the latest pet info..." // What to display while retrieving data from Petfinder
nopet="<div>Sorry but this pet is no longer available. <a href="{{url.all}}">View available pets.</a></div>" // What to display if a pet is no longer listed in Petfinder ({{url.all}} is replaced with a link to the "All Pets" view)

// Pet photos
noimage="" // An image to show if no image is available for a pet

// Animal Text
animalunknown="Not Known" // Text to use if animal type is unknown

// Size Text
sizeunknown="Not Known" // Text to display if size is unknown
sizes="Small" // Text to display for small pets
sizem="Medium" // Text to display for medium pets
sizel="Large" // Text to display for large pets
sizexl="Extra Large" // Text to display for extra large pets

// Age Text
ageunknown="Not Known" // Text to display when age is unknown
agebaby="Baby" // Text to display for baby pets
ageyoung="Young" // Text to display for young pets
ageadult="Adult" // Text to display for adult pets
agesenior="Senior" // Text to display for senior pets

// Gender Text
genderunknown="Not Known" // Text to display when gender is unknown
genderm="null" // Text to display for male pets
genderf="null" // Text to display for female pets

// Options Text
optionsspecialneeds="Special Needs" // Text to display for pets with special needs
optionsnodogs="No Dogs" // Text to display for pets that aren't good with dogs
optionsnocats="No Cats" // Text to display for pets that aren't good with cats
optionsnokids="No Kids" // Text to display for pets that aren't good with kids

// Multi-Option Text
optionsnodogscatskids="No Dogs/Cats/Kids" // Text to display for pets that aren't good with dogs" cats" or kids
optionsnodogscats="No Dogs/Cats" // Text to display for pets that aren't good with dogs or cats
optionsnodogskids="No Dogs/Kids"  // Text to display for pets that aren't good with dogs or kids
optionsnocatskids="No Cats/Kids" // Text to display for pets that aren't good with cats or kids

Setting Up in SquareSpace

A few customers have found setting this up in SquareSpace a bit unintuitive. Here’s a short video of me walking through a SquareSpace setup in case you get stuck.

Examples

To see working examples, check out the demos.

Support

Please use the issue tracker to report a bug or ask a question.

Common Issues

If you followed all of the instructions here and your pet listings still aren’t displaying, make sure that you have sharing with other websites and via the API enabled on Petfinder.org.