Calendly is a hosted booking app. We suggest using our Calendly element to embed the booking calendar from Calendly.
While logged into Calendly, all you need is the link to your booking page which you can copy by clicking the copy link text:
To add the element to your page, just click the "+" icon and then the element sidebar will slide open.
Type "Calendly" into the element search to quickly find the Calendly element.
Then just drag the element into the page.
Once you add the Calendly element, click the first icon there to add your calendar link that we copied in the first step above.
Once you add the link then you should see your booking calendar load within the element.
Unfortunately there is not much styling options we can offer since this is just an embed form that we are pulling form the Calendly URL
You can choose a few colors on the color icon for the background, text, and link colors:
NOTE: Only Calendly users with paid subscriptions can use color customization settings.
The alignment option will work when the element is not set to 100% width and is less wide than the column it is placed within.
You can also Reposition the element (1), Clone the element (2), or delete the element (3).
The settings icon will show more options when you can adjust the spacing, width, and alignment. You can also go into advanced options for other more advanced settings as well by clicking the blue "Advanced Options" button.
The Advanced Options sidebar will open if you click the "Advanced Options" button (shown above). You can see that you have options for Positioning where you can adjust the margins and paddings.
You can also choose to show or hide this element on desktop, tablet, or mobile in the Responsive tab. If you would like to add a fade-in or delay, you can do that in the Animation & Delay tab. There are also more options under "Advanced" such as Code before/after element, custom CSS class, etc.
Why can't I scroll to see the calendar while inside the editor?
This is because it is an embed and it is not possible to show it fully in the editor. To see what it looks like, simply click the preview link in the editor:
Why can't I get rid of the sidebar on the live view?
Unfortunately the scroll bar is there due to the way the Calendly embeds work. This is not something that can be hidden.
If you need further help or need assistance with troubleshooting issues with the Calendly element, simply open a support ticket and our team will be happy to help.
