PetPoint's Online Help Guide has been moved to the Pethealth Community!

 

For the most up-to-date version of this Help Guide's content:

 

First sign into PetPoint

Then click Support > Community

 

Once you are signed in to Pethealth Community, you can access the most recent version of this article by visiting the Help Guide, or by using the search.

 

 

What is PetPoint's Adoptable Search I-frame?

Display adoptable animal records on your organization's website.

 

PetPoint’s Adoptable Search I-frame provides live adoptable pet data to your website, giving the world information about pets that are available in your shelter or rescue. Because it’s real-time, your website will be instantly updated when changes are made in PetPoint, such as when a pet is adopted.

 

There are two parts to the Adoptable Search iframe:

 

 

"Mike" is an example of what the I-frame adoptable animal record could look like.

 

 

How to Set up PetPoint's Adoptable Search Iframe

Use an Iframe to display the details in your PetPoint database on your organization's website.

 

 

 

Introduction

Follow these steps to add PetPoint’s Adoptable Search I-frame to your website.  There are additional customization options in PetPoint setup that are outlined at the end of this help article.  

 

For your convenience, we have also created an Adoptable Search Quick Setup Guide for simple copy/paste installation of the basic version of the code.  

 

The full Adoptable Search Iframe documentation that you are currently reading on this page provides much more thorough instructions, definitions, and many customization options.

 

Step 1 - Access Your Website

You will need to have access to edit the actual HTML code of pages on your website – either via your website provider’s Administrative utilities (ex. Convio’s PageBuilder) or by editing the files locally in a software application such as Dreamweaver and posting them to your site.  

 

Step 2 - Get Your Code

You can generate the Adoptable Search code using the Test page found here -  http://ws.petango.com/webservices/testAdoptableSearch2.htm  This page is also a good way to experiment with parameters and test your CSS files.

 

 

The HTML code for the I-frame has the following format:

 

 

 

So now that you know what the code looks like, let’s break it down so you can decide what you want to change.

 

What is the Source Page?

The source page is contained in this part of the code:  

 

src="http://ws.petango.com/webservices/adoptablesearch/wsAdoptableAnimals2.aspx?

 

The ‘src’ attribute points to a page in PetPoint (wsAdoptableAnimals2.aspx) where the animals will be displayed. You will not have to edit any of this code.  You will, however, need to supply search parameters in the query string (the part of the URL after “?”).  

Special Note Regarding Your Code Options

By default, the code for the source of information (petango) and for the css (look of the iframe) are both using the HTTP protocol.  Your website administrator can set the code to use the HTTPS protocol, which may resolve issues with devices and browsers that only allow access to secure sites, or provide a warning when visiting a standard site that it considers unsecured.  To prevent problems, update your code to "https://":

 

<iframe
src="https://ws.petango.com/webservices/adoptablesearch/wsAdoptableAnimals2.aspx?species=All&gender=A&agegroup=All&location=&site=&onhold=A&orderby=ID&colnum=3&css=
&authkey=ENTER_AUTH_KEY_HERE&recAmount=&detailsInPopup=No&featuredPet=Include&stageID=
" width="800" height="700" scrolling="auto"></iframe> 

 

What are the Search Parameters?

The search parameters are contained in this part of the code:

 

species=All&gender=A&agegroup=All&location=&site=&onhold=A&orderby=ID&colnum=3

 

They define the results returned through the iframe.  You can modify and even delete the parameters if you don’t require them.  Below is a list of each of the different parameters.

 

Species (Required)

Code Examples -

species=All  OR  species=Dog  OR  species=Cat

 

Gender (Required)

 

Code Examples -

&gender=A  OR  &gender=M  OR  &gender=F

 

 

Age Group (Required)

 

 

Note: Animals without a Est. Birthdate in PetPoint will only show if Age Group is set to "All"

 

Code Examples -

&agegroup=A  OR  &agegroup=UnderYear  OR  &agegroup=OverYear

 

Location (Optional)

Do not include this parameter at all if you wish to display animals from all locations within PetPoint.  If you do wish to filter your listing by a specific location, include one of your locations in PetPoint (e.g., Cat Room) as shown in the samples below.

 

Code Examples -

&location=Adoption  OR  &location=Cat Room

 

Site (Optional)

Do not include this parameter at all if you wish to display animals from all sites within PetPoint or if you do not have sites setup in your database.  If you wish to filter your listing by a specific site, include one of your Site IDs from the Add/Edit Site screen in Admin Options as shown in the example below.  

 

Note:  Within PetPoint, Site IDs are in the format S00000123, however; only use the actual number in the parameter, such as “123”.

 

Code Example -

&site=123

 

On Hold (Optional)

 

Code Examples -

&onhold=A  OR  &onhold=Y  OR  &onhold=N

 

Order By (Required)

 

Code Examples -

&orderby=Name  OR  &orderby=ID

 

Columns (Optional)

Number of columns in the list of adoptable pets.

 

Code Examples -

