How to Add Calendly to Your Showit Website Template
Calendly is a popular online appointment app that allows your customers to book a call directly from your website. Embedding your Calendly event into your Showit website makes it easy to streamline bookings while elevating the clients / customers experience to do so.
JUMP TO
Step 1: Create an Event in Calendly
Create your Calendly account, and log in. To create an event, click on โCreateโ and โEvent Type,โ to define the type of meeting you want people to be able to schedule through your website.
Once your event is created, youโre ready to add your booking calendar to Showit. To do so, click โShare,โ then click on โAdd to Website.โย
There are several different ways to add the calendar to your website. The most popular are โInline Embedโ and โPop-up Widget”.
Step 2: Embed Calendly on Your Showit Website
Click on โInline Embedโ and hit โContinue”.
Adjust the design settings within the Calendly event to match your branding (if you have the upgraded Calendly account). Once you adjust your design settings (or opt for the default settings), click on โCopy Code”.
Next, log in to your Showit account, and open your website design. Create a โBook a Callโ page by duplicating the โContactโ page in your design. Rename the new page, โBook a Call”.
Update the โBook a Callโ page within Showit to include content that reflects the type of event your clients / customers can book, and delete the contact form thatโs in the canvas.
Next, click on the โElementsโ icon at the bottom center of Showit, then click on โEmbed Code.โ Position the embed code box on your page and resize it accordingly. You can always adjust the size of the embed code box after adding your code.
Next, double-click on the embed code box and paste your Calendly form code, then click โSave.โ The Calendly form will populate into the embed code box within Showit.
Adding a Calendly Pop-Up Widget to Showit
Click on โPop-Up Widgetโ and hit โContinue.โ
Adjust the design settings to match your branding (if you have the upgraded Calendly account). Once you adjust your design settings (or opt for the default settings), click on โCopy Code.โ
Next, log in to your Showit account, and open your website design. Click on the page where youโd like the Calendly pop-up to appear. Then toggle to the โPageโ tab and ensure you have the Page Title selected (it will appear blue when selected).
Find the โAdvanced Settings Tabโ and then โCustom Heading HTML.โ Paste the code and click save.
Conclusion
Adding a Calendly booking calendar to your Showit website is simple. Showit allows you to have a streamlined booking page integrated directly with Calendly to keep your appointments organized. This also ensures the booking process is easy for your clients / customers! Using Calendly and Showit is a great option as it prioritizes your client / customer experience when it comes to booking calls or appointments.
Calendly
