Widgets

The Widgets settings page lets you generate code snippets that display your PawPlacer content on any website. You can embed your full public profile or individual components like a pets gallery or an application form.

Accessing Widgets

1. Open Settings
2. Make sure the settings sidebar is showing Organization Settings
3. Click Widgets

Prerequisites

Before embeds will display content, two things must be true:

1. Your organization's public profile is enabled from Settings > Organization
2. Your website supports JavaScript and allows you to edit its HTML

If your profile is private, the Widgets page shows a warning with a direct link to your visibility settings.

The Settings Page

The Widgets page is organized into two tabs: Full Profile Widget and Individual Components.

Full Profile Widget

This tab shows a ready-to-copy code snippet that embeds your entire public profile (organization info, pet gallery, events, flyers, adoption/foster/volunteer forms, support card, and public wishlist) in a single widget. The snippet looks like this:

<div id="pawplacer-widget"></div>
<script src="https://pawplacer.com/embed"></script>
<script>
  embedPawPlacer('[your-account-id]', 'pawplacer-widget');
</script>

Click the Copy button to copy the snippet with your account ID already filled in.

Below the snippet, you can expand two additional sections:

• Complete HTML Example: a full standalone HTML page you can save and open in a browser to preview the widget. Useful if you want to test before adding it to your real site.
• See Example Screenshots: preview images showing what the widget looks like when embedded.

Individual Components

This tab shows four component-specific snippets, each with its own Copy button:

Each snippet follows the same pattern:

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

Replace 'pets' with 'adopter', 'foster', or 'volunteer' for the other component types. The Settings page generates the correct snippet for each one automatically.

What the Full Widget Shows

When a visitor loads a page with the full profile embed, they see your public profile inside a responsive iframe:

• Organization sidebar: your logo, name, description, contact info, social links, location with a map, and operating hours
• Support card: general public donation entry points when donations and payment methods are enabled
• Tabbed content area: tabs for Pets, Events, Support, Wishlist, and Flyers when each section is enabled and has public content
• Pet gallery: a grid of available pets with species and sex filters, sorting, search, and pagination (12 pets per page)
• Public wishlist: available public wishlist items with product links, item pledges, Stripe funding, or tracked external payments depending on your settings
• Individual pet profiles: clicking a pet opens their full profile with photos, details, and an option to apply
• Application forms: adoption, foster, and volunteer forms displayed in a clean public layout when enabled
• Powered by PawPlacer footer link

All of these sections respect your public profile settings. If you have events disabled, that tab won't appear in the embed. Flyers appear only when public flyers are enabled and you have active flyers. If public donations are off, payment buttons will not appear; if public wishlist is off or no public wishlist items are available, the wishlist tab will not appear.

Customizing the Pets Component

The pets component embed accepts an optional configuration object for filtering and sorting:

embedPawPlacerComponent('pets', '[your-account-id]', 'pawplacer-pets', {
  limit: 12,              // Pets per page (default: 12, max: 100)
  sort_by: 'created_at',  // Sort by: created_at, name, or intake_date
  sort_dir: 'desc',       // Sort direction: asc or desc
  species: 'dog',         // Filter by species
  sex: 'female',          // Filter by sex
  query: 'labrador'       // Search by name, breed, or description
});

All options are optional. Without them, the embed shows all available pets sorted by newest first.

How Embeds Work

Embeds load inside a responsive iframe that communicates with your page to adjust its height automatically. The iframe sends height updates to the parent page as content changes (navigating between pets, opening forms, resizing the window); there are no scrollbar issues or layout shifts.

Embed content is cached for up to one hour for fast loading. Changes you make to your pets or profile in PawPlacer will appear in the embed within that window.

Adding Embeds to Your Website

WordPress

1. Open the page or post where you want the embed
2. Add a Custom HTML block
3. Paste the embed code from Settings
4. Save and preview the page

Shopify

1. Go to Online Store > Pages
2. Open the page editor and click Show HTML (the <> button)
3. Paste the embed code
4. Save

Any HTML Website

Paste the embed code anywhere in your page's <body> where you want the widget to appear. You can control the widget's width by styling its container:

#pawplacer-widget {
  max-width: 900px;
  margin: 0 auto;
}

The widget fills the width of its container and adjusts height automatically.

Form Submission Behavior

When a visitor submits an application through an embedded form (adopter, foster, or volunteer), they see a success confirmation message. After a moment, the embed navigates back to your full shelter profile so they can continue browsing.

The submitted application appears in your PawPlacer dashboard with a Pending status, and your team receives a notification if email notifications are configured.

Troubleshooting

Widget not appearing: Make sure your public profile is enabled in Settings; the embed code must be inside the <body> of your page, and your site must allow external JavaScript. Open your browser's developer console to check for any errors.

Widget appears but shows no pets: Pets must meet all visibility requirements: Available status, at least one photo, and the individual visibility toggle turned on.

Height or scrollbar issues: The iframe resizes automatically, but if your site applies restrictive CSS to iframes (like a fixed height), that can interfere; make sure you're not overriding the iframe's height in your stylesheet.

Embed loads slowly: The first load fetches data from PawPlacer's servers. Subsequent visits are faster thanks to caching. The embed loads asynchronously and will not block the rest of your page from rendering.

Security

Embeds display only public data inside a sandboxed iframe. No sensitive internal information is exposed. Application form submissions, public donation starts, external-payment starts, and wishlist item pledges go through PawPlacer's servers with the same validation, rate limiting, and reconciliation behavior as direct submissions on your public profile.

Permissions

Any team member can view and copy embed codes. Only organization owners can change the public profile visibility settings that control whether embeds display content.