"Ultimate Guide to Integrating Calendly with Shopify 2.0: A Step-by-Step Tutorial with Inline Embed"

Introduction

Are you tired of manually scheduling appointments with your customers? Do you want to provide a seamless booking experience on your Shopify store? Adding a Calendly calendar to your Shopify 2.0 section can help you do just that. In this article, we'll show you how to add a Calendly calendar to your Shopify 2.0 section using JSON and custom liquid.

Prerequisites

Before we dive into the step-by-step instructions, there are a few things you'll need to get started:

• A Calendly account
• A Shopify store on version 2.0
• Familiarity with JSON and custom liquid

If you're missing any of these prerequisites, be sure to sign up for Calendly and upgrade your Shopify store to version 2.0 before proceeding. Additionally, you may want to brush up on JSON and custom liquid, as we'll be using these tools extensively throughout this tutorial.

Step-by-step instructions

Create a new section in your Shopify store

First, you'll need to create a new section in your Shopify store where the Calendly calendar will appear. To do this, go to your Shopify dashboard and click on "Online Store" in the left-hand menu. Then, click on "Actions" and select "Edit Code" from the drop-down menu.

Next, click on the "Sections" folder and select "Add a new section". Give your new section a name, such as "Calendly Calendar", and click "Create Section".

Add HTML Code to Section

This code is for a Shopify 2.0 section that adds a Calendly calendar to a page on a Shopify store. The code consists of three parts:

1. HTML markup: The first part of the code is an HTML markup that defines a <div> element with a class of "calendar" and an ID of "calendly". Inside the <div> element, there is an anchor link with a name attribute that is set to the value of the "anchorlink_appt" setting. The <a> element uses the render function to render a snippet called "hhb-calendly", which is responsible for generating the Calendly calendar.
2. CSS styles: The second part of the code is a CSS styles block that sets the padding for the "calendar" class.
3. JSON schema: The third part of the code is a JSON schema that defines the settings for the section. The schema includes a single setting called "anchorlink_appt" that allows the user to enter a name for the anchor link that is used to scroll to the calendar on the page. The schema also includes a preset called "Calendly-15 min", which is a predefined set of settings for the section.

Overall, this code is used to create a reusable section that can be added to any page on a Shopify store to embed a Calendly calendar. The code allows for customization of the anchor link name and provides a preset for quick and easy setup.

Create snippet on Shopify 2.0

To do this, go to your Shopify dashboard, click on "Online Store" in the left-hand menu, and select "Themes". Click on the "Actions" button and select "Edit Code". Then, click on "Snippets" and select "Add a new snippet". Name your new snippet "calendly.js" and select "Javascript" as the file type.

Add Calendly "Inline embedded" Code to Snippet

To add an inline embed of a Calendly calendar to your Shopify store, follow these steps:

1. First, log in to your Calendly account and create an event type that you want to embed on your Shopify store.
2. Next, click the "Share" button for the event type and select the "Inline Embed" option.
3. Customize the appearance of the calendar by selecting the desired color scheme and other options.
4. Once you're satisfied with the appearance of the calendar, copy the embed code provided by Calendly.
5. In your Shopify admin panel, navigate to the page where you want to add the calendar and open the custom Liquid editor.
6. Add a new section to the page, and paste the Calendly embed code into the snippet.
7. Save the changes and preview the page to see the embedded calendar in action.

This code is used to embed a Calendly inline widget on a webpage. The widget allows your users to schedule appointments or meetings with you. Here's a breakdown of the code:

1. HTML markup: The first part of the code is an HTML <div> element with a class of "calendly-inline-widget". This is where the inline widget will be displayed on the page.

2. Data attribute: The data-url attribute specifies the URL of the Calendly event type or page that the widget is linked to. In this case, the URL is set to "https://calendly.com/mediavinescorp/free-15-min-small-business-consultation". When a user clicks on the inline widget, they will be taken to this Calendly page to schedule an appointment or meeting.

3. Inline styles: The style attribute sets the minimum width and height of the inline widget. In this case, the minimum width is set to 320 pixels and the height is set to 800 pixels. These values can be adjusted to fit the website's layout and design.

4. JavaScript code: The <script> tag contains a JavaScript code that includes the external widget.js file provided by Calendly. This file is responsible for rendering the inline widget on the webpage. The "async" attribute ensures that the file is loaded asynchronously, which means that the webpage does not wait for the file to load before continuing to render.

Overall, this code provides an easy way to add a Calendly inline widget to a webpage, allowing visitors to schedule appointments or meetings without leaving the site.

Closing

Adding a Calendly calendar to your Shopify 2.0 section is a great way to streamline the appointment scheduling process and provide a better customer experience. By following the step-by-step instructions we've outlined in this article, you can quickly and easily add a Calendly calendar to your Shopify store. Plus, with a little CSS and customization, you can make the calendar look and function exactly how you want it to.

If you have any questions or run into any issues while adding a Calendly calendar to your Shopify 2.0 section, don't hesitate to reach out to the Media Vines support team. With our help, you can create a seamless booking experience that will impress your customers and save you time. Happy scheduling!