How to Use Pawlytics to List Available Pets On Your Website

Are you spending too much time manually updating your website with available pets? Thanks to Save SomeBunny rescue, I have a solution for you!

Save SomeBunny volunteers, Jess and Jaime, realized they were losing valuable time updating their website and adoption sites that could be better spent taking care of rabbits. So, they used the Pawlytics API to create a beautiful and elegant solution to display available rabbits on their website that is automatically updated by their Pawlytics database.

Jaime and Jess both have a background in technology. Jess is the founder of Menidae, a web development and graphic design agency. Jaime is a tech artist in the game industry. I’m going to go ahead and give a heads up to the non-technical people reading this, as I am one of you 😉. I am relaying how to do this from Jess and Jaime, so you may want to go ahead and forward this blog to your development, technical, and/or programming team members! They’ll know what to do! 😁

Jess has placed the code into a public Github for the WordPress puzzle pieces. She noted, the only thing required for this code is a response.json that is publicly accessible. Jess used the Ruby scrip by Pawlytics (linked here) to write her own Python script(s), they are run using cron and bash on the hour.

Read below for an explanation of the integration from Jess at Save SomeBunny:

The code is built using only Javascript, HTML, and CSS, with no additional libraries. This means it only relies on the basic languages used by all webpages. There are no dependencies beyond the JSON file created by the webserver, it doesn’t matter if the implementation is WordPress, Squarespace, or something custom.

The concept is what I like to think of as an “Independent Javascript User Interface element.” It’s “independent” because it doesn’t rely on anything provided by the website elsewhere (except that response.json) to do its job. It’s a “User Interface element” because it’s created and updated every time someone changes a filter or clicks on “Learn More.” It’s Javascript because that is the language used to do the majority of the heavy lifting.

First, we pull some basic information using the Pawlytics API via the server (we adapted a script provided by Pawlytics that grabs new information from Pawlytics every hour and generates a new response.json file):

Status
Pet ID
Pet Name
Pet Estimated Birth Date
Pet Weight Lbs
Pet Gender
Pet Images
Pet Description

This data is placed into a plain-text file that is publicly accessible from a URL on the website. On a different page of our choice (we will call this the Gallery Page for the sake of this example), using the bunnies.js file in the repository, the data is decoded for use on the website. There are several pieces to the puzzle, but the most exciting part is what is in bunny.js.

In this file, we process the data in a way that suits us — For example, grabbing only the first image from the pet images provided by Pawlytics. With each item from the above list, there was something different we wanted to do. Because of this, it’s important that anyone using this code carefully read the functionality and change it to suit their needs. We have three sizes for bunnies, for example, that are very different to the sizes needed for dogs. We also display the gender ‘Other’ as ‘Undetermined.’ As you can see, they are implementation-specific.

Finally, the code creates the elements visible to the user right on the spot in the Gallery Page. If all of the files provided in the repository are pasted on to the Gallery Page in the order recommended in bunnies.html, alongside some changes to the URLs (such as the link for ‘Adopt’), implementation-specific changes to bunny.js, the code should be able to work its magic and generate a gallery!

Importantly

It’s doesn’t create pages for each pet, only displays a popup containing the description and an adoption link, as seen below.

It also might become very slow if there are many pets. In this case, pagination would be advised.
It expects a secure connection (https).
Confidence in working with web servers is recommended for interfacing with the Pawlytics API and generating the response.json file needed for this to function
And I would be remiss if I didn’t point out — The previously mentioned response.json should not include Pawlytics API credentials. That should be handled server-sid and stored in a file that is not publicly accessible. In the future, I hope to add our Python script for anyone to use as guidance.

Thank you, Jess and Jaime! We are SO impressed and thankful to both of you and Save SomeBunny for sharing this with us. We hope this helps save other organizations time while giving potential adopters a beautiful view of pets waiting for their furever home.

If you try this out for your rescue, send us your webpages to be featured!