Embeddable Widgets

Add RE:Source recycling and disposal information to your website with simple embed codes. Copy and paste the code snippets below to get started.

Why Use Widgets?

🚀 Easy Integration

Simply copy and paste the embed code. No API keys or complex setup required.

🎨 Customizable

Adjust themes, sizes, and display options to match your website design.

♻️ Always Updated

Widget data automatically updates as we add new items, vendors, and programs.

Search Widget

Add a search bar to help users find recycling and disposal information for any item.

Features

Smart autocomplete search

Instant item suggestions

Direct links to item details

Customizable by county

Embed Code

<!-- R3 Search Widget -->
<div 
  id="r3-search-widget" 
  data-county="alameda"
  data-theme="light"
></div>
<script src="https://r3.stopwaste.org/widgets/search.js"></script>

Configuration Options

Attribute	Type	Default	Description
data-county	string	alameda	Service area (alameda, contra-costa, palo-alto)
data-theme	string	light	Visual theme (light, dark, auto)
data-compact	boolean	false	Minimal UI mode
data-placeholder	string	Search items...	Custom placeholder text

Item Detail Widget

Display complete disposal information for a specific item, including vendors, methods, and curbside options.

Features

Complete item information

Vendor locations with maps

Curbside collection info

Cost and method badges

Embed Code

<!-- R3 Item Detail Widget -->
<div 
  id="r3-item-widget" 
  data-item-slug="household-batteries"
  data-location="94612"
  data-theme="light"
  data-api-base="https://resource-backend.up.railway.app/api/v1"
  data-frontend-url="https://r3.stopwaste.org"
></div>
<script src="https://r3.stopwaste.org/widgets/item-detail.js"></script>

Configuration Options

Attribute	Type	Default	Description
data-item-slug	string	required	Item slug (e.g., "household-batteries")
data-location	string	none	ZIP code for distance sorting
data-theme	string	light	Visual theme (light, dark, auto)
data-compact	boolean	false	Show fewer vendors
data-show-header	boolean	true	Show item name and image
data-show-vendors	boolean	true	Show vendor directory
data-api-base	string	production	Override API endpoint
data-frontend-url	string	production	Override frontend URL for links

Curbside Widget

Show curbside collection programs and schedules for a specific city.

Features

City-specific programs

Collection schedules

Accepted items list

Special instructions

Embed Code

<!-- R3 Curbside Widget -->
<div 
  id="r3-curbside-widget" 
  data-city="oakland"
  data-theme="light"
></div>
<script src="https://r3.stopwaste.org/widgets/curbside.js"></script>

Configuration Options

Attribute	Type	Default	Description
data-city	string	oakland	City name or slug
data-theme	string	light	Visual theme (light, dark, auto)
data-compact	boolean	false	Minimal UI mode

Need More Information?

Check out our complete documentation for advanced usage, event handling, and programmatic API.

View Documentation

Questions or need help integrating widgets?