&colnum=3  OR  &colnum=5

 

Record Amount (Optional)

Code Examples -

&recAmount=100

 

Details in Popup (Optional)

This is an optional parameter for adoptable search, but if you are making a featured pet iframe, it's highly recommended.  This is important when you have a smaller iframe because the pet's record is generally larger in size than the iframe itself.

 

Code Examples -

&detailsInPopup=Yes

 

Featured Pet (Optional)

See Featured Pets for more information.

 

Code Examples -

&featuredPet=Include

 

Stage ID (Optional)

 

Code Examples -

&stageID=Available

 

 

If you do not wish to use the optional parameters, simply omit them from your query string.  So, if we didn’t want to filter by Site or Location in our original example query, it would look like this:

 

species=All&gender=A&agegroup=All&onhold=A&orderby=ID&colnum=3

 

When Should I Use Multiple I-frames?

You can change the search parameters at anytime and use as many I-frames as you want.  For example, you can have one page pointing to cats that include an I-frame with parameters set for cats, and then have another page just for dogs.  It will allow website visitors to sort through your inventory much easier than if you had one page with all your animals on it.  

 

What is the AuthKey?

Your organization has been issued a unique authentication key.  Simply copy and paste the key it’s in entirety into the Auth Key field of the test page, or just replace the “ENTER_AUTHKEY_HERE” text in the sample code from this help article.  Your AuthKey can be found anytime in PetPoint under Admin > Admin Options > Setup > Online Animal Listing Options.

 

 

&AuthKey=ENTER_AUTHKEY_HERE > &AuthKey=15bhcp9ssu4q7b24a8qnvei4eccoaqq2090625841jbt870v46

 

 

 

What is the CSS Parameter?

The next section of the code looks for a custom style sheet or CSS for the information displayed in the I-frame.  

 

If your organization wishes to change the look of the information displayed to best match your website’s color scheme, then simply add the URL to the CSS file you defined.

 

If you are happy with the way the I-frame looks, you will not need to touch this part of the code.

 

 

What are Width and Height Tags?

 

After the CSS code, there are two tags that will control the size of your I-frame and how it is displayed on your website.  

 

width="700" height="700" or width="90%" height="800"

 

To change the size of the I-frame, simply change the numerical values within the quotations.  You may use either exact numbers or use percentages. 

 

Note:  Percentage of width can generally be set at 95% or less for mobile responsive webpages.  

 

 

Sample Codes

If you are unable to or uninterested in using the test page referenced in Step 2, you can also highlight and copy a relevant code sample as your starting point:

 

Code Sample #1 – NO Location and Site Parameters, Default Settings on Test Page (Most widely used code sample)

<iframe src="http://ws.petango.com/webservices/adoptablesearch/wsAdoptableAnimals2.aspx?species=All&gender=A&agegroup=All&location=&site=&onhold=A&orderby=ID&colnum=3&css=&authkey=ENTER_AUTHKEY_HERE&recAmount=&detailsInPopup=No&featuredPet=Include&stageID=" width="800" height="700" scrolling="auto"></iframe>

 

Code Sample #2 – Including Site Parameter  (for multi-site Shelters only)

<iframe src="http://ws.petango.com/webservices/adoptablesearch/wsAdoptableAnimals2.aspx?species=All&gender=A&agegroup=All&location=&site=ENTER_SITEID_HERE&onhold=A&orderby=ID&colnum=3&css=&authkey=ENTER_AUTHKEY_HERE&recAmount=&detailsInPopup=No&featuredPet=Include&stageID=" width="800" height="700" scrolling="auto"></iframe>

 

Code Sample #3 – Including Location Parameter (only showing available animals from one location)

<iframe src="http://ws.petango.com/webservices/adoptablesearch/wsAdoptableAnimals2.aspx?species=All&gender=A&agegroup=All&location=ENTER_LOCATION_HERE&site=&onhold=A&orderby=ID&colnum=3&css=&authkey=ENTER_AUTHKEY_HERE&recAmount=&detailsInPopup=No&featuredPet=Include&stageID=" width="800" height="700" scrolling="auto"></iframe>

 

Code Sample #4 – Suggested Code Changes for Mobile Responsive Webpages

<iframe src="http://ws.petango.com/webservices/adoptablesearch/wsAdoptableAnimals2.aspx?species=All&gender=A&agegroup=All&location=&site=&onhold=A&orderby=ID&colnum=&css=&authkey=ENTER_AUTHKEY_HERE&recAmount=&detailsInPopup=No&featuredPet=Include&stageID=

" width="95%" height="95%" scrolling="auto"></iframe>

*Note:  Your website's HTML version, .CSS, or JavaScript may contain code that overrides the above settings.    These are suggested selections based on user feedback.

 

 

 

Step 3 - Finalize Your I-Frame Location & Code Options on Your Website

 

As previously indicated, you will need to be able to edit the actual HTML code of pages on your website.  

 

