Hey everyone. Really enjoying Cal.com for sending out scheduling links, but having a few issues adding an embed to our site: 1 - I tried out the

@calcom/embed-react

package, but it seems to render an iframe and none of the customization options were working so it wasn't possible to make it look like a part of the website as mentioned here: https://cal.com/resources/feature/embed Is there a way to render a customizable widget itself and not an iframe? The flash of a white background of a loading iframe kind of breaks the vibe of a dark site. 😅 2 - A regular iframe is looking better (https://candycode.com/) for now, but it makes layout and spacing difficult since the iframe has to be fixed size. Also about half the time it incorrectly reports "No availability in May". Is that a known issue? Couldn't find anything about it in GitHub issues. Any help is really appreciated. Thanks! ☺️

cc: @Hariom Balhara

@Sophia Michelle Andren Would it possible for you to share a version of your page that uses react embed and shows the problems. Right now, I think you don't see to be using iframe at all embed-react does render iframe. There is work going on to expose a set of react components that you can use without iframe. This codesandbox shows an example of changing CSS variables using Embed API. It uses Vanilla JS but the react embed also has the same API You can configure all these css variables https://github.com/calcom/cal.com/blob/main/packages/config/tailwind-preset.js

Unfortunately I had to remove the React embed due to UX issues. I'd love to try out the new atoms solution though! Signing up for the wait list now. 😍

Sure @Sophia Michelle Andren. Thanks for the update 🙏 Though if you want me to look into fixing it, you can just push the embed on a separate page and then I can look into fixing it.

I really appreciate the offer, but I don't think it can be helped. The flash of a white backgound is jarring on a dark site, which is unavoidable with iframes. Also iframes don't render properly inside of Framer Motion layout animations.

• "The flash of a white backgound" - I think that shouldn't happen because we set transparent background on iframe and thus it should take the background of your web page. Will test this one again. • Regarding "Framer Motion Layout animations" - I am not sure. Never tried those. Maybe will look into it in future :)

The transparent background works great once it loads, but because we're rendering it inside of a client-side modal window, it can't be SSRed. So until your transparent background loads, it will show up as pure white.

Ah nice ! Thank you for the link

This solution is working ok for now though Then once Atoms are released, I'll replace the right side of the start menu with a custom booking experience.

I'm (STILL!) having many of the same issues FWIW. Was hoping to inline embed on a landing page, but it's looking to be too unreliable to use.

@Scott Novich Could you please share more details about the issue. Best would be raise an issue here. Do share a test page where I can see the issue and help you out.

@Hariom Balhara will do (and be more specific). I sorted out the main issue I was dealing with (partially, passably) -- but there are still some things acting a bit wonky.