The PawPlacer widget lets you add your pet listings and application forms to any website. Visitors can browse pets and submit applications without leaving your site.
Before You Start
- Make sure your organization profile is set to public in your Settings
- You'll need access to edit your website's HTML
Quick Start Guide
Which Widget Do You Need?
Full Widget - Shows everything (pets, forms, schedule, location)
- Best if you want a complete adoption center on your site
- No PawPlacer branding - completely your brand
Individual Components - Show just what you need
- Best if you already have a website design
- No PawPlacer branding - completely your brand
Full Widget Setup
Step 1: Get Your Code
- Go to Settings → Embeddable Widget
- Click the "Full Profile Widget" tab
- Copy the code snippet (it's personalized for your organization)
The code looks like this:
<div id="pawplacer-widget"></div>
<script src="https://pawplacer.com/embed"></script>
<script>
embedPawPlacer('your-account-id', 'pawplacer-widget');
</script>
Step 2: Add It to Your Website
For WordPress:
- Edit the page where you want pets to appear
- Add an "HTML" or "Custom HTML" block
- Paste the code
- Update/Publish the page
For Wix:
- Click "Add" → "Embed" → "HTML iframe"
- Click "Enter Code"
- Paste the code
- Click "Apply"
For Squarespace:
- Add a "Code" block to your page
- Paste the code
- Save the page
For Other Websites:
- Open your website editor
- Switch to HTML/Code view
- Paste the code where you want the widget
- Save and publish
Complete Example
If you're building a page from scratch, here's a full example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our Adoptable Pets</title>
</head>
<body>
<h1>Meet Our Animals</h1>
<!-- PawPlacer Widget goes here -->
<div id="pawplacer-widget"></div>
<script src="https://pawplacer.com/embed"></script>
<script>
embedPawPlacer('your-account-id', 'pawplacer-widget');
</script>
</body>
</html>
What Your Visitors Will See
When you add the widget to your site, visitors can:
- Browse Pets - See all your available animals with photos
- View Details - Click on any pet to see their full profile
- Submit Applications - Apply to adopt, foster, or volunteer
- Find Your Location - See your address and hours (if enabled)
- Donate to Wishlist - Support specific items you need
The widget automatically adjusts to phones and tablets, so it looks good on any device.
Controlling What's Displayed
The widget shows only what you've enabled in your Settings:
- Pet types (dogs, cats, etc.)
- Application forms (adoption, fostering, volunteering)
- Your location and map
- Your hours of operation
- Social media links
To change what appears, update your organization profile settings in PawPlacer.
Design and Branding
- The widget uses a clean, simple design that fits most websites
- Everything focuses on your organization, applications, and pets
Troubleshooting
Widget Not Showing?
- Check your profile is public - Go to Settings and make sure "Public Profile" is turned on
- Verify the code - Make sure you copied and pasted the entire code snippet
- Check your website - Some website builders block external scripts. Contact your web host if needed. If you are asked whether the widget supports CORS, the answer is yes.
- Give it space - The widget needs room to display. Make sure the containing area isn't too small
Widget Looks Wrong?
- Clear your browser cache
- Make sure you're using the latest code from your settings page
- The widget adapts to your website's width - try a wider container
Individual Components
Sometimes you don't need the full widget - maybe you just want to show your pets, or only need an adoption form. PawPlacer lets you embed individual components without any branding, giving you complete control over your website.
Available Components
You can embed these components individually:
- Pets Grid - Just your available animals
- Adoption Form - Only the adoption application
- Foster Form - Only the foster application
- Volunteer Form - Only the volunteer application
How Individual Components Work
Individual components:
- Automatically adjust their height to fit content
- Include no tracking or analytics
- Work perfectly on any website
- Let you use PawPlacer for management while keeping your brand front and center
Component Examples
Just Show Your Pets
Want to display only your available animals? Use this code:
<div id="pawplacer-pets"></div>
<script src="https://pawplacer.com/embed/component"></script>
<script>
embedPawPlacerComponent('pets', 'your-account-id', 'pawplacer-pets');
</script>
What visitors see:
- A clean grid of your available pets with photos
- Click any pet to see their full profile
- No forms or other elements - just pets
Perfect for:
- Adding a "Featured Pets" section to your homepage
- Creating a dedicated adoption page
- Showing pets in a sidebar or footer
Just the Adoption Form
Need only an adoption application? Use this:
<div id="pawplacer-adopter"></div>
<script src="https://pawplacer.com/embed/component"></script>
<script>
embedPawPlacerComponent('adopter', 'your-account-id', 'pawplacer-adopter');
</script>
What visitors see:
- Your custom adoption application form
- No pet listings or other content
- Form submits directly to your PawPlacer account
Perfect for:
- Adding to your existing adoption page
- Creating a dedicated "Apply to Adopt" page
- Including in blog posts about adoption
Just the Foster Form
Want to recruit fosters? Use this:
<div id="pawplacer-foster"></div>
<script src="https://pawplacer.com/embed/component"></script>
<script>
embedPawPlacerComponent('foster', 'your-account-id', 'pawplacer-foster');
</script>
What visitors see:
- Your custom foster application form
- Clean, professional appearance
- Submissions go straight to your PawPlacer dashboard
Perfect for:
- Foster recruitment campaigns
- Dedicated foster information pages
- Social media landing pages
Just the Volunteer Form
Need volunteer signups? Use this:
<div id="pawplacer-volunteer"></div>
<script src="https://pawplacer.com/embed/component"></script>
<script>
embedPawPlacerComponent('volunteer', 'your-account-id', 'pawplacer-volunteer');
</script>
What visitors see:
- Your volunteer application form
- Professional, easy-to-complete layout
- Applications appear in your volunteer management area
Perfect for:
- Volunteer recruitment pages
- Event signup pages
- Community outreach sites
Combining Components
You can use multiple components on the same page. For example, show pets and an adoption form:
<!-- Show available pets -->
<h2>Our Available Pets</h2>
<div id="pawplacer-pets"></div>
<!-- Show adoption form below -->
<h2>Ready to Adopt?</h2>
<div id="pawplacer-adopter"></div>
<!-- Add the script once at the bottom -->
<script src="https://pawplacer.com/embed/component"></script>
<script>
// Embed pets
embedPawPlacerComponent('pets', 'your-account-id', 'pawplacer-pets');
// Embed adoption form
embedPawPlacerComponent('adopter', 'your-account-id', 'pawplacer-adopter');
</script>
Component vs Full Widget
Use Individual Components when you:
- Want complete control over your website design
- Need just one specific feature
- Already have your own website layout
Use the Full Widget when you:
- Want everything in one place
- Don't have time to design custom pages
- Want the complete PawPlacer experience
- Need schedule, location, and contact info included. You can enable or disable individual components as needed via toggles in your settings.
Common Use Cases
"I want to add adoptable pets to my existing website"
If you already have a nice website and just want to add your pets:
<!-- Add this where you want pets to appear -->
<div id="pawplacer-pets"></div>
<script src="https://pawplacer.com/embed/component"></script>
<script>
embedPawPlacerComponent('pets', 'your-account-id', 'pawplacer-pets');
</script>
This shows ONLY your pets - no forms, no branding, just animals.
"I need a complete adoption center but don't want to build it"
Use the full widget for a ready-made adoption center:
<div id="pawplacer-widget"></div>
<script src="https://pawplacer.com/embed"></script>
<script>
embedPawPlacer('your-account-id', 'pawplacer-widget');
</script>
This includes everything - pets, forms, your info, all in one.
"I want separate pages for pets and applications"
Create a pets page:
<!-- pets.html -->
<h1>Our Adoptable Pets</h1>
<div id="pawplacer-pets"></div>
<script src="https://pawplacer.com/embed/component"></script>
<script>
embedPawPlacerComponent('pets', 'your-account-id', 'pawplacer-pets');
</script>
Create an adoption application page:
<!-- adopt.html -->
<h1>Adoption Application</h1>
<p>Ready to add a furry friend to your family? Fill out our application!</p>
<div id="pawplacer-adopter"></div>
<script src="https://pawplacer.com/embed/component"></script>
<script>
embedPawPlacerComponent('adopter', 'your-account-id', 'pawplacer-adopter');
</script>
"I want to add a foster recruitment section"
Add this to any page or blog post:
<div class="foster-section">
<h2>Become a Foster Family</h2>
<p>Help save lives by providing temporary homes for pets in need.</p>
<div id="pawplacer-foster"></div>
</div>
<script src="https://pawplacer.com/embed/component"></script>
<script>
embedPawPlacerComponent('foster', 'your-account-id', 'pawplacer-foster');
</script>
Frequently Asked Questions
"Do I need to know coding?"
No! Just copy and paste. The hardest part is finding where to paste it in your website editor.
"Will it slow down my website?"
No. The widgets load after your page loads, so they won't slow down your site.
"Can I customize the colors?"
The widgets automatically use clean, neutral colors that work with most websites. Full customization isn't available yet, but the design is made to blend in.
"What happens when I update a pet in PawPlacer?"
It updates on your website immediately! No need to change anything on your site.
"Can I use multiple widgets on one page?"
Yes! You can mix and match. For example:
- Show pets at the top
- Add adoption form at the bottom
- Put volunteer form in the sidebar
"Is it mobile-friendly?"
Yes! All widgets automatically adjust for phones and tablets.
"Do the forms really work?"
Yes! When someone fills out a form on your website:
- It goes straight to your PawPlacer account
- You get notified (if you have notifications on)
- You can review and process it in PawPlacer
"Can people adopt directly through the widget?"
The full widget supports your complete adoption flow. Individual components just show forms - you process adoptions in PawPlacer.
"What if I change my website?"
Just copy and paste the code to your new site. Your account ID never changes, so the same code always works.
Do I need to keep my account ID secret?
No. The account ID is not sensitive and can be found in your PawPlacer settings. You can share the embed code with anyone you want.
Need More Help?
Visit your Embeddable Widget settings page to:
- Copy your personalized code
- See example screenshots
- Switch between full widget and individual components
If you're still having trouble, contact support with:
- Your website URL
- A screenshot of where you're stuck
- Which website platform you're using (WordPress, Wix, etc.)