Add a calendar to your site with Calendly — Webflow tutorial

By | March 4, 2020


Calendly helps you schedule meetings without
the ba— Can we replace that photo? Calendly helps you schedule meetings without
the back and f— That’s so much worse. [Stacy] Sorry! We’re going to teach four different ways to
connect Calendly to Webflow. We’ll cover a simple link, we’ll embed a calendar
right in our design, we’ll do a popup widget, and we’ll do popup text. Part 0. Let’s first sign up with Calendly. If you’ve already done this and you’ve connected
your calendar, you can skip to Part 1. This is their marketing site — we can sign
up if we haven’t already. This part’s important for two reasons: number
one, it lets us sync our calendar account (in our case, we’re syncing with Google Calendar). This way we can prevent calendar collisions
(or double booking appointments), and it’ll synchronize any appointments made through
Calendly. Now, you can go back and configure these connections
under Calendar Connections at any time. Okay. Let’s go back home. That’s part 0. This…is part 1. How do we copy a booking link? Whatever event we want to schedule, let’s
copy the link. Back to the desk? [Grimur] This is awkward. In Webflow, we want to paste that direct link
— and we’ll use a button here. (We’re just going in, and pasting the URL.) When you publish the project? Pressing that button… takes you to the scheduler
on Calendly. That’s part 1. Part 2? Inline embed. Let’s go in and choose to add this event to
our website. Three options. To save time, we’re going to cover all three
of these at once. Click the option you want. Press continue. Then copy the code to your clipboard. Now. Why did we do a three-across design with three
separate recordings? Would it have saved time if we just copied
and pasted the same video three times? And, doesn’t describing that now exceed the
time we saved by doing this anyway? Grímur: I’m not even following. Stacy: We can do a sentence diagram. Grímur: Are you serious? Since we selected inline embed, and copied
the code to our clipboard, all we have to do is paste it in a custom code embed in Webflow. So. Let’s drag that into our layout (we’re just
dragging in an Embed element). Is that all? No. Now we paste. Save and close. Let’s publish our changes. If we go to the live site? Calendly. Now. You might notice a scroll bar — this is
part of Calendly’s design, and it works great for selecting a time, especially if you have
absolutely nothing on your calendar. Like Stacy. If that’s an inline embed? What does a popup widget look like? Like this. There’s a picture and a description right
on the page. Which we’ll zoom into now. You can configure what you want to configure
for the popup widget, then copy that code to your clipboard. Back in Webflow? All we have to do is go to the page settings
for whatever page we want the popup widget to appear. On. (…on whatever page we want the popup
widget to appear.) Let’s paste this before the closing of the
body tag (we’re just pasting the code we copied to our clipboard). Now. Why are we pasting it here? (Let’s save changes by the way…) Can we use an embed element instead? Sure. But to keep things clean, we’re putting the
code (we’re pasting it) in our page settings so the embed element isn’t messing with our
layout preview. Let’s go in and publish the page… and if
we go to that page? It’s right where it should be. That’s a popup widget. What a popup text? Which, saying aloud, makes far less sense
than calling it text popup. Because that’s what it is. A text link that launches the Calendly popup. Popup text sounds like a Keynote effect. Let’s select popup text — you know what,
let’s go in and change this. Right click>Inspect element, let’s go into
the code in our browser and change it to Text Popup. Which is significantly better. Let’s continue. Copy the code. Back in Webflow, we have our layout, let’s
add an embed event (we’re just using the Navigator to place this underneath our paragraph element). Let’s paste in the code. Save and close. Now..since it’s a text link, it’s going to
inherit the text properties of whatever parent in the hierarchy it’s — there’s a better
way to show this. Because the parent of our HTML embed is the
Content div block (this could be any div block, any section or container that’s a parent element),
we can affect the text styling on that parent, and it should pass down (the text styling
changes we make should affect) the HTML embed. So if we tweak our Content div block? We can go over and publish…and when we open
the published page, we can see it matches the styling perfectly. But does it? Yes. Now, we can always go back and customize each
of these options in Calendly — and if we do, it’s important to copy the new code to
our clipboard, and re-paste that code back in Webflow. But that’s it. We covered adding a direct link, and inline
embed, a popup widget, and popup text. All of it integrating Calendly into Webflow. As for people wanting to schedule time on
Stacy’s calendar? As of this recording, her official Webflow
calendar is still linked to this demo site.

15 thoughts on “Add a calendar to your site with Calendly — Webflow tutorial

  1. Jonathan Dubón Post author

    I can't believe how much I've learned and laughed at the same time with these videos. Fantastic job.

    Reply
  2. Trent Post author

    There is definitely someone at Webflow who's job it is to make the jokes for these videos thats it.

    Reply
  3. Kabarza Post author

    this is the best entertaining tutorial on the internet. You are setting standards.

    Reply
  4. Evans Tayuka Post author

    HAHAHAHAHAAA!!! You guys are so so good!

    Reply
  5. Brian DeSimone Post author

    I dont even need to add Calendly to my site. I'm just here for the super-dry humor.

    Reply
  6. Rhayven Jones Post author

    I freaking love Webflow videos. Informative & funny lol

    Reply
  7. iDacian Post author

    Fantastic! I still didn't understand what Grìmur and Stacey where doing on the white board 😂.

    Reply
  8. Intan Cahyaning Post author

    Would you teach me how to create a Calendar link, so we can "save the date" to our google calendar or ios calendar

    Reply
  9. Yous Tubers Post author

    I don't even use Webflow but subbed for the awesome tutorials. Best and most entertaining tutorials in the business, truly an inspiration for what I would like my business vids to be like!

    Reply
  10. Ade Purnama Post author

    I died at the sentence diagram lol, reminds me on my Syntax class🤣🤣

    Reply
  11. Vladislav Zhirnov Post author

    Can you make video game let's plays?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *