Calendly is a plug & play calendar that allows users to book meetings in your agenda.
Creating a Calendly
First you'll need to create an account on calendly.com. Go through the registration process and you'll be logged in to their dashboard.
- Click create in the upper right corner
- Choose Event type
- Create a one-on-one meeting
- Give your event type a name (example: store visit), duration, description
- On the next page you can select a duration. Calendly will not allow meetings to overlap. You can also choose a schedule.
- Complete the setup and head back to the dashboard.
- You can create multiple event types (for example a beauty salon could make different types for each treatment).
Now you've created a Calendly, it's time to embed it on your website. First you'll need the embed code. Click the gear icon and click on Add to website:
Select the type of embed you'd like. In this tutorial we'll use the inline embed version. Click next and copy the embed code.
Add the widget to your website
Now that you have your calendly set up, it's time to implement it on your website.
- Enter the content application of the project.
- Click the plus icon where you would like to place your Calendly.
- Click choose from library and select the + install components tab.
- Search for the plugin banner component. Wait for it to install and add it to the page.
- Copy the embed code in the field. Important: you'll have to add data-smps-nocombine in the code, right after the script tag. See the screenshot below (yellow highlight).
- Click save and leave the panel. The page should refresh and you should see the Calendly!
- If a scroll bar appears, you can increase the height in the embedcode (gray square in the screenshot below).
And here you go. Just publish to your live website and users should be able to book meetings via your website!
For more information about calendly, visit their website or their knowledge base.