{"id":5747,"date":"2024-04-14T12:11:32","date_gmt":"2024-04-14T04:11:32","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5747"},"modified":"2024-04-14T12:11:32","modified_gmt":"2024-04-14T04:11:32","slug":"integrate-a-schedule-to-your-website-using-calendly","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/integrate-a-schedule-to-your-website-using-calendly\/","title":{"rendered":"Integrate a schedule to your website using Calendly"},"content":{"rendered":"\n
\n

Calendly has the capability to connect with 6 of your calendars to automatically verify availability, facilitating connections with your top contacts, leads, and customers.<\/p>\n

In this tutorial:<\/p>\n

    \n
  1. Replicate Calendly link<\/li>\n
  2. Integrate Calendly in your layout<\/li>\n
  3. Reproduce popup widget code<\/li>\n
  4. Popup content<\/li>\n<\/ol>\n

    Replicate Calendly link<\/h2>\n

    If you have not yet created one, go ahead and register for a Calendly account. This is important for two main reasons:<\/p>\n

      \n
    1. Enables synchronization with your calendar account (e.g. Google Calendar)<\/li>\n
    2. Facilitates coordination of appointments scheduled through Calendly<\/li>\n<\/ol>\n
      \n
      \"Sign<\/div>\n<\/figure>\n

      Once the account setup is complete, navigate to Home<\/strong> in the Calendly menu, and select Copy Link<\/strong> for the specific event you wish to schedule from the Event Types<\/strong> section. Initially, Calendly provides us with 3 choices (additional can be created if required):<\/p>\n

        \n
      1. 15 Minute Meeting<\/li>\n
      2. 30 Minute Meeting<\/li>\n
      3. 60 Minute Meeting<\/li>\n<\/ol>\n

        Proceed by pasting the copied link into your Webflow project. Various linking options are available, but for this instance, we will utilize a button. You can insert a button onto your page through the Add<\/strong> panel (A) located in the Elements<\/strong> tab under the Basic<\/strong> section. Subsequently, input the copied link into the button settings accessed once the button is added to the canvas. Further understanding link adjustments can be found.<\/p>\n

        \n
        \"The<\/div>\n<\/figure>\n

        Integrate Calendly in your layout<\/h2>\n

        This stage involves acquiring the code snippet for Inline Embed<\/strong>. While in Calendly<\/strong> on the Home<\/strong> page, select the share button associated with the desired Event Type. Subsequently, choose Add to Website<\/strong>.<\/p>\n

        \n
        \"Step<\/div>\n<\/figure>\n

        Opt for the Inline Embed<\/strong> choice, proceed by selecting Continue<\/strong>, then click Copy Code<\/strong>.<\/p>\n

        \n
        \"Step<\/div>\n<\/figure>\n

        Subsequently, the copied code can be pasted in a custom code embed element within Webflow. To incorporate an Embed<\/strong> element, utilize quick find (CMD\/CTRL+E) and search for \u201cembed\u201d or drag an Embed<\/strong> element from the Add<\/strong> panel. Paste the code and select the Save & Close<\/strong> option. More details regarding custom code embed are available.<\/p>\n

        Reproduce popup widget code<\/h2>\n

        This phase involves obtaining the code snippet for the popup widget. On the Calendly homepage, click the gear icon linked to the desired Event Type. Proceed by selecting the Add to Website<\/strong> dropdown menu and opt for the Popup Widget<\/strong>. Select Continue<\/strong> and click the Copy Code<\/strong> button.<\/p>\n

        Place the copied code in the page settings where you want the popup widget to be displayed. Within the Designer<\/strong>, access the page settings, input the code in the Before tag<\/strong> section, save the settings, and publish your project.<\/p>\n

        \n
        \"Step<\/div>\n<\/figure>\n
        \n
        \"Step<\/div>\n<\/figure>\n

        Popup content<\/h2>\n

        This stage involves acquiring the code snippet for Popup Text<\/strong>. On the Calendly homepage, select the gear icon related to the desired Event Type. Choose the Add to Website<\/strong> dropdown menu and select the Popup Text<\/strong> option. Click Continue<\/strong> followed by the Copy Code<\/strong> button.<\/p>\n

        \n
        \"Step<\/div>\n<\/figure>\n

        Return to your Webflow project. Utilizing the left side toolbar, click the addition symbol. Within Components<\/strong>, drag an Embed<\/strong> element into your design for the Calendly<\/strong> link placement. Proceed by pasting the code, then finalize by selecting Save & Close<\/strong>.<\/p>\n

        \n
        \"Step<\/div>\n<\/figure>\n

        Note<\/strong>: Text styling modifications applied to the parent element of our HTML embed (can be any div block, section, or container as a parent element) will reflect on the text style of the HTML embed.<\/p><\/blockquote>\n

        \u200d<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Use Calendly to schedule meetings right from your Webflow site.","protected":false},"author":2,"featured_media":5748,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[296],"tags":[],"class_list":{"0":"post-5747","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-integrations","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5747","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=5747"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5747\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5748"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5747"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5747"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5747"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}