Published by Calendly - June 25, 2018

How to schedule more demos—embed Calendly into your website

Your website visitors can schedule time to connect with Calendly’s sleek embed options!

Convert website visitors to schedule demos and other important meetings, without taking them away from your site, using our embed options.

This solution helps our customers achieve big wins—one sales team even doubled demos scheduled from their inquiry page.

Calendly’s sleek embed options

There are three easy ways to embed Calendly into your website:

1. Inline

Calendly appears seamlessly within the body of your site.

Embed Calendly - Inline

2. Pop-up Widget

A “Schedule time with me” button hovers in the corner of your site, and when clicked, opens Calendly in a pop-up window.

Embed Calendly - popup widget

3. Pop-up Text

Add your preferred text to the body of a page, which opens Calendly in a pop-up window when clicked.

Embed Calendly - popup text

Want to try out the embed experience from the perspective of a website visitor? Visit our demo site to explore. Please note, scheduling time will add a “fake” meeting to your calendar so you can see the full experience. We recommend deleting that meeting after scheduling.

Schedule with invitees at the height of their interest

Embedding Calendly on your site is a great way to capture time with your visitors—whether they are prospects, customers, candidates, students or others—at the height of their interest, while continuing to guide them through your most valuable content.

Virtru uses Calendly to help its sales team keep up with a high volume of leads that come through its website. Once a prospect clicks on the “Request a demo” CTA and signs up, they are directed to a “thank you” page that gives them the opportunity to schedule immediately. The result? Virtru doubled demos scheduled among interested leads—from 30% to 61%—within the first month of using Calendly.

John Doherty, CEO and co-founder of Credo, embeds Calendly on the Credo website where interested prospects can immediately schedule a time to talk with him. He found that using Calendly directly on the site increased conversions—he went from talking to 50% of those that inquired to 80%.

