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]

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.

[Muhlis Olcay]

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.

[Krystian Gebis]

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

[Rafael Rjeille]

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