Embedding Animals
Display animals on your external website using embeddable widgets
Overview
Embed individual animals or a grid of available animals on your website. The embed system generates an iframe code you can copy and paste into any webpage.
Accessing the Embed Tool
For a Single Animal
- Open an animal's detail page
- Click the Embed button in the sidebar (Overview tab)
For an Animal Grid
- Navigate to the Animal Management page
- Click Embed Animals in the header
Embed Types
Single Animal
Displays one animal with customizable detail level. Best for:
- Featuring a specific animal on a blog post
- Highlighting a pet of the week
- Embedding on partner websites
Animal Grid
Displays multiple available animals in a responsive grid. Best for:
- Your main adoptable animals page
- Partner shelter websites
- Community bulletin boards
Configuration Options
Templates (Single Animal Only)
Choose how much information to display:
| Template | Fields Included |
|---|---|
| Compact | Photo, name, breed, status |
| Standard | + Age, gender, size, adoption fee |
| Full | + Description, personality, compatibility, medical info |
Field Visibility (Single Animal Only)
After choosing a template, toggle individual fields on or off:
- Photos
- Name, Breed
- Age, Gender, Size
- Adoption Fee
- Description, Personality
- Good with Kids/Dogs/Cats
- Medical Needs
- Spayed/Neutered status
Grid Options
Configure the animal grid display:
- Show Age - Toggle age display on/off
- Show Gender - Toggle gender display on/off
- Max Animals - Limit how many animals appear (1-100)
Theme
Choose between:
- Light - White background, dark text
- Dark - Dark background, light text
Select the theme that matches your website.
Sizing
Configure the embed dimensions:
Width:
- Auto - Let the iframe determine its width
- 100% - Full width of container
- Custom - Specify exact pixel width (200-1200px)
Height:
- Default is 600px for single animal, 800px for grid
- Set custom height (200-2000px)
Action Button
Configure what happens when visitors click the action button:
| Option | Behavior |
|---|---|
| Transfur form | Links to your Transfur adoption application |
| Custom URL | Links to your own website or form |
| No button | Removes the action button entirely |
Button Label: Customize the button text (default: "Apply to Adopt")
Generating the Code
- Configure all options as desired
- Review the preview code in the Embed Code section
- Click the Copy button to copy the code
Adding to Your Website
Paste the embed code into your website's HTML:
<iframe
src="https://transfurapp.com/embed/your-org/animal/abc123?template=standard&theme=light"
height="600"
frameborder="0"
style="border: none;"
></iframe>Common Platforms
WordPress:
- Add a Custom HTML block
- Paste the iframe code
Squarespace:
- Add an Embed block
- Paste the iframe code
Wix:
- Add an HTML iFrame element
- Paste the code
Static HTML:
- Paste directly into your HTML file
URL Parameters
The embed URL supports these parameters:
| Parameter | Values | Description |
|---|---|---|
template | compact, standard, full | Detail level (single only) |
hideFields | Comma-separated field IDs | Fields to hide |
showAge | true, false | Show age (grid only) |
showGender | true, false | Show gender (grid only) |
limit | 1-100 | Max animals (grid only) |
theme | light, dark | Color theme |
action | transfur, custom, none | Button behavior |
actionUrl | URL | Custom button destination |
actionLabel | Text | Button text |
Best Practices
- Match your site theme - Use light or dark theme to match your website
- Right-size the embed - Use 100% width for full-page embeds
- Keep it simple - Compact templates work well in sidebars
- Use full template - For detailed pet pages where space isn't limited
- Update regularly - Embeds automatically show current data
- Test responsiveness - Check how embeds look on mobile devices
Troubleshooting
Embed Not Displaying
- Verify the animal is set to Available status
- Check that your organization has an active subscription
- Ensure the animal has at least one photo
Wrong Information Showing
- Embeds display real-time data from your animal records
- Update the animal's profile to see changes immediately
Layout Issues
- Adjust width and height settings
- Use 100% width for responsive behavior
- Increase height if content is cut off