Skip to main content

Website Widgets

Embed PawPlacer public content and forms on your website

In this guide

Key sections from this documentation page.

PawPlacer widgets render public content inside a responsive iframe on a website you control. Generate and preview them from Settings > Widgets.

Widget Choices

The widget picker includes:

WidgetContent
Full ProfileThe organization's public PawPlacer experience
PetsPublic pet gallery and pet details
Adopter FormCurrent public adopter form
Foster FormCurrent public foster form
Volunteer FormCurrent public volunteer form
Surrender FormCurrent public surrender form
Donor FormCurrent public donor form

All widgets use PawPlacer's public-page shell and attribution. Public-page analytics and submission protections apply in an embed just as they do on a direct PawPlacer page.

Generate the Code

  1. Open Settings > Widgets.
  2. Select the widget.
  3. Switch the live preview between desktop and mobile if desired.
  4. For Pets, choose the page size, species, and sort settings.
  5. Keep or change the container ID.
  6. Copy the generated code.

The Full Profile option also provides a complete HTML example. Use Open in new tab to test the selected public surface directly.

Install It

Paste the complete snippet into a custom-HTML area:

  • A WordPress Custom HTML block
  • A Shopify or site-builder section that permits scripts
  • The <body> of a custom HTML page

A normal snippet contains a target <div>, the PawPlacer embed script, and an initialization call. The target ID passed to the function must match the <div> ID.

The script loads asynchronously, creates the iframe, and listens for height changes. Do not apply a fixed height to the iframe.

Pets Options

The generated Pets snippet can include:

{
  limit: 12,
  species: 'dog',
  sort_by: 'name',
  sort_dir: 'asc'
}

The settings page writes only the options you changed. The widget shows at most 100 pets per page, so a larger page size is copied as limit: 100. The component also supports the public pet search and filter behavior inside the rendered widget.

Selecting a pet in the Pets or Full Profile widget opens its widget pet page. That page offers adoption and foster application links for that pet when those public forms are on, and its previous and next arrows step through the pets in the grid's current filters and sort order.

Forms

Form widgets use the current public template for their record type. Successful submissions create the corresponding PawPlacer record and follow the template's safe post-submission redirect when one is configured.

The widget displays only form fields permitted by the public template. Internal fields and internal record data are not exposed.

“Current public template” means the template carrying the Default badge in Settings > Forms. Draft or alternate templates do not receive separate widget code. Preview the alternate template in the form editor, then make it the default when it should replace the live form.

Foster, volunteer, donor, and surrender widgets require their matching public feature. Adopter forms have no independent public-feature toggle: with a public profile and a default adopter template, the direct form and widget are available.

Troubleshooting

  • Blank widget: Make the organization profile public and confirm the site allows the PawPlacer script.
  • Wrong widget or duplicate rendering: Give each widget on a page a unique container ID.
  • No pets: Confirm the organization public-pet surface is available and that the intended pets meet every public-visibility rule.
  • Form unavailable: Confirm a default template exists and, where applicable, that the matching public feature is enabled.
  • Wrong form questions: Confirm the intended template has the Default badge. The widget cannot target a non-default template.
  • Clipped content: Remove fixed iframe height and restrictive overflow styles.
  • Stale script behavior: Reload the host page or clear its asset cache. Widget content is fetched from PawPlacer.

The organization ID used by a widget is a public identifier, not a secret. API keys are never part of widget code.

Permissions

Generating and previewing widget code in Settings > Widgets requires the Admin role. Installing the snippet also requires permission to edit the destination website.

Keep reading

Move through the documentation in order.