Samuel
Updated :
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.
