The Embed Settings page provides everything you need to display your adoptable pets on your own website using PawPlacer's embeddable widgets.
Overview
PawPlacer's embed feature allows you to:
- Display your adoptable pets on any website
- Maintain consistent branding across platforms
- Automatically sync pet availability
- Provide an interactive adoption experience outside of PawPlacer
Prerequisites
Before using embeds, ensure:
- Your profile is public - Embeds only work when your organization profile is set to public
- You have website access - You'll need the ability to add HTML code to your website
- Your website supports JavaScript - Most modern websites do
If your profile is private, you'll see a warning message with a link to update your visibility settings.
Getting Your Embed Code
JavaScript Embed Code
The primary embed method uses a simple JavaScript snippet:
<div id="pawplacer"></div>
<script src="https://pawplacer.com/embed.js" data-shelter="your-shelter-id"></script>
To use this code:
- Click the "Copy" button next to the JavaScript code
- Paste it into your website's HTML where you want the widget to appear
- The widget will automatically load and display your pets
Complete HTML Example
For those less familiar with web development, a complete HTML page example is provided:
<!DOCTYPE html>
<html>
<head>
<title>Our Adoptable Pets</title>
</head>
<body>
<h1>Meet Our Adoptable Pets</h1>
<div id="pawplacer"></div>
<script src="https://pawplacer.com/embed.js" data-shelter="your-shelter-id"></script>
</body>
</html>
This example shows exactly how to create a standalone page featuring your pets.
Widget Features
The embedded widget includes:
Pet Display
- Grid layout of available pets
- Pet photos and basic information
- Real-time availability updates
- Responsive design for all screen sizes
Interactive Elements
- Click on any pet for detailed information
- Filter by species, age, and other attributes
- Search functionality
- Direct links to full pet profiles on PawPlacer
Automatic Updates
- No manual updates needed
- New pets appear automatically
- Adopted pets are removed in real-time
- Always shows current information
Implementation Examples
Adding to WordPress
- Edit the page or post where you want pets displayed
- Add a Custom HTML block
- Paste the embed code
- Publish or update the page
Adding to Wix
- Add an HTML iframe element to your page
- Click "Enter Code"
- Paste the embed code
- Adjust the iframe size as needed
Adding to Squarespace
- Add a Code Block to your page
- Paste the embed code
- Ensure it's set to HTML mode
- Save and publish
Adding to Custom Websites
Simply paste the embed code wherever you want the widget to appear in your HTML files.
Customization Options
While the embed automatically adapts to your website's styling, you can customize:
Container Sizing
Control the widget's dimensions by styling the container:
#pawplacer {
max-width: 800px;
margin: 0 auto;
}
Responsive Behavior
The widget automatically adjusts to different screen sizes, but you can set breakpoints if needed.
Troubleshooting
Widget Not Appearing
- Check profile visibility: Ensure your profile is set to public
- Verify code placement: The code must be in the HTML body
- Check for JavaScript errors: Open browser console for error messages
- Confirm shelter ID: Ensure your shelter ID matches exactly
Styling Issues
- The widget inherits some styles from your website
- Conflicts can occur with aggressive CSS rules
- Contact support if you need help with specific styling issues
Performance
- The widget loads asynchronously to avoid slowing your site
- Images are optimized for web display
- Caching ensures fast subsequent loads
Best Practices
- Page Placement: Put the widget on a dedicated "Adopt" page for best visibility
- Above the Fold: Consider placing it where visitors can see it without scrolling
- Context: Add introductory text explaining your adoption process
- Mobile Testing: Always test on mobile devices where many users browse
- Regular Checks: Periodically verify the widget displays correctly
Security
- The embed code is read-only and cannot modify your shelter data
- No sensitive information is exposed
- The widget cannot access other parts of your website
Support
If you encounter issues:
- Verify your profile is public
- Check that you've copied the complete embed code
- Test in different browsers
- Contact support with your website URL for assistance
Permissions
Any team member can view and copy embed codes, but only administrators can change organization visibility settings that affect embed functionality.