Seamlessly Integrate Calendly Scheduling Tool into Your Square Space Site Using HTML
HTML is a vital piece in a users expiernce when accessing your website. Or, on an even broader scale, the internet entirely. HTML touches every aspect of the internet and your website. Hypertext Markup Language (or HTML) is the very computer language that allows for website creation that anyone on the internet has the capability to view. Now I am not going to get into the code or the nitty and gritty of how that works. I’ll save that for someone else that someone more computer savvy than me to explain. You can also check out a good resource HERE. What I am going to explain is how I have seen the positive impact of using HTML in my own website and how you can also use it to GREATLY enhance your website. Afterall, your website is where you are going to actually conduct your business that your Social Media accounts should be driving traffic to!
There are millions of ways to incorporate HTML into your website. Some more intuitive than others. Here, I am going to show you how I used HTML (the easy way) to create a scheduling tool for clients to meet with me and discuss projects or partnerships. For the actual scheduling program I use, check out Calendly. There are free and paid versions of this, but for the purpose of getting it setup in your Square Space account, it doesn’t matter which you use. Using the HTML method to link these programs allowed me to create a seamless and beautiful scheduling platform in my website that didn’t take my users outside of my website. My goal was to make the expiernce as easy as I could for the user and HTML provided that opportunity for me. Additionally, you can link an online meeting platform such as Zoom to your Calendly to keep things extra easy!
Step 1: Create an Account on Calendly
The process is very easy. Simply follow the directions as outlined by Calendly to do so and select the criteria that is relevant to you. You will need to ensure your Calendly account is setup using whatever email you are using with your business.
Step 2: Create an Event on Calendly
Now that you have created your account with your business email, it is time to create an event. For me, I used the standard 30 minute meeting template that is provided upon creating your account. This was exactly what I needed for creating a meeting with clients to discuss projects and partnerships. But you can create whatever type of meeting you want.
Step 3: Open a second tab for your Square Space Management Portal for your website and set conditions.
In order to link your Calendly and Square Space, you need to have each open in their own tab. This will simply make the process easier. Go ahead an navigate to the page on your website that you want to add your scheduling block. Now, add a an “Embed” block to the page. See below for an example. Depending on your page setup, you may have to add a “Section” then add a “Embed” block.
Step 4: Get the HTML data from Calendly
Go back to your Event on Calendly and select “Share”. Then Select “Add to website”. Next, select how you want it to appear on your site. I wanted it to be a seamless integration so I chose “Inline embed” and then click “continue”. Adjust the settings to personalize the appearance on your site. You Likely will want to make it match your Site’s theme. Lastly, copy the HTML code on the right hand side of the popup box by selecting '“Copy Code”.
Step 5: Paste the HTML Code into your Squarespace Page
Navigate back to your Square Space Page you want to embed your scheduling tool into. Select “Edit” then “Code Snippet” then “Embed data”. Paste your HTML code here. Select “Save” and “Exit” and you can now view the tool on your site.
Prefer a FORM over a CALENDER Display?
If you would prefer to have a Form that a Client fills out over a calendar that displays, you would simply need to create a routing chain on Calendly then Share this to your Square Space site the EXACT same way.
