Calendly

Calendly is an online scheduling platform that enables visitors to book appointments directly through your website. It allows you to offer available time slots, automate confirmations and collect booking information without manual scheduling.

Calendly provides customisable booking pages, automated notifications and integrations with popular calendar providers to support appointment management.

Key features for Calendly include:

Custom booking pages that allow visitors to schedule appointments at available times
Automatic email and calendar notifications
One-to-one meetings, group events and team scheduling
Customisable booking forms to collect information before meetings
Integrations with Google, Outlook and iCloud calendars
Embeddable inline widgets, popup widgets and popup text for websites

Calendly integrates with ShopWired by adding embed code to your ShopWired theme or individual website pages to display a ‘book now’ button on website pages allowing your website visitors to book an appointment.

Calendly does not integrate with ShopWired products. It is not possible to use a ShopWired product to take payment for an appointment while using Calendly to provide availability or scheduling.

Calendly does not integrate with ShopWired Payments.

ShopWired can only provide support to you on the instructions provided in this help guide, for assistance with your Calendly account contact Calendly support directly.

Account creation

To begin using Calendly with ShopWired, create an account at the Calendly website. After your account is created, configure your event types and booking settings within your Calendly dashboard.

Installing Calendly on your ShopWired website

Calendly can be installed using either an inline embed (a full booking calendar on a page) or a popup widget (a button or badge available sitewide).

Inline embed

Use this method to display a full Calendly booking calendar directly on a landing page or contact page.

Navigate to your Calendly dashboard and open Event types
Select the three dots for the event type
Select Add to website
Select Inline embed
Copy the embed code provided, similar to the example below:

<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" data-url="https://calendly.com/yourname/30min" style="min-width:320px;height:700px;"></div>
<script src="https://assets.calendly.com/assets/external/widget.js" async></script>
<!-- Calendly inline widget end -->

Add this code to your ShopWired account:

Into a landing page or other page as a custom HTML element
Navigate to Website > Themes and select customise your theme
Select add a new section
Select the custom HTML section type
Paste the embed code into the Custom HTML setting
Use the theme editor to position the Calendly widget on the page

For popup widgets that appear across all pages of your website, use the popup widget code, similar to the example below:

<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript"></script>
<script>
Calendly.initBadgeWidget({
  url: 'https://calendly.com/yourname/meeting',
  text: 'Schedule a meeting',
  color: '#00a2ff',
  textColor: '#ffffff'
});
</script>

Add this code to your theme’s master.twig file:

Navigate to Website > Themes and select the code editor option for the theme you want to install it on
Add the code just above the closing tag

To add a popup text link that opens your Calendly booking form in a modal window, use the popup text code provided by Calendly, similar to the example below:

<!-- Calendly link widget begin -->
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>
<a href="" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/emma-shopwired/30min'});return false;">Schedule time with me</a>
<!-- Calendly link widget end -->

Add this code to your ShopWired account:

Into a landing page or website page as a custom HTML element
Navigate to Website > Themes and select customise your theme
Select add a new section
Select the custom HTML section type
Paste the popup text script into the Custom HTML setting
Use the theme editor to position the link on the page

Recommendations

Create clear booking pages

Include information such as meeting purpose, expected duration and any preparation required to help visitors choose the correct appointment type.

Adjust availability settings

Ensure your available booking times accurately reflect when appointments can be accepted.

Enable reminders and confirmations

Use Calendly’s automated notifications to reduce missed appointments and support clear communication.

Test on desktop and mobile

Check widget visibility, loading behaviour and form fields across devices to ensure a consistent booking experience.