Embedding Calendly Links into Content

Calendly Selector You can embed a Calendly page in your Content.

This is a great way to schedule resources such as Maker Spaces or Conference Rooms.

You should already have one or more Calendly links for the resources to be scheduled.

To get the link, login to your Calendly account, and select "Add to Website" from the settings menu for the resource to be scheduled. On the next page, select "Inline Embed" and you'll get some code.

Add to website

Copy only the portion between the <div> ... </div>:

Calendly code snippet

Then, within the content for that resource, you'll add that code to enable the link:

  1. Edit the main content for this item, pasting the code you copied:
    <div class="calendly-inline-widget"
         data-url="https://calendly.com/YOUR_SCHEDULING_LINK"></div>
    • YOUR_SCHEDULING_LINK is customized for each content item. This allows you to use different links per item (say, if you are scheduling different resources). Or, using the same link for multiple items.
    • Use the source code editor to enter the text.
      source code editor button
    • You may add the div to a different field if you like to display the Calendly information in another position within this items, but the field must be enabled for advanced editing ("Text and Images (Formatted)").
  2. Within your copied code, add another attribute-value pair setting data-auto-load to false:
    <div class="calendly-inline-widget"
         data-auto-load="false"
         data-url="https://calendly.com/YOUR_SCHEDULING_LINK">
    </div>
  3. You can add some styling information to the div, such as style="min-width: 320px; height:630px".

See also:

Search:


Was this information helpful?
 
Suggestions for improvement?

Still need help?