Hey Calendly Community,

I'm currently working on integrating Calendly into a custom web application, and I'm facing some challenges that I hope you can help me with. Here's the scenario:

I've successfully embedded the Calendly widget into our application, and it works great for scheduling appointments. However, we want to enhance the user experience by customizing the appearance and behavior of the embedded widget to better match our application's design and functionality.

Here are the specific issues I'm encountering:

1. Styling Customization: I'm having trouble applying custom styles to the embedded Calendly widget. I've tried using CSS to modify the appearance, but it seems like some styles are overridden by the default Calendly styles. How can I effectively customize the look and feel of the embedded widget?

2. Responsive Design: Our application is designed to be responsive, but I'm struggling to make the embedded Calendly widget fully responsive. It doesn't resize properly on smaller screens, leading to a suboptimal user experience. Any tips on making the widget more responsive?

3. Event Handling: I need to capture certain events triggered by the Calendly widget, such as when an appointment is scheduled or canceled. I want to implement custom logic based on these events. How can I efficiently handle these events within my custom application?

I would appreciate any guidance, code examples, or best practices that you can share regarding these challenges. If you've successfully tackled similar issues in your projects, please share your insights. Thanks in advance for your help!

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.