Skip to main content
Question

Enhancing Calendly Widget: Styling, Responsive Design, and Event Management

  • 1 June 2024
  • 3 replies
  • 398 views

Hey Calendly Community,

I'm working on adding Calendly to our custom web app, and I could use some help with a few things.

Here’s what I’m facing:

Styling Customization: I want to change how the Calendly widget looks to match our app's design. I've tried using CSS, but it seems like Calendly’s default styles are overriding mine. How can I make my custom styles work?

Responsive Design: Our app is designed to work well on all screen sizes, but the Calendly widget doesn’t resize properly on smaller screens. It looks off and affects the user experience. How can I make the widget more responsive?

Event Handling: I need to know when certain events happen in the Calendly widget, like when someone schedules or cancels an appointment. I want to run some custom code when these events occur. How can I capture and handle these events in my app?

If you have any advice, code examples, or tips on these issues, please share. Your help would be greatly appreciated!

Thanks!

3 replies

Austin
Rank
Userlevel 2

Hey @Doe06475 those are some pretty good goals! I’ll break down some thoughts on each for you. 

  1. Unfortunately this is the requirement that is the most limiting for you. We do certainly have some styling customization but it’s all based on URL parameters that mainly impact the colors of elements on the booking page. There is a pretty good guide on this here: https://help.calendly.com/hc/en-us/articles/223147027-Embed-options-overview#7. Outside of those colors, you aren’t able to change anything else. 

 

  1. We do have functionality that should help you with a more dynamic embed, that adjusts the height based on content. This functionality will resize the parent element of the iframe based on the content of the booking page and scroll to the top of the embed if it is not currently in view. 

     

    The functionality is included in both the booking page and the widget.js script that we use to load our embed code, so it can be used immediately as long as the ‘resize’ option is passed. Adding this option will prompt the booking page to send a message to the parent window, which is used to trigger the resizing action. 

    This can be used both with our automatic inline embed code as well as the advanced inline embed code (Calendly.initInlineWidget()). It will also work for landing pages, event type pages, and Calendly routing forms.

    The message sent to parent window will be formatted like:

    AD_4nXe6YuNKERgJmqzigqEn_0wgSACk_Qsks0I1n1lEnxWwrllG2CE9Oa5AsBzGSeFkCgKJeE119VTKk2sV7Y8dxgxI5x7bjMW4H9iblttC77My9eGzEPKw-gDmowxU47iAm5Bl7yFvVTuPky5LY3xv6gBJiIE?key=jr0zSzFgkOVVoOuYwJGwWQ

    This format is modeled off the embed analytics messages we already send to the parent window. This will now be handled automatically by widget.js but developers can handle this themselves instead if they choose.

    This message will only be sent when certain parameters are in the URL: the embed_domain must have a value and the embed_type must be Inline. Note that these parameters are automatically added by widget.js under normal circumstances, but can be included as variables if needed. The specific variables are: 

    embed_domain=example.com&embed_type=Inline

    The value for embed_domain doesn't really matter in terms of embed functionality.

     

    To automatically resize the standard/automatic inline embed, the data-resize attribute must be set to true. (If it is absent, the default value will be false.)

    For example: 

    AD_4nXfITWZ6oCabYp3wx1WoJrBtG9348rX0kdHtmN1vnn7qKHov6kompcbUaeJlRuf1-5-cdQwppm3mcWE54cgyuTO3vCwQiXwhZU6iOzobdTS2iUF4A9IXRBia2YI9gvpgsEzxBU0UxEe4RMfQm9A6MV1a2dE?key=jr0zSzFgkOVVoOuYwJGwWQ

    To automatically resize the advanced inline embed code, pass resize: true as an option in the object passed to the initInlineWidget() function.

    For example:

    AD_4nXc5rOq106xcem8YMLRInenUQ851zRf-8GCLeoh9wcaYKdsprxp4BesEOYYqfJ_M72M1yWCKOzhE7WV1OJEdTmr7kRJBidqQOnbLqYaMj8aDuvOOWNIz-O_o_gQha4Q4X3XFCos8YS6WAkV7M0b0JEwohM4Q?key=jr0zSzFgkOVVoOuYwJGwWQ
     

 

  1. The embedded scheduling page notifies the parent window of important events during the booking flow. As a developer, you can subscribe to these notifications to fire analytics events or change the state of your app.

    We use window.postMessage() to post events to the parent window. Below are the currently supported events and their corresponding message payload.

    You can learn more about this payload, and how to use a listener here: https://developer.calendly.com/api-docs/2d6c9df9b89de-notifying-the-parent-window.

M

I see it’s possible to customize the colors of my Calendly embed. Is it possible to customize the fonts – i.e., to override Proxima Nova in favor of my site’s web fonts? My CMS is headless WordPress, if that matters.

Austin
Rank
Userlevel 2

Hey @Matthew34166 currently only the colors are customizable, not the font and other elements of the CSS. I know that this has been a point of feedback for many, so hopefully some updates developer at some stage. 

Reply


Terms & ConditionsCookie Settings