Dedicated to Your Success

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

| Get in Touch

How to: Add Calendly to Your Website



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 login using your login credentials



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


  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


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


  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.

  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.


  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.

  9. Under Site Settings, please select the Scripts tab


  10. Under the Body section, please paste the following code:
    <!-- Calendly badge widget begin --> 
    <link href="" rel="stylesheet">
    <script src="" type="text/javascript" async></script>
    <script type="text/javascript">
    $(window).on("load", function ()
    <!-- Calendly badge widget end -->


  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. 

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


  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.


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