Scenario / Question
I’m embedding Calendly in a custom web app and need help with three things: styling the widget to match my brand, ensuring it resizes well on smaller screens, and listening for events (like when someone schedules) so I can run custom code.
Overview
- Color Customization: You can customize embed colors via URL parameters, but broader CSS (like fonts) isn’t supported.
- Responsiveness: Use the built-in auto-resize behavior by enabling the resize option on inline embeds.
- Event Listening: Subscribe to postMessage events that the embedded scheduling page sends to the parent window to run custom code.
Step-by-Step Guide
- Choose an Embed Type
- Decide between a landing page, event type page, or routing form.
- All support the responsive inline embed with resizing.
- Customize Colors in the URL
- Use supported URL parameters to change colors on the booking page.
- Other CSS (like fonts) cannot be overridden.
- See the embed options guide referenced in the community answer.
- Add an Inline Embed with Auto-Resize (Automatic Embed)
- Set the data-resize attribute to true on the standard inline embed.
- The parent element automatically resizes based on content and scrolls into view when needed.
- Expected result: The iframe height adjusts as the booking flow changes, improving mobile/small-screen UX.
- Add an Inline Embed with Auto-Resize (Advanced Embed)
- If you use Calendly.initInlineWidget(), pass resize: true in the options object.
- Expected result: The embed adjusts its height during the flow without manual calculations.
- Ensure Required URL Parameters Are Present
- The embed must include embed_domain and embed_type=Inline in the URL for resize messages to be sent.
- widget.js normally adds these automatically; you can also include them yourself.
- Expected result: The embedded page posts resize messages to the parent window.
Key Notes & Limitations
- Color customization is supported via URL parameters.
- Fonts and broader CSS (including overriding Proxima Nova) are not supported via custom CSS.
- Auto-resize applies to inline embeds and requires the resize option to be enabled.
- Resizing and event notifications rely on messages from the embedded page; ensure embed_domain and embed_type=Inline are present.
Related Questions (FAQ)
Q: Does auto-resize work for routing forms and event type pages?
A: Yes. Auto-resize applies to landing pages, event type pages, and Calendly routing forms when using inline embeds with resize enabled.
Q: Do I have to add embed_domain and embed_type manually?
A: Not usually. widget.js adds them automatically, but you can include them if you’re building a custom implementation.
