Priori Dev

Appearance

Abandoned Booking Tracker ​

Overview ​

Capture customer contact data when they click "Book Now" — before Peek Pro's iframe opens. Save data progressively (field-by-field on blur) so even partial entries are captured. Then hand off to Peek for date/time selection and payment. Admin dashboard with CSV export for follow-up.

Extension type: Joomla Package (pkg_bookingtracker) — contains a System Plugin (frontend) + Admin Component (backend).

Phase 1: Foundation — Plugin Scaffold + Database ​

Goal: Installable Joomla plugin with database table, no UI yet.

Files to create:

plugins/system/bookingtracker/
  bookingtracker.xml            # Manifest (install config, DB schema ref)
  services/provider.php         # Joomla DI service provider
  src/Extension/BookingTracker.php  # Empty plugin class, registered events
  sql/install.mysql.utf8.sql    # CREATE TABLE #__bookingtracker_leads
  sql/uninstall.mysql.utf8.sql  # DROP TABLE

Database table #__bookingtracker_leads:

  • id INT AUTO_INCREMENT PRIMARY KEY
  • session_id VARCHAR(64) — browser session cookie
  • full_name VARCHAR(255)
  • email VARCHAR(255)
  • phone VARCHAR(50)
  • party_size SMALLINT
  • tour_url VARCHAR(500) — Peek booking URL
  • tour_name VARCHAR(255) — tour name from link/page
  • page_url VARCHAR(500) — page where click happened
  • referrer VARCHAR(500)
  • utm_source, utm_medium, utm_campaign VARCHAR(100)
  • ip_address VARCHAR(45)
  • status ENUM('partial','form_complete','booking_complete')
  • created_at DATETIME
  • updated_at DATETIME
  • completed_at DATETIME
  • peek_booking_id VARCHAR(100)
  • contacted TINYINT(1) DEFAULT 0
  • notes TEXT

Done when: Plugin installs via Joomla admin, table is created, plugin appears in System plugins list.

Phase 2: Frontend Modal Form ​

Goal: "Book Now" clicks open our contact capture form instead of Peek's iframe.

Files to create:

media/plg_system_bookingtracker/
  js/booking-form.js            # Modal logic + progressive save
  css/booking-form.css           # Modal styling

Files to modify:

  • BookingTracker.php — add onBeforeCompileHead to inject JS/CSS on frontend pages

JS behavior (booking-form.js):

  1. On DOMContentLoaded, find all a[data-embed="true"][href*="book.peek.com"]
  2. Attach click listener that prevents default, opens modal
  3. Modal form: Full Name, Email, Phone, Party Size
  4. Each field saves via AJAX on blur → POST to index.php?option=com_ajax&plugin=bookingtracker&format=json
  5. "Continue to Booking" button closes modal, triggers Peek's original embed
  6. Auto-captures: tour URL (from href), tour name (from link text/heading), page URL, referrer, UTM params, session cookie

Done when: Clicking "Book Now" shows our modal. Filling in a name and tabbing away creates a partial lead in the DB. Clicking "Continue" opens Peek's iframe.

Phase 3: AJAX Backend — Save Leads ​

Goal: Plugin handles AJAX requests from the modal form.

Files to modify:

  • BookingTracker.php — add onAjaxBookingtracker method

AJAX actions:

  • action=create — creates new lead (on first field blur): stores session_id, tour_url, tour_name, page_url, referrer, UTMs, IP, status=partial
  • action=update — updates existing lead by session_id + tour_url: saves individual field values as they're entered
  • action=complete_form — marks lead as form_complete when "Continue to Booking" is clicked

Security:

  • CSRF token validation (Joomla's Session::checkToken)
  • Rate limiting by IP (prevent spam)
  • Input sanitization on all fields

Done when: Progressive save works — each field blur updates the DB row. Admin can query #__bookingtracker_leads and see partial/complete entries.

Phase 4: Admin Component — Dashboard + Leads List ​

Goal: Admin panel to view, filter, and export captured leads.

Files to create:

administrator/components/com_bookingtracker/
  bookingtracker.xml
  services/provider.php
  src/Extension/BookingTrackerComponent.php
  src/Controller/DisplayController.php
  src/Controller/LeadsController.php
  src/Model/DashboardModel.php
  src/Model/LeadsModel.php
  src/View/Dashboard/HtmlView.php
  src/View/Leads/HtmlView.php
  tmpl/dashboard/default.php
  tmpl/leads/default.php

Dashboard view:

  • Total leads count
  • Breakdown by status (partial / form_complete / booking_complete)
  • Abandonment rate (partial / total)
  • Conversion rate (booking_complete / total)
  • Top tours by interest (most clicked)

Leads list view:

  • Table: Name, Email, Phone, Tour, Status, Date, Contacted
  • Filters: date range, tour, status
  • Sort by any column
  • Pagination

CSV export:

  • Export filtered leads as CSV download
  • Columns: all lead fields

Bulk actions:

  • Mark as contacted
  • Delete selected

Done when: Admin can log in, see the dashboard, browse leads, filter, and download CSV.

Phase 5: Webhook — Track Completed Bookings ​

Goal: Mark leads as booking_complete when Peek confirms a booking.

Files to modify:

  • BookingTracker.php — add webhook handler to onAjaxBookingtracker

How it works:

  • AJAX action action=webhook receives Peek's booking_update POST
  • Authenticates via shared secret (configurable in plugin params)
  • Extracts tour/product info + booking reference from payload
  • Correlates with existing leads by tour URL + time window (e.g., within 2 hours)
  • Updates matching lead: status -> booking_complete, stores peek_booking_id + completed_at

Done when: A completed Peek booking automatically marks the corresponding lead in our system.

Phase 6: Package + Deploy ​

Goal: Single installable ZIP for production.

Files to create:

pkg_bookingtracker.xml          # Package manifest listing plugin + component

Package contents:

  • plg_system_bookingtracker.zip — the plugin
  • com_bookingtracker.zip — the admin component
  • pkg_bookingtracker.xml — package manifest

Deployment steps:

  1. Build ZIP locally
  2. Install on production via Administrator > System > Install > Extensions
  3. Enable the system plugin
  4. Configure webhook endpoint in Peek Pro
  5. Verify: click "Book Now" on live site -> modal appears -> data captured

Done when: Clean install on production, extension working end-to-end.

Reference ​

  • Peek embed pattern: <a href="https://book.peek.com/s/951f13c5-..." data-embed="true" data-button-text="Book Now">
  • Peek webhook: booking_update event (confirmed/updated/cancelled only)
  • Peek API docs: https://octodocs.peek.com
  • Joomla plugin path: plugins/system/bookingtracker/
  • Joomla component path: administrator/components/com_bookingtracker/
  • DB prefix: k8fo0_
lock

Enter PIN to continue