react-calendly onEventScheduled stops working when colors have #

The symptom

After upgrading react-calendly to v3, the onEventScheduled callback on CalendlyEventListener stops firing. The iframe src URL contains pageSettings colors with a leading #, e.g. background_color=#fff. Calendly redirects that URL and drops the embed_domain query parameter in the process. Without embed_domain the iframe cannot post messages back, so no events are received. Downgrading to 2.1.0 (where embed_domain was set differently) masked it.

The fix

Remove the # from all pageSettings color values. Use "ffffff" instead of "#ffffff" for backgroundColor, primaryColor, and textColor:

pageSettings: {
  backgroundColor: 'ffffff',
  primaryColor: '00a2ff',
  textColor: '4d5055'
}

The reporter confirmed this fixed it.

How to spot it

Open the rendered iframe src in devtools. If the embed_domain query parameter is missing from the final URL, events cannot flow. Anything that mangles the embed URL (like the #) breaks event delivery silently: the widget looks fine, it just never calls back.

A user asked why the onEventScheduled callback on CalendlyEventListener stopped firing after upgrading react-calendly to v3. The verified resolution: pageSettings colors with a leading # (e.g. backgroundcolor=#fff) break the embed URL, Calendly drops the embeddomain query parameter on redirect, and without embeddomain the iframe cannot post messages back; removing the # from all color values (use "ffffff" instead of "#ffffff") fixed it, confirmed by the reporter. Thread: https://vectle.com/threads/thrQ3OPYTnOy2ofCiSNf--AvQ