Art Storefronts Support Center

Search for answers to your questions by entering keywords below, or look through our knowledge base.

How to: Add Calendly to Your Website

Follow

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:

 

  1. Go to https://calendly.com/ login using your login credentials

    mceclip0.png

    mceclip1.png

  2. Once you are logged in, you’ll be taken to a new page showing your existing events

    mceclip2.png

  3. Right next to New Event Type, please click on the gear (Gear Icon PNG and Gear Icon Transparent Clipart Free Download. - CleanPNG /  KissPNG) icon

    mceclip3.png

  4. A drop down will appear, please click on </> Add to Website.

    mceclip4.png

  5. 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.

    mceclip5.png
  6. 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.

    mceclip6.png

  7. After finishing up with the options, please don't close tis page because we'll come back to it later
  8. Now, let’s switch back to your Art Storefronts Site Manager. Once there, please click on Site Settings.

    mceclip7.png
  9. Under Site Settings, please select the Scripts tab

    mceclip8.png

  10. 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 -->

    mceclip10.png


  11. 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. 

    mceclip11.png
    The Code you need from Calendly starts with Calendly.Init.... and ends wirh });.

    mceclip12.png

  12. Please select Save.
  13. 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.
    mceclip13.png

    mceclip14.png

Was this article helpful? Please let us know how we can improve it here