# Pet Adoption Toolkit

Creating a toolkit involves selecting a layout, filling out the form to describe what is included in your toolkit, and selecting the fields to include, among other choices.  


:::success
**Where do I find it?**

You can find the [Pet Adoption Toolkit](https://manage.rescuegroups.org/toolkit_keys) page by going to **Features > Pet Adoption Toolkit**.

:::


:::tip
**API Exports Required**

To use the Pet Adoption Toolkit, your organization must have API [Animal Exports](/doc/7aa0da6a-c177-4de5-bc89-8eb96d71bb82) **enabled.**

:::


++++++++
==Click here for information on permissions==

The following actions are available for the JavaScript Pet Adoption Toolkit with the specified service and user roles:

| Action | Description | Services | User Roles |
|--------|-------------|----------|------------|
| View   | Able to view Pet Adoption Toolkit keys | Data Management<br>Pet Adoption Portal<br>Web Site | Animal Admin |
| Manage Keys | Able to request, edit and delete Toolkit keys | Data Management<br>Pet Adoption Portal<br>Web Site | Animal Admin |

++++++++
  


:::tip
At this time, the **Pet Adoption Toolkit** as discussed in this article is for the use of RescueGroups.org partner rescues and shelters only.

:::

**Overview**


:::tip
If you are using the RescueGroups.org **Website Service**, you do not need to use the **Pet Adoption Toolkit** to display your animals on your website, since your pet list is integrated into the service.

:::

The **Pet Adoption Toolkit** is a collection of HTML and JavaScript code that anyone can easily paste into web pages on their website to display their pet list.  Here are the benefits:

* Keeps visitors on your website: A visitor to your website stays on your website when they click to view additional information about a pet, rather than being taken to a separate pet adoption site.
* No update delay: The pet list through the Toolkit is updated immediately when you make changes to animal records in your RescueGroups.org account.
* Integrates seamlessly into your existing website: The Toolkit actually becomes part of your website by using the same colors and theme as the rest of your website.
* No advertisements! We don't advertise any products or services through the Toolkit.
* Easy to set up: You can start using the Toolkit by following a few simple steps.
* **The Pet Adoption Toolkit** is completely and totally free for the users of any of our services.

# Create a Toolkit


:::info
The RescueGroups.org **Pet Adoption Toolkit** is designed to be an integral part of your organization's website. It's not as simple as the "pet list scrollers" because we provide a solution that not only integrates with your website, but that keeps your visitors on your website, and keeps them coming back. Because of this, RescueGroups.org offers to help you customize the Toolkit for your organization and for your website. Once you create the **Toolkit** and copy and paste the HTML code onto a web page on your website, contact [RescueGroups.org Support](https://support.rescuegroups.org/) and we will help you with any further customizations!

:::

Creating a toolkit involves selecting a layout, filling out the form to describe what is included in your toolkit, and selecting the fields to include.  This process results in the creation of HTML code, which you then paste into a website.  Included in the code is a *key* that identifies *your* toolkit to the RescueGroups.org server.

Follow these directions to create a new **Toolkit** and generate a key:


1. From the **Features > Pet Adoption Toolkit**, select **Create a Toolkit**.  This action takes you to an information form, **Create a Toolkit**, that you will fill out to ensure your toolkit is customized to your needs.  
   ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/483d2eb3-9b79-4c49-ba14-2e451cf5e7c5/image2018-2-22_18-3-9.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261024%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261024T150000Z&X-Amz-Expires=86400&X-Amz-Signature=6c8ee4e8daeaf2b80936679b8e7a244e89972ef03ecd4468947066aada564f43&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =555x251")  
   The **Create a Toolkit** page opens.  
   ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/e2d4da4d-f231-46d8-b9a8-d30de2a79b45/create-a-toolkit-screen.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261024%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261024T150000Z&X-Amz-Expires=86400&X-Amz-Signature=c76be70bcab2c86ea317e8cd59c96efe28e7f1b9b2f4bfda4d0edcf3b70a66e9&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =565x829")  

   
   1. Enter the following information for the **Toolkit o**n the **Create a Toolkit** page.
      
      | **Item** | **Description** |
      |------|-------------|
      | **Name** | A descriptive name for this **Key**. This is how you will identify this specific **Toolkit**. |
      | **Website Name/Title** | Enter the name of the website where this **Toolkit** will be hosted. This is used for page titles and social sharing. We recommend that you use the name of your organization for the **Title**. |
      | **Search layout** | Select the layout/style you would like to use for the search page of your **Toolkit**.  Click the **Preview the Layouts** link to see examples of the layouts. |
      | **Pet detail layout** | Select the layout/style you would like to use for the pet detail page.  You can see examples by using the **Preview** link. Select **None** if you do not want to have a pet detail page. |
      | **Website URL** | Enter the URL for the website where this **Toolkit** will be hosted. The URL must be the direct link to the web page. This URL is used by social sharing to redirect the visitor to your website (most often to a specific pet on your website). |
      | **Included Statuses** | Select the individual statuses that you want to display in this **Toolkit**. Each status you include must also be a public status by the organization. |
      | **Included Species** | Select the individual species that you want to make public in this Key.  |
      | **Included Fields** | Select the individual pet data fields that you want to make public in this Key. These fields are then included for display on the list or grid view, not the animal detail page.  |
      | **Sort by and Sort order** | Select the field you would like to sort the results by (default), and the order (ascending or descending). |
      | **Include Courtesy Listings** | Select if you would like to include, exclude or include only your courtesy listings in this Toolkit. |
      | **Pet detail page** | Select if you would like to use the Inline or bPopup option for your pet detail page. The inline option will replace the search content with the animal detail content, but the bPopup will open a "popover" with the animal detail information. |
      | **Pets per row and Pets per page** | Select how many pets should be shown per row and how many pets per page. Not all search layouts use both options – For example, the list layouts only use the Pets per page option. |
      | **Default postal code** | Enter the default postal/zip code we should use for animal searches if we are unable to determine the visitors' geographic location. |
      | **Show the search form** | Select if you would like to show the search form.  If you select **No** the search fields will be hidden on the **Search** page (except in Grid 1). |
      | **Search results style** | Select the style for the search results pictures.<br>**Table:** the pictures will keep their original aspect ratio<br>**Fixed:** the pictures will be zoomed/cropped to fit the fixed size (some of the pictures may not be visible)<br>**Columns:** (coming soon)  |
2. Copy the resulting HTML code.
3. Click **Save Toolkit** to save your selections.
4. Copy and paste the HTML code into your web page:

   
   a. Click the HTML icon.  
       ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/099eea3f-4380-4a46-a919-e0134dc04494/html-button.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261024%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261024T150000Z&X-Amz-Expires=86400&X-Amz-Signature=99a53b38e0f68d928c4a89976b0f4abada966f7f39810bd84edc0345065af374&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =333x30")
   b. Copy the code into your web page where you want the Toolkit to appear.  
       ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/66a50c3a-30a2-455c-9469-6d79ee975470/copy-html.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261024%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261024T150000Z&X-Amz-Expires=86400&X-Amz-Signature=4abb604df51394c4e57f5ea7ab59b537c1eeeafce308bad187c6d58bcf747ab7&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =786x302")
   c. Click **Done** to save the Toolkit and move on to style the Toolkit and add Advanced Filters.  


:::warning
Please be aware only **one** Toolkit can be added per web page.

:::

# About the Available/Included statuses and fields

Two sections that you should understand in the toolkit creation process are the **Available Statuses** and the **Available Fields** sections. (See below.)

To use these sections, click the down arrow next to the field, such as **Available Fields**, and use your cursor to highlight a selection. Then on the right of the field, click the green plus arrow  ![(plus)](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/7066612c-b9ba-4bef-b5e6-3c46d46490de/add.svg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261024%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261024T150000Z&X-Amz-Expires=86400&X-Amz-Signature=e8327d2230805a0846074eca686dab80b1c925f4833ff7e89ac59bc8d368144d&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =16x16") to add it. It will be copied from the **Available Fields** to the **Included** **Fields** section and will be added to your layout.   


:::info
**Included** fields are displayed on the list/grid view, not the animal detail page. 

:::


 ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/9c72e1ba-634c-4ed2-90ce-b4728166de98/available%20included%20fields%20toolkit.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261024%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261024T150000Z&X-Amz-Expires=86400&X-Amz-Signature=5b096e359d56bd02401757c955cba17cbb3dfb54cd6c578ed7b6d4e4c95f0d64&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =228.5x87")

Be selective in choosing fields to display on the toolkit. When you include a field, the toolkit displays the *result* of that entry, not the name of the entry and the result. Therefore, if you select a field whose result could be yes or no, you may see the example below displayed on your toolkit search layout. Your visitor has no idea what that yes or no means. Likewise, if you include the adoption fee, it will not display as a monetary value, simply as a number, and a visitor may not immediately grasp what that number means. We recommend you put the adoption fee in the description instead of in the toolkit layout. 

Please note that some layouts display the information differently.

 ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/18c0b982-99fe-439f-86d7-c81de012865e/yes%20or%20no%20fields.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261024%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261024T150000Z&X-Amz-Expires=86400&X-Amz-Signature=915a89f96b4f06be384172490b079fd6b2eeba5470c48a2235c59a9a6bed9118&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =111.5x170")

Fields that do work well in the layouts include:

* Activity level
* Age
* Birthdate
* Breed
* Color

Search grid 1 includes the breed and the coat length.

 ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/974b1298-0190-484a-a0db-5589bc50feaa/search%20grid%201%20included%20fields.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261024%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261024T150000Z&X-Amz-Expires=86400&X-Amz-Signature=722f0013cd8f45a8f7d5e566002f5d90b51b11f1cfa56c8656d40d68b6ce4f66&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =173.5x142")

If you add the name, age, and sex fields, the result below displays.

 ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/65e7b4a4-4a95-462b-b6cb-e29e599d4941/search%201%20included%20fields%20plus%20basic.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261024%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261024T150000Z&X-Amz-Expires=86400&X-Amz-Signature=8d24a60de11b7342bf4c9d0de9b4e579732cfd5b95962783c8be844f79e9909c&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =118x187")

Grid 3 has a default of name, breed, and coat length, just as does grid 1. Adding the name, birthdate and sex results in the display below.

 ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/38fc7747-c81b-4a0f-95b0-4e1cf2a7df66/search%203%20included.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261024%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261024T150000Z&X-Amz-Expires=86400&X-Amz-Signature=9a715b189b4bdb689d50130f3fac74d56dbf1a16fa8f74006bf6cefbea78783a&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =103.5x163")

#   
Update Toolkit styles

You can style your toolkit to match the colors and width for your website. As you make changes, you can refresh your browser window to see those changes reflected on your website.  Follow these instructions to update the styles for your Toolkit.


1. From the main Toolkits page, click on the **Name** of your toolkit you would like to style.  
     
   ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/bd8c357c-90d5-4e29-9323-fe369b308674/tk-click-name.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261024%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261024T150000Z&X-Amz-Expires=86400&X-Amz-Signature=e894d434ce82ef65f3203cd4788850371d0575c2f3d1e7128b74a0d853cfb83c&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =247x25")
2. Click **Update Styles.**  
     
   ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/12855be8-2995-4b66-9f63-6eeccc628bf2/tk-update-styles.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261024%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261024T150000Z&X-Amz-Expires=86400&X-Amz-Signature=c6ea8866de294dc244c04e2477407803cf2c441e69bbae3930d41c210609fd03&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =88x49")  
     

   
   a. You can edit the **Search Container Options**
   b. You can enter your own **Custom CSS**  
         
       ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/16a57588-41ab-4d7d-ab7c-4a4f60ea5d3c/tk-edit-styles-save.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261024%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261024T150000Z&X-Amz-Expires=86400&X-Amz-Signature=5e3a372ddc2d45b9e8fe22d141639bd2c57f0c496a5ebf2c766ad56d2beb9396&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =623x474")
3. Click **Save Styles and Colors.**


:::success
For advanced styling, see [Custom styling of Toolkit](/doc/fb79a446-a08c-4856-8584-c915c4fc5b88)

:::

---

**Documents**

- [Toolkit Minimum Requirements](https://guides.rescuegroups.org/s/4a2c57ff-3678-4bc0-8cf0-d6d45df023da/doc/toolkit-minimum-requirements-uzwDuv9djz)
- [Images in Toolkit](https://guides.rescuegroups.org/s/4a2c57ff-3678-4bc0-8cf0-d6d45df023da/doc/images-in-toolkit-AEDH1L2Kh3)
- [Custom styling of Toolkit](https://guides.rescuegroups.org/s/4a2c57ff-3678-4bc0-8cf0-d6d45df023da/doc/custom-styling-of-toolkit-Td1hibbXNh)
- [About Toolkit Layouts](https://guides.rescuegroups.org/s/4a2c57ff-3678-4bc0-8cf0-d6d45df023da/doc/about-toolkit-layouts-hsCl5vSsg2)
- [Upgrade Toolkit](https://guides.rescuegroups.org/s/4a2c57ff-3678-4bc0-8cf0-d6d45df023da/doc/upgrade-toolkit-PQoZtHwMih)
- [Troubleshoot Toolkit](https://guides.rescuegroups.org/s/4a2c57ff-3678-4bc0-8cf0-d6d45df023da/doc/troubleshoot-toolkit-guJo0xbba1)