The PawPlacer widget lets you add your pet listings, application forms, public support options, and wishlist needs to any website. Visitors can browse pets, submit applications, use an individually embedded surrender form, start public donations, fund wishlist items, or submit item pledges from 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 enabled on your public profile (pets, adoption/foster/volunteer forms, schedule, location, events, flyers, support, and wishlist)

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
Submit Surrender Requests - Complete an owner surrender form if you embed it as an individual component
Find Your Location - See your address and hours (if enabled)
Donate - Make a general public donation when donations and payment methods are enabled
Support Wishlist Items - Fund a specific item, start a tracked external payment, submit an item pledge, or open a product link when public wishlist is enabled

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
Public donations, payment methods, and wishlist items

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
Surrender Form - Only the owner surrender request form
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

Just the Surrender Form

Need to collect owner surrender requests? Use this:

<div id="pawplacer-surrender"></div>
<script src="https://pawplacer.com/embed/component"></script>
<script>
  embedPawPlacerComponent('surrender', 'your-account-id', 'pawplacer-surrender');
</script>

What visitors see:

Your custom surrender request form
Professional, easy-to-complete layout
Requests appear in your Surrenders queue for staff review

Perfect for:

Owner surrender information pages
Intake triage pages
Websites where you want surrender requests separate from adoption and foster forms

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 including schedule, location, and contact info
Need flexibility to enable or disable individual components 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.)

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 enabled on your public profile (pets, adoption/foster/volunteer forms, schedule, location, events, flyers, support, and wishlist)

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
Submit Surrender Requests - Complete an owner surrender form if you embed it as an individual component
Find Your Location - See your address and hours (if enabled)
Donate - Make a general public donation when donations and payment methods are enabled
Support Wishlist Items - Fund a specific item, start a tracked external payment, submit an item pledge, or open a product link when public wishlist is enabled

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
Public donations, payment methods, and wishlist items

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

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
Surrender Form - Only the owner surrender request form
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

Just the Surrender Form

Need to collect owner surrender requests? Use this:

<div id="pawplacer-surrender"></div>
<script src="https://pawplacer.com/embed/component"></script>
<script>
  embedPawPlacerComponent('surrender', 'your-account-id', 'pawplacer-surrender');
</script>

What visitors see:

Your custom surrender request form
Professional, easy-to-complete layout
Requests appear in your Surrenders queue for staff review

Perfect for:

Owner surrender information pages
Intake triage pages
Websites where you want surrender requests separate from adoption and foster forms

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 including schedule, location, and contact info
Need flexibility to enable or disable individual components 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.)