Overview
Calendly is your hub for scheduling meetings professionally and efficiently, eliminating the hassle of back-and-forth emails so you can get back to work.
You can add this as a feature on your website to help with your scheduling.
Please Note: To use this feature, you will need:
An ASF account
An account with Calendly
An existing event in Calendly
Let’s get Started:
Go to https://calendly.com/ login using your login credentials
Once you are logged in, you’ll be taken to a new page showing your existing events
Right next to New Event Type, please click on the gear (
) icon
A drop down will appear, please click on </> Add to Website.
The platform will give you a few options. Please feel free to pick your preferred option. For the purposes of this tutorial we’ll be using Pop Up Widget.
Once you choose your options, you’ll be taken to a new page showing some code and some options. According to your preference, you can choose the Button background Color and the Button Text Color.
After finishing up with the options, please don't close tis page because we'll come back to it later
Now, let’s switch back to your Art Storefronts Site Manager. Once there, please click on Site Settings.
Under Site Settings, please select the Scripts tab
Under the Body section, please paste the following code:
<!-- Calendly badge 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>
<script type="text/javascript">
$(window).on("load", function ()
{ COPIED-PART-FROM-ORIGINAL-POPUP-WIDGET-CODE }
)
</script>
<!-- Calendly badge widget end -->
There is a section in the code labelled { COPIED-PART-FROM-ORIGINAL-POPUP-WIDGET-CODE }. We need to replace this code with a section from you Calendly.
The Code you need from Calendly starts with Calendly.Init.... and ends wirh });.
Please select Save.
Final step is to test the integration. Please scroll up and click on the View Live Site. This will launch the front end of your site.
