Calendesk
Calendesk is an online booking platform that can display a booking calendar or booking popup on a website.
Key features include:
- Inline booking calendar embeds
- Popup booking widgets
- Popup booking links
Calendesk integrates with ShopWired by providing that can be added to your ShopWired theme and website pages to display booking functionality.
Account creation
Account creation
To begin using Calendesk with ShopWired, create an account on the Calendesk website and create a booking page.
Theme installation
Theme installation
Calendesk provides an embed code that must be added to your ShopWired theme so the booking widgets can load on all pages of your website.
An example of the embed code is shown below:
<link href="https://media.calendesk.com/external/widget/v3/widget.css" rel="stylesheet">
<script src="https://media.calendesk.com/external/widget/v3/widget.js" type="text/javascript"></script>
The code shown above is provided as an example only. You must copy the exact code provided in your own account, as the code and any ID values will be unique to your website.
To add the code to your ShopWired website theme:
- Navigate to Website > Themes
- Select the
code editoroption for the theme you want to edit - Open the
master.twigfile - Paste the Calendesk code just above the closing
</head>tag - Select
save changes
Popup widget
Popup widget
Calendesk popup widgets display a floating button on your website that opens the booking page.
An example of the embed code is shown below:
<link href="https://media.calendesk.com/external/widget/v3/widget.css" rel="stylesheet">
<script src="https://media.calendesk.com/external/widget/v3/widget.js" type="text/javascript"></script>
<script type="text/javascript">
Calendesk.initBadgeWidget({
url: 'https://yourbookingpage.calendesk.net/',
text: 'Make an appointment',
color: '#4650c2',
textColor: '#ffffff'
});
</script>
The code shown above is provided as an example only. You must copy the exact code provided in your own account, as the code and any ID values will be unique to your website.
To add the popup widget to your ShopWired theme so that it appears on all pages of your website:
- Navigate to Website > Themes
- Select the
code editoroption for the theme you want to edit - Open the
master.twigfile - Paste the Calendesk popup widget code just above the closing
</head>tag - Select
save changes
Inline embed
Inline embed
Calendesk inline embeds display a booking calendar directly on a ShopWired website page.
An example of the embed code is shown below:
iframe class="calendesk-frame" src="https://yourbookingpage.calendesk.net/" scrolling="yes" title="Booking" frameborder="0"></iframe>
The code shown above is provided as an example only. You must copy the exact code provided in your own account, as the code and any ID values will be unique to your website.
To add the inline embed to a ShopWired website page:
- Navigate to Website > Themes
- Select
customise your themefor the theme you'd like to install it on - Select
add a new section - Select the
custom HTMLsection type - Paste the Calendesk inline embed code into the Custom HTML setting
- Use the theme editor to position the form on the page
Popup link
Popup link
Calendesk popup links open the booking page when a link on your website page is selected.
An example of the popup link code is shown below:
<a href="" onclick="Calendesk.openModal({ url: 'https://yourbookingpage.calendesk.net/' }); return false;">Make an appointment</a>
The code shown above is provided as an example only. You must copy the exact code provided in your own account, as the code and any ID values will be unique to your website.
To add the popup link to a ShopWired website page:
- Navigate to Website > Themes
- Select
customise your themefor the theme you'd like to install it on - Select
add a new section - Select the
custom HTMLsection type - Paste the opoup ink code into the Custom HTML setting
- Select out of the section and use the theme editor to position the form on the page
Recommendations
Recommendations
- Test the booking calendar and popup behaviour on desktop and mobile devices after publishing theme and page changes.
- If your website uses caching, clear your website cache after updating your theme files.
