Skip to main content
Stephanie27642
Community Member
October 25, 2024
Question

How do I resize Calendly in-line embed for Framer

  • October 25, 2024
  • 1 reply
  • 671 views

Making a website on Framer and trying to embed a Calendly popup. It keeps giving me this narrow long size. Not sure how to fix this. Please help, thank you.

    This topic has been closed for replies.

    1 reply

    Austin
    Community Manager
    Austin
    Community Manager
    October 28, 2024

    Hey @Stephanie27642 

     

    Calendly’s embed is responsive, meaning it will adjust its layout based on the width of the element it’s embedded in. When you see the narrow, stacked layout, it typically indicates that the width of the parent element is restricting the embed to display in a “small window” layout.Here’s how to adjust it:

    1. To display the “large window” layout (where the event details and calendar appear side-by-side), make sure the parent container in Framer has a width of at least 1000px. This will give Calendly enough space to switch to the large layout.
    2. Width breakpoints to consider:

    • Large layout (side-by-side view): 1000px or wider
    • Medium layout (condensed but not stacked): Between 650px and 999px
    • Small layout (stacked view): Less than 650pxThe width of the embed is controlled by the embed code.

     

    You'll want to look for the width parameter in your embed code generated by Calendly and find the width : 1000px value and change the 1000px (value may be different in your case).Please let me know if this helps or if you need further assistance!

    Terms & ConditionsAccessibility statement