There are several ways to display the Adoptable Search I-frame on your web pages.  You could create a single page for your adoptable animals (e.g. /availableanimals.html) and placing a single I-frame set to ‘species=All’.  Another more popular option is to create separate pages for each species type (e.g. availableDogs.html, availableCats.html etc.  You can then change the species tag for each page ‘species=Dog’/’species=Cat’.

EXAMPLE

This example illustrates the process for adding the Adoptable Search I-frame code samples above to a simple existing webpage called AvailableCats.html.

 

 

Note: Your code will most likely look more complex, the important aspect of this is to decide where you want the I-frame to appear.

 

Next you must replace the ENTER_AUTHKEY_HERE text with the AuthKey displayed on the Online Animal Listing Options page in Admin Options.  

 

Make sure there are no spaces before or after the AuthKey – spaces will result in an error.  

 

 

 

Since this is the AvailableCats.html page, the search string needs to be modified to show only cats.  

 

 

The above steps are identical for creating the AvailableDogs.html page, except that the species parameter is set to “Dog.”

 

Step 4 - Publish!

The final step of this process is to save your website file, upload it to your server and confirm that it works.  

 

Mobile Responsive IFrames - Best Practice Setup

 

Although every website is different, and your needs vary greatly from shelter to shelter, we have outlined some best practices to use below: 

 

Columns

For your iframe to be responsive to the page size, it is has been found that the setting that works best is for the column number part of the code is adjusted to blank or zero.  You can do this manually by removing the numeral from the “&colnum=” section.  Or you can clear the default number (3) from the test page before generating the code. 

 

iFrame Height & iFrame Width

You may also find that updating the default height and width to work as a percentage of the webpage rather than a fixed number of pixels allows for the iframe to respond to the mobile device.    In the example below, we updated the default height and width (700x800) to contain “95%” before generating the code, but as always you can manually adjust this in the code if you prefer.  You may use any percentage number, but 95% or less is optimal to prevent extra scroll bars from appearing.  

*Note:  Your website's HTML version, .CSS, or JavaScript may contain code that overrides the above settings.    These are suggested selections based on user feedback.

 

 

 

 

What Animal Details will show?

Now that we’ve shown you how to install the I-frame technology onto your website, it’s important to understand which animals will be displayed as well as how to control and update their information in PetPoint. 

Showing / Hiding Animal Fields

You can choose which fields will be displayed on your adoptable animal listing and detail pages. 

 

By default, the following fields display on the animal listing pages: 

 

By default, the following fields will display on the animal detail pages: 

 

If you wish, you can choose to hide many of the above fields by applying a filter. These filters are a global, meaning they will apply to all listings and animal detail pages you setup.  To apply a filter, login into your PetPoint Database as an Administrator and go to Admin > Admin Options > Setup > Online Animal Listing Options – then view the Adoptable Search tab.

Select or deselect the different fields as you would like them to appear on your website & click Submit to save the changes.  Please note that changes you make here will not be immediate – it will take 24 hours for the changes to take effect on your website.

Full documentation for configuring this page to work with your iframe can be found in the Online Animal Listing Options topic.

 

 

Memo

Descriptions can also be added to the animals on display on your Adoptable Search I-frame.  Simply search for the animal under any Animal Search – ex. Edit Animal, and then click on the Memo tab to open the Animal Memo window.  Under Type, Select Petango/Adoption Description and record this animal's adoption story.  When completed, click on Save or Add Memo.  Your animal memo descriptions will then appear on your Adoptable Search I-frame.  

 

 

Which Animals Are Included?

Only animals that are in the “Available” Stage within PetPoint will appear in the Adoptable Search I-frame by default.  

 

Note: Active animals with the Intake type of Clinic are excluded from all Adoptable Search Listings, regardless of Stage.

 

Animals in the stage "Available"

Under Stage, change the animal’s Stage to or from “Available” and click Submit to save the change.  The animal will appear or disappear from the iframe within minutes.  When animals leave your care through Adoption, Return to Owner, Transfer or some other Outcome, they will automatically be removed from the I-frame.  

 

 

How to Add Other Stages in the Adoptable Search Iframe Listings

Only animals that are in the “Available” Stage within PetPoint will appear in the Adoptable Search I-frame by default.  Your Administrators can add to the list of Stages that are shown in the iframe on Admin Options > Online Animal Listing Options.  For example, you may want to include animals in your stage “Foster Program” online, because they are available for adoption.

 

Note: Active animals with the Intake type of Clinic are excluded from all Adoptable Search Listings, regardless of Stage.

How to display your "Other" animals

Animals other than Dogs & Cats need to be mapped, or grouped into the Petango animal search groups, species, and breeds that will display to potential adopters who are searching the web for their new pet.  Petango and your iframe use the same labels that display the variety of animals adopters may find at our many shelter partners.  These are different than the labels PetPoint uses.  Be sure to visit Add/Edit Field Values to map animals to Petango associated breed.

 

   Back to Top

 

Last updated December 2017