[CAL-4029] Embed / Floating pop-up button and Preview no longer working

[EduNetEurope]

Hello everyone,

We have been using the floating pop-up button on various websites for several weeks now. Although we haven't changed the code, the button has suddenly stopped appearing on our sites.

Is anyone else experiencing this issue?

The preview function has also stopped working:

_CAL-4029

[dosubot[bot]]

Yes, others have experienced the issue of the floating pop-up button and preview function not working. The functionality depends on specific query parameters (bookerUrl, embedLibUrl, and calLink). If any of these parameters are missing, the functionality will not work.

To resolve this issue, ensure that the following query parameters are correctly provided in the URL:

1. bookerUrl
2. embedLibUrl
3. calLink

Here is the relevant part of the code that checks for these parameters:

const searchParams = new URL(document.URL).searchParams;
const embedType = searchParams.get("embedType");
const calLink = searchParams.get("calLink");
const bookerUrl = searchParams.get("bookerUrl");
const embedLibUrl = searchParams.get("embedLibUrl");
if (!bookerUrl || !embedLibUrl) {
  throw new Error('Can\'t Preview: Missing "bookerUrl" or "embedLibUrl" query parameter');
}

Additionally, ensure that the embedType is set to "floating-popup" for the floating pop-up button to work:

if (embedType === "floating-popup") {
  previewWindow.Cal("floatingButton", {
    calLink: calLink,
    attributes: {
      id: "my-floating-button",
    },
  });
}

Moreover, you can customize the floating pop-up button's appearance, such as button color and text color, using the following code:

<ColorPicker
  className="w-[130px]"
  popoverAlign="start"
  container={dialogContentRef?.current ?? undefined}
  defaultValue="#000000"
  onChange={(color) => {
    setPreviewState((previewState) => {
      return {
        ...previewState,
        floatingPopup: {
          ...previewState.floatingPopup,
          buttonColor: color,
        },
      };
    });
  }}
/>
<ColorPicker
  className="w-[130px]"
  popoverAlign="start"
  container={dialogContentRef?.current ?? undefined}
  defaultValue="#000000"
  onChange={(color) => {
    setPreviewState((previewState) => {
      return {
        ...previewState,
        floatingPopup: {
          ...previewState.floatingPopup,
          buttonTextColor: color,
        },
      };
    });
  }}
/>

The floating-popup embed type is defined in the EmbedCodes.tsx file as follows:

"floating-popup": ({
  floatingButtonArg,
  uiInstructionCode,
  namespace,
}: {
  floatingButtonArg: string;
  uiInstructionCode: string;
  namespace: string;
}) => {
  return code`${getApiName({ namespace, mainApiName: "Cal" })}("floatingButton", ${floatingButtonArg});
${uiInstructionCode}`;
},

By verifying and providing these parameters, and optionally customizing the appearance, the floating pop-up button and preview function should work correctly ^[1][2][3].

To continue talking to Dosu, mention @dosu.

[EduNetEurope]

It used to work perfectly. We have not changed any settings, neither in cal.com nor on our website. So we think it's a bug.

[theonly1me]

@EduNetEurope Looks like it could be a bug with the embed logic since the preview is broken too. Can you share the embed HTML? I tried replicating this, but it works fine for my embeds.

[EduNetEurope]

`

`

[theonly1me]

@EduNetEurope ah, I see now that you're using a self hosted instance of Cal, it appears that the embed.js is not present at the location specified in the link https://meet.edunet.eu/embed/embed.js, which is why the self hosted Cal instance is unable to find it. That is the reason both your preview as well as the floating button aren't working as expected even though nothing has changed on the Cal UI.

Here's what happens when I try to visit the above link:

[EduNetEurope]

But where did the embed.js go? How did it disappear?

[theonly1me]

@EduNetEurope Since this is a self hosted instance, you'll need to debug that and identify what's going on and that would be the correct way to solve this issue i.e. to check why the embed.js is no longer available at https://meet.edunet.eu/embed/embed.js.

But as a quick fix, you can even replace the https://meet.edunet.eu/embed/embed.js URL with https://cal.com/embed/embed.js in the HTML code you shared and that would get your embed to work.

Updated HTML:

<script type="text/javascript"> 
(function (C, A, L) {
  let p = function (a, ar) {
    a.q.push(ar);
  };
  let d = C.document;
  C.Cal =
    C.Cal ||
    function () {
      let cal = C.Cal;
      let ar = arguments;
      if (!cal.loaded) {
        cal.ns = {};
        cal.q = cal.q || [];
        d.head.appendChild(d.createElement('script')).src = A;
        cal.loaded = true;
      }
      if (ar[0] === L) {
        const api = function () {
          p(api, arguments);
        };
        const namespace = ar[1];
        api.q = api.q || [];
        if (typeof namespace === 'string') {
          cal.ns[namespace] = cal.ns[namespace] || api;
          p(cal.ns[namespace], ar);
          p(cal, ['initNamespace', namespace]);
        } else p(cal, ar);
        return;
      }
      p(cal, ar);
    };
})(window, 'https://cal.com/embed/embed.js', 'init');
Cal('init', { origin: 'https://meet.edunet.eu' });
Cal('floatingButton', {
  calLink: 'maria/e',
  calOrigin: 'https://meet.edunet.eu',
  buttonColor: '#b35117',
  buttonTextColor: '#ffffff',
});
Cal('ui', {
  styles: { branding: { brandColor: '#b35117' } },
  hideEventTypeDetails: false,
  layout: 'month_view',
});
</script> 

With the updated HTML:

[EduNetEurope]

Thank you for now! It should still get fixed, I think.

[PeerRich]

@hariombalhara anything we should do here?

[hariombalhara]

https://github.com/calcom/docker/pull/364

It needs to be merged