Pet FBI Widget for Lost and Found Pet Reports
Pet FBI Widget for Lost and Found Pet Reports
The Pet FBI Widget is a customizable, responsive web component that displays lost and found pet reports on your organization's website. The widget automatically fetches and displays the latest pet reports with built-in search, filtering, and pagination capabilities.
👀 See the Live Demos | 📧 Get Widget Access | 📄 Terms of Service
Features
- Real-time Data: Displays current pet reports with updates appearing within 2 minutes
- Built-in Search: Users can search by pet name, breed, species, or location
- Responsive Design: Automatically adapts to different screen sizes and devices
- Pagination: Handles large datasets with configurable items per page
- Filtering: Filter by report type (Lost, Found, etc.) and species
- Customizable: Configure maximum results, pagination, and content filters
- Easy Integration: Simple HTML custom element - no complex setup required
Getting Started
Step 1: Request Widget Access
Before using the widget, you must contact Pet FBI to register for widget access:
👉 Contact Pet FBI Central to request your unique data feed identifier.
You will receive a UUID (unique identifier) that looks like: 11111111-1111-1111-1111-111111111111
Step 2: Add the Script
Add the Pet FBI widget script to your website in the <head> section or before the closing </body> tag:
<script type="module" src="https://petfbi.org/widget/petfbi-widget.js"></script>Step 3: Add the Widget
Place the widget element where you want it to appear on your page:
<petfbi-widget
data-file="your-uuid-here"
report-types="Lost,Found"
species="Dog,Cat"
max-results="50"
items-per-page="12"
source-systems="Pet FBI,Helping Lost Pets">
</petfbi-widget>Configuration Options
data-file (required)
- Type: String
- Format: UUID (e.g.,
11111111-1111-1111-1111-111111111111) - Description: Your unique data feed identifier provided by Pet FBI
- Example:
data-file="your-uuid-here"
report-types (optional)
- Type: String
- Default: All report types
- Valid Values:
Lost,Sighting,Found,Found Deceased - Format: Comma-separated list
- Description: Filter reports by type
- Example:
report-types="Lost,Found"
species (optional)
- Type: String
- Default: All species
- Valid Values:
Dog,Cat,Bird,Horse,Pig,Rabbit,Reptile,Small Mammal,Other - Format: Comma-separated list
- Description: Filter reports by animal species
- Example:
species="Dog,Cat"
max-results (optional)
- Type: Number
- Default: No limit
- Valid Range: 1 or higher
- Description: Maximum number of reports to fetch from feed (all feeds are limited to the last 90 days of events)
- Example:
max-results="50"
items-per-page (optional)
- Type: Number
- Default: 12
- Valid Range: 1 or higher
- Description: Number of reports to display per page
- Example:
items-per-page="8"
source-systems (optional)
- Type: String
- Default: All systems
- Valid Values:
Pet FBI,Helping Lost Pets,Your Integration System Name - Format: Comma-separated list
- Description: Filter reports by animal species
- Example:
source-systems="Pet FBI,Helping Lost Pets"
Configuration Examples
Basic Widget (shows all reports):
<petfbi-widget data-file="your-uuid-here"></petfbi-widget>Lost Pets Only:
<petfbi-widget
data-file="your-uuid-here"
report-types="Lost">
</petfbi-widget>Dogs and Cats with Custom Pagination:
<petfbi-widget
data-file="your-uuid-here"
species="Dog,Cat"
max-results="30"
items-per-page="6">
</petfbi-widget>Found and Sighting Reports:
<petfbi-widget
data-file="your-uuid-here"
report-types="Found,Sighting"
max-results="25">
</petfbi-widget>Technical Requirements
- Browser Support: Modern browsers supporting ES2016+ (Chrome 51+, Firefox 54+, Safari 10+, Edge 79+)
- Container Size: Widget is responsive and adapts to its container width
- Minimum Width: Recommended minimum container width of 300px for optimal display
- Testing: Test on multiple screen resolutions to ensure proper responsive behavior
Widget Behavior
Search Functionality
Users can search pet reports using the built-in search box. Search works across:
- Pet names
- Breed information
- Report types
- Species
- Location details
- System names
Pagination
- Automatic pagination when results exceed
items-per-pagesetting - Navigation controls show current page and total pages
- "Previous" and "Next" buttons for easy navigation
- Results counter shows current range (e.g., "Showing 1-12 of 45")
Data Updates
- Report data updates as new reports are submitted to Pet FBI
- Changes may take up to 5 minutes to appear in the widget
- Widget automatically handles data refresh and caching
Error Handling
If the widget cannot load data (network issues, invalid data-file, etc.), users will see:
"No reports found. Please search the Pet FBI site for the latest reports in your area."
Troubleshooting
Widget Not Loading
- Verify the script URL is correct and accessible
- Check that your
data-fileUUID is valid and properly formatted - Ensure your website can make external HTTP requests
No Reports Showing
- Confirm your data feed contains reports matching your filter criteria
- Try removing filters (
report-types,species) to see all available data - Check browser console for any error messages
Layout Issues
- The widget is designed to be used as-is with built-in responsive styling
- Ensure adequate container width (minimum 300px recommended)
- Test on various screen sizes to verify responsive behavior
Performance
- Consider reducing
max-resultsif loading large datasets - Adjust
items-per-pagebased on your audience's preferences and page layout
Support
For technical support, widget access requests, or questions about integration:
Live Demos
Live Demo on CodePen
Check out a live example of the widget and play with the options for yourself:
Live Interactive Example
This is an example of the widget with the default settings:
