Articles on: Advanced Settings

Listen for Widget State Changes with Custom Events

Listen for customer selections and trigger custom actions when delivery or pickup options change.


Custom events allow you to respond to customer interactions with your Bird Pickup & Delivery widget. Use them to update other page elements, track user behavior, modify pricing, or integrate with third-party services.


Available custom events

  1. birdchime:initialized

This event fires once, when the Bird Pickup & Delivery widget is fully loaded on the page for the first time.

Use this event to:

  • Run setup logic
  • Modify widget styling
  • Load external dependencies
  • Track widget impressions

Example:

document.addEventListener('birdchime:initialized', function({ detail }) {
console.log('BirdChime widget initialized:', detail);
});


  1. birdchime:reinitialized

This event fires whenever the widget is re-rendered or re-mounted automatically.

Common scenarios:

  • AJAX carts / dynamic carousels
  • Theme sections reloading
  • Re-renders triggered by cart updates

Use this event to:

  • Re-attach event listeners
  • Re-apply custom styling
  • Fix issues where custom JS stops working after AJAX reloads

Example:

document.addEventListener('birdchime:reinitialized', function({ detail }) {
console.log('BirdChime widget reinitialized:', detail);
});


  1. birdchime:schedule

This event fires any time the customer changes a selection, such as:

  • Switches between Pickup, Delivery, or Shipping
  • Chooses a date
  • Selects a time slot

This allows you to build dynamic experiences that respond instantly to customer actions.

Example:

document.addEventListener('birdchime:schedule', function({ detail }) {
console.log('Schedule event details:', detail);
});


Event Data Structure

Example data returned when the customer selects Local Delivery with a chosen date and time:

{
"Delivery Method": "Delivery",
"Customer TimeZone": "America/Los_Angeles",
"_BirdChimeSlotId": "M=D;L=105145;D=2025-11-26;T=9:00 AM - 6:00 PM;TS=2025-11-12 11:32:30;S=R;Z=",
"locationId": 105145,
"shopifyLocationId": 80424370330,
"Delivery Date": "Nov 26, 2025",
"Delivery Day": "Wednesday",
"Delivery Time": "9:00 AM - 6:00 PM"
}


Troubleshooting: Event Not Firing?

  • Check console for JavaScript errors in browser dev tools.
  • Ensure widget has loaded before attaching listeners (birdchime:initialized helps with this).
  • Dynamic carts/sections may require handling the birdchime:reinitialized event.


Updated on: 12/05/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!