Apply Calendly as chat widget To Botpress

by Debiansarge

HTML

<!-- Calendly (one copy only) -->
<link rel="stylesheet" href="https://assets.calendly.com/assets/external/widget.css">
<script src="https://assets.calendly.com/assets/external/widget.js" async></script>

<!-- Botpress Webchat v3.1 -->
<script src="https://cdn.botpress.cloud/webchat/v3.1/inject.js"></script>
<!-- keep YOUR bot’s second script here (the auto-init script you copy from Botpress “Share → Configure”) -->
<script src="https://files.bpcontent.cloud/2025/07/22/04/20250722044943-RPPE5GA4.js" defer></script>

<script>
/* Listen for the bot’s custom event and open Calendly */
(function () {
  // Wait until Webchat is initialized
  if (!window.botpress || !window.botpress.on) {
    document.addEventListener('DOMContentLoaded', function wait() {
      if (!window.botpress || !window.botpress.on) return setTimeout(wait, 100);
    });
  }

  // Prefer the modern Calendly API, fallback to legacy
  function openCalendly(url) {
    var u = url || 'https://calendly.com/debiansarge1/sellers-senior-savings?hide_gdpr_banner=1';
    if (window.Calendly?.initPopupWidget) return window.Calendly.initPopupWidget({ url: u });
    if (window.Calendly?.showPopupWidget) return window.Calendly.showPopupWidget(u);
    try { window.open(u, '_blank', 'noopener'); } catch (_) {}
  }

  // v3: listen to custom events from the bot
  window.botpress.on('customEvent', function (event) {
    // Expect something like: { action: "showCalendly", url: "..." }
    if (event?.action === 'showCalendly') {
      openCalendly(event.url);
    }
  });
})();
</script>