Calendly

  1. Home
  2. Knowledge Base
  3. Widget Docs
  4. Calendly

Calendly is one of the most widely used scheduling platforms on the web. Use our Calendly integration widget to add this excellent service to your Without Code website.
This is the perfect widget for small businesses looking to automate the process of scheduling appointments, as well as larger businesses seeking an easy way to schedule meetings, webinars, training and more! Calendly Integrates with Google Calendar, Outlook and iCloud; and even allows clients to make payments during the scheduling process. This widget offers three unique display modes – linked text, embed, and pinned button.

Demo: https://demo.wocode.com/calendly

Tutorial Videos

Setup

Setup at calendly.com

Note: Calendly.com is not affiliated with Without Code, and is used as a third-party service integration for our Calendly widget. The instructions provided below are subject to change, or appear different, if any changes are made on Calendly.com website.

  • Go to calendly.com.
  • If you have an account, log in now. If you don’t yet have an account, click the “Sign Up” link.
  • Proceed through the signup process.
  • Create an event or two.
  • All that’s needed to link up the Without Code widget with your Calendly account is an Event Link. To access your Event Links, click “My Account” in the top menu.
  • On this page, you will see all of your events.
  • If you wish to display multiple events, copy the main account link:
  • If you wish to display a single event, click the “Copy Link” button seen on any event:

Page Placement in the Without Code Builder

  • Place the widget where you would like the Calendly embed to appear on your site.
  • If you utilize the “Popup – Pinned Button” display mode, you may place the widget anywhere, out of the way. The widget placeholder will not be seen when the site is published. Note that placing the widget (using the Popup – Pinned Button mode) in the footer or header will make the button appear on every page of the site. Placing it in the body of the page you’re working on will keep it pinned on that page only.
  • You may notice after dropping the widget that some of the content appears to be cut off (depending on the display mode). The Height setting is the key to insuring that your Calendly events are displayed correctly.
  • After placing the widget on your page, click the Design tab and adjust the Height setting. If you are using the Inline Embed Display Mode, you will likely need to increase the Height to a higher value. Try starting with a value of about 500. If you have more than 2 events to display, you will likely want to use a higher value like 700 or 800.
  • You may need to adjust the Height several times. Be sure to preview the page and complete the process of scheduling an event. If there are an extensive number of times available for the event, this may require a larger Height value. If the time buttons exceed the available space, a scrollbar will appear, allowing the user to scroll to view all times.
  • Do not use the blue grab handle on the widget container to resize the widget. Always use the Height setting in the Design section.

Widget Options

  • Open the widget option panel.
  • Unique ID: a unique ID should be used when multiple instances of the widget will be used on the same page.
  • Enter your Event Link. The process of acquiring the Event Link is described above, in the “Setup at Calendly.com” section.
  • Display Mode: There are 3 main display modes:
    • Inline Embed: This mode embeds an event or multiple events on your site. When a site visitor signs up for an appointment, the signup is completed on your page.
    • Popup – Pinned Button: This mode uses a pinned button (it can be pinned to any corner of the browser window), which triggers an event signup process in a popup.
    • Popup – Text Link: This mode uses a standard text link to trigger an event signup process in a popup. Note that
  • Hide Event Details: This option strips out all of the details for single events only. When this is enabled, all that is displayed is the event title and description.

Styling Options

In the Design section, you will find several styling options. These options are intended to help you style the embed, pinned button and text links options respectively. The individual options within those sections are labeled with their exact function and will not be discussed here in detail as these settings are self explanatory. However, there are two options worth mentioning in the Design tab…

  • Height: this is discussed in detail in the Page Placement in the Without Code Builder section.
  • Popup Button Position: The options in this dropdown allow you to choose the position of the pinned button.
  • Overlay Background Color: This setting allows you to set the background color and opacity for the area seen behind the display options that use pop-ups (Pinned Button and Link Text).
  • Embed Styling > Border: This setting allows you to set a border around the embed. You may choose a border width and color as well.
  • Embed Styling > Mobile-Only Border: This setting allows you to apply the border to mobile only. When this option is enabled, the border will not be seen in desktop view. The purpose for this setting is to allow the embed to be more easily recognized on mobile devices. The embed can potentially require some scrolling to access events and times on mobile, and when the embed background color is the same as the page color (white), this can be confusing to the user. Consider using a mobile-only border in these cases.

Related Articles

Join Now