Embed broken since 4.0.8

[kaumudpa]

Embed is broken since 4.0.8

Console gives error

Match of WEBAPP_URL with ALLOWED_HOSTNAME failed { WEBAPP_URL: 'https://cal.ngx.0xmetalabs.com', ALLOWED_HOSTNAMES: [

] }

[dosubot[bot]]

To fix the embed issue you're experiencing since updating to version 4.0.8, ensure that the embedCalOrigin is correctly set in your embed code. This is necessary because the application checks if embedCalOrigin differs from WEBAPP_URL and WEBSITE_URL. If it does, it includes the calOrigin property in the embed code, which is essential for the embed functionality to work properly.

Here's what you need to do:

1. Confirm that the WEBAPP_URL in your environment matches your web application's actual URL and is listed in the ALLOWED_HOSTNAMES array to prevent mismatches.
2. When embedding, make sure the embedCalOrigin parameter matches your Cal.com instance's URL. This is crucial if you're self-hosting Cal.com or using a custom booking URL.
3. Check your deployment's environment variables or configuration files to ensure WEBAPP_URL is correctly defined and included in ALLOWED_HOSTNAMES.
4. If your setup requires a custom calOrigin, include it in your embed code as shown below:

import Cal, { getCalApi } from "@calcom/embed-react";
import { useEffect } from "react";

export default function MyApp() {
  useEffect(()=>{
    (async function () {
      const cal = await getCalApi(/* Your namespace or other arguments here */);
      // Your UI instruction code here
    })();
  }, [])
  return <Cal
    calLink="your_cal_link_here"
    style={{width:"100%", height:"500px", overflow:"scroll"}}
    calOrigin="your_embed_cal_origin_here"
  />;
};

Make sure your_embed_cal_origin_here accurately reflects your Cal.com instance's URL and is included in the ALLOWED_HOSTNAMES array. This should resolve the error you're encountering.

Details

Sources

• packages/features/embed/lib/EmbedCodes.tsx

About Dosu This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.

[muhllys]

I tried hard coding NEXT_PUBLIC_EMBED_LIB_URL in .env, didn't work. The only solution for me was to get the embed code and replace the embed url with the original cal.com one like this:

https://cal.ngx.0xmetalabs.com/embed/embed.js replace this to https://app.cal.com/embed/embed.js

But this definitely seems to be a bug that needs to be solved.

[l0g1x]

Hi there, any chance this can get a closer look? We use the react embed as a part of our sales process to allow people taken off our waitlist to schedule a demo. Right now, nobody can schedule a demo

[rafarc21]

In my humble opinion this should be of high priority since it breaks a main and client facing feature of the application.

[jbenguira]

This bug is still here in the latest version :(

[aribn]

Looks like this may be addressed with calcom/docker PR #364, but we're still seeing it broken as of v4.3.1.

[jankarres]

Still broken as of v4.3.4.

[hariombalhara]

@jankarres Could you confirm that you still don't have the embed folder with these files

[jankarres]

@hariombalhara Sorry, it was my bad. We use the Docker container from calcom.docker.scarf.sh/calcom/cal.com. Inside, the requested files exist once we have upgraded to v4.3.4.

But the reverse proxy with caching that we use before the instance has not yet been completely flushed. Due to the bug in the previous version, the 404 errors of the static files were still cached.

[hariombalhara]

Awesome !! Do you think those caching could be a fault from our end, like cache headers are not correct maybe for 404 pages.

Anyway, I am closing this ticket as you have verified that files exist

[jankarres]

The script is embedded via /embed/embed.js without a version number, e.g. as a query parameter, which also seems to make sense. However, this means that if reverse proxies cache static assets, these have to be flushed manually after an upgrade from Cal.com.

I see no issue here on your side.

[kaumudpa]

I can conform this is resolved in V4.3.5