Breadcrumbs

Listening to Reservation Events

The GoMeddo Frontend Builder dispatches browser events so the embedding website can react to the outcome of a booking, for example to show a custom confirmation screen, redirect the visitor, trigger analytics, or run follow-up logic.

Events are delivered as standard DOM CustomEvents and are dispatched directly on the <gomeddo-frontend-builder> element itself. You subscribe to them with a normal addEventListener call.

Attaching a listener is optional. Wether you do attach one or not, the Frontend Builder continues to show its own confirmation and error screens exactly as before. Events add behavior; they do not replace the built-in flow.

Available events

Event name

Fires when

Flow

reservationcreate

Once, after a reservation creation attempt resolves, whether it succeeded or failed.

Paid and unpaid

reservationpaid

Once, when a paid reservation's payment reaches a terminal state, whether it was paid or failed.

Paid only

Both events carry their result in a status field on event.detail, so a single listener can handle both the success and failure case.

For a paid booking you receive both events: reservationcreate when the Reservation record is persisted in Salesforce, and then reservationpaid once the payment is confirmed or fails. For an unpaid booking you receive only reservationcreate.

Event payload

Every event exposes its data on event.detail. The payload shape depends on the event and the resulting status.

reservationcreate

JSON
// Success — the Reservation was persisted in Salesforce
{
  "status": "success",
  "reservation": {
    "Id": "a0fJW00000Bd09tYAB",
    "B25__Start__c": "2026-08-10T09:00:00.000Z",
    "B25__End__c": "2026-08-10T09:30:00.000Z",
    "B25__Time_Zone__c": "Europe/Amsterdam",
    "B25__Resource__c": "a1B5g00000EXAMPLE",
    "B25__Contact__r": { "Id": "003JW00001NIsKLYA1" }
  }
}

// Failure — the Reservation could not be created
{
  "status": "error",
  "error": "Reservation could not be created."
}

reservationpaid

JSON
// Success — payment was authorized/paid
{
  "status": "paid",
  "reservation": {
    "Id": "a0fJW00000Bd09tYAB",
    "B25__Start__c": "2026-08-10T09:00:00.000Z",
    "B25__Time_Zone__c": "Europe/Amsterdam"
  }
}

// Failure — payment did not complete
{
  "status": "error",
  "error": "FAILED"
}

Payload reference

Field

Type

Description

status

String

The outcome of the event: "success" or "paid" for a successful result, and "error" for a failure.

reservation

Object

Present on success. A plain JSON object containing reservation fields. Empty values such as null or undefined are omitted.

reservation.Id

String

The Salesforce Id of the newly created Reservation.

error

String

Present on failure. For reservationcreate, this is a human-readable error message. For reservationpaid, this is the terminal payment status, such as "FAILED" or "CANCELED".

Subscribing to events

Select the component and attach a standard event listener. Because the Frontend Builder can be re-rendered, it is good practice to attach listeners once the page has loaded.

HTML
<gomeddo-frontend-builder
  apiKey="xxxxxxxxxxx"
  developerName="Viewings"
  environment="PRODUCTION"
>
</gomeddo-frontend-builder>
<script type="module" src="https://frontend.gomeddo.com/gomeddo-frontend-builder.mjs"></script>
<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function () {
    const frontendBuilderElement = document.querySelector("gomeddo-frontend-builder");

    frontendBuilderElement.addEventListener("reservationcreate", function (event) {
      if (event.detail.status === "success") {
        console.log("Reservation created:", event.detail.reservation.Id);
      } else {
        console.error("Reservation failed:", event.detail.error);
      }
    });

    frontendBuilderElement.addEventListener("reservationpaid", function (event) {
      if (event.detail.status === "paid") {
        console.log("Payment confirmed:", event.detail.reservation.Id);
      } else {
        console.error("Payment failed:", event.detail.error);
      }
    });
  });
</script>

Always branch on event.detail.status. Each create attempt results in exactly one reservationcreate event, and each paid booking can later result in exactly one reservationpaid event.

Important notes

  • One event, two outcomes: each listener should handle both success and failure by checking event.detail.status.

  • reservation is plain data: the object contains only serializable fields and can safely be passed to JSON.stringify(event.detail.reservation).

  • Contact and Lead data: when the embedding page's origin can be determined, nested B25__Contact__r or B25__Lead__r objects may include extra details together with the Salesforce Id. When the origin cannot be determined, those nested objects are reduced to just their Id so no unnecessary personal data leaves the widget. In both cases, reservation.B25__Contact__r.Id remains reliable when present.

  • Timezone: B25__Time_Zone__c reflects the timezone of the appointment, which helps you display the booking in the correct local time without additional lookups.

Examples

Show a custom confirmation and redirect

JavaScript
frontendBuilderElement.addEventListener("reservationcreate", function (event) {
  if (event.detail.status === "success") {
    const reservationId = event.detail.reservation.Id;
    window.location.href = "/confirmation?reservationId=" + reservationId;
  }
});

Display a friendly error message

JavaScript
frontendBuilderElement.addEventListener("reservationcreate", function (event) {
  if (event.detail.status === "error") {
    showBanner("We could not complete your booking: " + event.detail.error);
  }
});

Track successful bookings in analytics

JavaScript
frontendBuilderElement.addEventListener("reservationcreate", function (event) {
  if (event.detail.status === "success") {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: "reservation_created",
      reservationId: event.detail.reservation.Id
    });
  }
});

React to the payment outcome of a paid booking

JavaScript
frontendBuilderElement.addEventListener("reservationpaid", function (event) {
  if (event.detail.status === "paid") {
    window.location.href = "/thank-you?reservationId=" + event.detail.reservation.Id;
  } else {
    showBanner("Your payment could not be completed (" + event.detail.error + ").");
  }
});

Behavior without a listener

Events are purely additive. If no listener is attached, the Frontend Builder continues to show its own confirmation screen on success and its own error screen on failure. You can adopt events incrementally without changing existing behavior.

References