Challenge with Embedding Calendly in a Custom Web Application

Hello @Glen44563 - thanks for posting your question! I have some answers and suggestions below.

1. Since the embed is inside an iframe, you’ll be unable to target the Calendly booking page with any CSS or JS on the parent page.
   
   With that said, we do offer some styling options: it’s possible to set the main theme colors on Calendly accounts that are on the Standard tier and above! You will be able to set three theme colors described here in our Help Center article.
   
   These colors can be selected when you are generating the embed code, but you can also manually attach the parameters to the URL. The parameters are background_color, text_color, and primary_color (for the button and link color). The value will be the hex value of the color without a # character.
   
   So a link with black text would be https://calendly.com/example-link?text_color=000000
    
2. Our default embed code should resize its width with the screen, although CSS on the parent page may affect its ability to do this.
   
   By default, our inline embed will expand to 100% of the width of parent container, so I’d recommend making sure your parent container is also responsive.
   
   We do also have a min-width of 320px set to ensure that the booking page is always displayed at the minimum appropriate width. Because of this, I’d also recommend making sure that there isn’t too much whitespace around the embed on mobile because adding a significant margin/padding on the sides can mean that the embed has less than 320px to display in on small screens. This will create either a horizontal scrollbar or cut off the side of the embed depending on your page’s CSS.
   
   The height of the inline embed is not currently responsive to the content so you will need to choose an appropriate fixed height. You can even adjust the height based on screen size by removing the inline height value and using media queries to target the .calendly-inline-widget div’s height instead. I would recommend not making the inline embed too long on mobile as this will hurt usability on iOS in particular.
   
   Our pop-up embed options will also resize with the page by default, so we may need to investigate your specific page’s CSS further if this is not displaying as expected.
    
3. Our embed will send messages to the parent window using window.postMessage() during various steps in the booking flow! Our documentation page on this can be found here.
   
   The page shows an example of the event that will be sent when a booking is confirmed in the ‘Invitee schedules an event’ tab. We also have a code example below showing how you can listen for the embed’s events from your parent page.