Grab your embed code and use our quick guides to get started.

  • Does this work for teams too? I tried embedding using my team URL and it says the page cannot be found..

    • Sorry about the trouble, Andrew. Yes, the embed feature works for team pages, too. Any possibility of a typo in the team page’s URL? If everything looks good but still isn’t working, let us know at support@calendly.com and we’ll work it out.

  • Would be great if you had a demo page of this so we could see what it actually looks like.

  • Adam Saven

    Congrats on the update! Is your team working on a product for Dev teams to integrate calendly into their offering? For example, for a social networking site: a way for users to schedule a time to meet up leveraging some sort of calendly integrated product. Does that make sense? Happy to explain in more detail.

  • Ernesto Gutierrez

    Great Job Calendly Team – such a great new option.

  • Katarina Makmuri

    Thanks for the update, Claire! Calendly continues to impress! Would this widget be imbeddable in live chat windows?

  • skipshean

    This is very close to exactly what I need — is there a way to now add a conversion pixel after someone books an appointment?

    • Alex Cruzet

      You don’t need a conversion pixel! The evidence is in the fact that the client booked an appointment!

    • Rob Stella, CFP®

      Create a thank you page, have calendly forward the person to that page after scheduling, and add a conversion pixel there.

  • Matt

    Yay – this is awesome! Great timing too!

  • Alex Cruzet

    Wow! That’s all I have to say. I’ve been looking for this solution for the longest time. I’m adding this to my website today!

  • Have you guys implemented the First Name, Last Name fields?

  • Briana

    Just applied it to my site. Love it!

    • Tuan Nguyen

      siiickkk! Can’t wait to do it for me!

  • David Rojas

    Fantastic news!

  • togume

    Very cool! Any ideas on how to embed into an email? There’s many times that I send the link to people, but it would be great if the email would contain the options embedded. Thanks!

    • The short answer is you can’t display it within an email, just the same as you cannot embed Youtube videos and the like.

      • togume

        Unhelpful reply, @jared31337:disqus… This functionality is possible using Mixmax, and I’d love to have something similar with Calendly. https://uploads.disquscdn.com/images/626519d817217a98e2da89d80fcdef550fe0e6533df896bffabc5d5e557dca39.png

        • United States of Bonerland

          That wasn’t unhelpful at all; he clearly explained technical limitations. The functionality you’re showing with Mixmax is a table of generated links that effectively become one-click appointment booking.

          But if you’re using something like Calendly because it blocks out unavailable times, that can’t be feasibly implemented in email with current tech. There are a few similar solutions, but no direct implementation method.

          Don’t be unnecessarily harsh on people – it makes everyone else want to point out how you don’t understand different technical limitations of certain solutions.

          • Raphael Tant

            I love your answer :-),

            But from a technical perspective, just my 2 cents, what about using dynamically generated images that show the unavailability ? on the email client side as the images are called dynamically, then the availability will be accurate and then use the link trick to book it 😉

            Am I correct, or I miss something ?

          • United States of Bonerland

            I’d thought of that! 😀

            The problem is, what if someone’s email client downloaded the images before one of the slots was taken up? Then a time would still be shown as available when it was, indeed, unavailable. They would find out when they clicked through and thus experience a “dissatisfaction” (to borrow Disney’s term).

            I’m sure a lot of email clients (Gmail) download whenever the email is opened, but I’m also sure some clients (such as desktop software clients) wouldn’t download more than once.

            In the end, you’d still be stuck clicking through to go to the signup page – basically what @jared31337:disqus said. Not bad, but not as elegant as it will be in 2-4 year when email gets better.

          • I create an image that looks like the calendar they would click, and I hyperlink it to calendly or YouTube or whatever, so even though it’s not perfect, it still looks embedded.

          • United States of Bonerland

            Yep! That’s the best solution right now. At least it gets users where they need to be. 🙂

    • Mariya Bouraima

      I haven’t found a solution for that via Calendly, but for scheduling within emails we always use Assistant.to. Works perfectly in Chrome with gmail-based work emails and regular gmail. Plus it’s free, which is always nice!

    • DominikKalisch

      Yes, it should work if you embed the original site via iframe. However, not all email solutions allow this. Here is a list of email clients that allow/disallow iframe in the email body: https://www.campaignmonitor.com/blog/email-marketing/2010/08/do-iframes-work-in-email/

  • Terry

    Really like it, any chance to have the popup widget button show on the top of the website, to have the whole bar horizontal, with text in the middle to click to book a time. Why? Lots of Saas implement chat box like intercom, livechat, etc, and all their widget box shows on the bottom right corner, with calendly button together it will mass up.

  • Maria Frantz

    Is it possible to have the embedded widget rotate through different calendly websites? For example, we round robin amongst our account executives on who will get the next demo request. What’s the best way to mimic this with the embeddable link? Very cool feature!

  • José M Montoro

    That’s really good. Already installed it. Congrats, and thanks!

  • Kaci

    Looks great! I tried the pop up widget. Is there a way to apply it to only select pages on your website? I tried applying to just the home page (using Weebly) and it carried through to all pages.

  • Matt Ryan

    Love it. Already implemented. Cool beans.

  • Brandye Wilson-Manigat

    Yes!!!! I needed this!! Thank you 🙂

  • Briana

    Ok, the desktop version is PERFECT. I just tried to look from my mobile device (iPhone) and it doesn’t look so clean. Some of the scheduling is cut off. Please let me know of any updates on the embedding code.

  • I want a gmail plugin so I dont have to constantly type in “give me a call, pick a time” and go grab my link. You’ll save me 10 minutes a day with a shortcut in gmail for that.

    • MisterD

      Allan, all you have to do i use Gmail’s “Canned Responses,” which you must turn on in the Labs section of Gmail’s settings. I use it to link to my Calendal and it’s a huge timesaver.

  • Sarah Hembree Ramos

    I love this and tried to imbed my Weebly popup code and the button is not anchored where I put it – it sort of hovers over the page. Please help!

  • Crystal

    I tried to embed it into my canvas course homepage and it wouldn’t work. 🙁

  • Tested with Squarespace and it works great.

  • berleena

    So excited about this, thank you!

  • Nice addition.

  • Bradpaulp

    Has anyone tried on mobile/touchscreen device using the pop-up widget? You can tap the widget in the bottom corner, but then it doesnt allow scrolling. When I scrolled through available times, it was scrolling the background and not the list of times available… scrolling with a mouse worked on desktop though. Either an issue with my site or with the touch input of the widget.

    • Briana

      Definitely an issue with me too on the mobile end of things. I wrote about it on the blog yesterday. Awaiting a response.

  • Mariya Bouraima

    Looooving this new feature! Been waiting on this for a long time. What a nice, subtle button at the bottom right that pops into convenient scheduling right on the page. And it happens to match our cyan accent color perfectly 🙂 Thanks so much, Calendly team!

  • David Needham

    Great – this is really helpful.

    If you’re looking for feedback, I’d love to see a way to control what is displayed in the embed:
    – Since this is being embedded into our website, we don’t need to see the logo + name in the header of the embed.
    – Perhaps there could also be a checkbox to only render as the mobile version with columns, despite the width?
    – I’d also love to see it take up the full width / height of the space provided rather than being fixed.

    I acknowledge that some of these requests can be accomplished by changing my code after it’s generated, but I’d imagine you’d want everyone to be able to do this. Thank you!

  • Until any feature like this is completely mobile responsive this is a waste of everyone’s time.

  • I’d love to have the option of not seeing the logo and name of my business in the “Inline” text, as it becomes part of my website.

  • Wonderful update! I’ve noticed it doesn’t seem to work well on mobile browsers so would be fantastic to have this in a future update!

  • I want to embed only one event type and not give the visitor a menu of events? Say embed just my callback event?

  • Ricardo James

    AWESOME!!

  • JP La Torre

    Hi, I’m having trouble getting rid of the scroll bar.

    Check out: https://caylent.com/schedule-demo to see what I mean. I’ve tried editing the CSS as adding overflow: hidden; for the div class but that didn’t work.

    • Calendly

      Hi JP –

      We would be happy to help! Please email support@calendly.com and they will be able to trouble shoot the problem with you.

    • Hi JP,
      Did you get a solution to this? I’m having the same problem.

    • jenkinzz

      Here’s the solution, for posterity’s sake:

      Forget the embed code that the embed wizard gives you, and simply insert this iframe:

      Support told me to use height=”100%” but it didn’t work for me.

    • A “Schedule time with me” button hovers in the corner of your site, and when clicked, opens Calendly in a popup window.

    • iframe .html {overflow:hidden;}

      Josh.

    • A “Schedule time with me” button hovers in the corner of your site, and when clicked, opens Calendly in a popup window.

  • galulex

    There is no way to handle scheduled event through inline widget. It would be nice to have some callback where I can see if the event successfully scheduled.

  • Jill Gold

    Link to “Grab your embed code” is broken

    • Calendly

      Thanks so much for pointing that out, Jill! The link has been updated. Let us know if there’s anything else we can do to help!

  • Sylvia Plath

    Hi, is there a way to not show your account picture in the embedded area?

    • Calendly

      Hi Sylvia,

      Our customer success team will be happy to help you with that! They can be reached at support@calendly.com.

    • Can change the visibility of the element in CSS.

      iframe .title-wrapper .avatar {visibility:hidden;}

      Josh.

  • Bfine

    Hello – when you embed it “inline” and the person books that way, is there a screen that comes up to say “Thank you” or “Confirm” that it was booked? Or do we need to create that?

    • Calendly

      Hi Bfine! Our customer success team can get you the answer you’re looking for. Please send them a note at support@calendly.com for more information!

  • Alyssa Robinson

    I’m trying to add the embedded code into my WordPress.com site, and nothing shows up? Only a link to calendly. I thought it was going to embed a calendar into my site so my viewers wouldn’t get re-directed to another site?
    Code I keep being told to use. Also I’m using the inline option.

    • Calendly

      Hi Alyssa –

      I’m sorry you’re experiencing trouble with this! We are happy to help. Please email support@calendly.com and we will be able trouble shoot the problem more quickly by exchanging more characters.

  • Adam Bloom

    I’ve searched and searched for this – can we pass parameters from a pre-existing form to the Calendly widget so users/site-visitors don’t have to enter email/phone twice? Is there a URL that explains this?

  • Leader Martial Arts

    Hi I embeded calendly on my website inline. and it sets the time to central instead of eastern and it changes my appointment times. how do i fix that?

    • Calendly

      Hi –
      Could you please email support@calendly.com with this question? We will be able to troubleshoot and look at your account settings with you! Thank you

  • GTTNCO

    Your pop up widget is creating a second scroll bar on my site as well as causing all css animations to fail. Any idea on how to fix?

    • Calendly

      Hi –

      So sorry to hear that! Could you please email support@calendly.com? Our team will be able to look in to your account and trouble shoot this problem for you!

  • James Richmond

    is it possible to change the location of the button/widget?

    • Calendly

      Hi James! Our customer support team would be happy to answer this question for you – they can be reached at support@calendly.com.

  • oppid an library
  • oppid an library
  • oppid an library