How to Set Up Coffee Chats With Calendly And Zoom

Fateh Ali Aamir
4 min readNov 27, 2024

Managing meetings efficiently is essential for building a strong personal brand in today's fast-paced digital world. Whether you’re a freelancer, entrepreneur, or professional, making it easy for others to schedule time with you leaves a lasting impression. Calendly is one of the simplest and most user-friendly tools to streamline this process. Here’s a step-by-step guide on setting up Calendly, adding meetings, integrating Zoom, and embedding it into your portfolio website.

Setting Up Your Calendly Account

  1. Visit the Calendly Website
    Go to Calendly’s official website and click “Sign Up”.
  2. Create an Account
    Use your email, Google account, or Microsoft account to register. Complete the sign-up form, and confirm your email address if prompted.
  3. Customize Your Profile
    Add your name, photo, and branding details under the profile settings to make your account professional and aligned with your brand.

Adding a Meeting Type

  1. Access Event Types
    From your dashboard, click on “+ New Event Type.”
  2. Choose an Event Type
    Select from one-on-one, group, or collective meetings depending on your needs.
  3. Set Meeting Preferences
  • Name Your Event: e.g., “30-Minute Consultation”
  • Location: Choose “Zoom” (if not set up yet, continue without it; we’ll connect Zoom later).
  • Duration: Set how long the meeting will last (e.g., 15, 30, or 60 minutes.

4. Availability:

  • Define the days and time slots you’re available for meetings.
  • Add buffer times if needed.

5. Save & Publish

Connecting Zoom to Calendly

  1. Navigate to Integrations
    In the top-right corner, click on your profile photo, go to “Integrations,” and find Zoom in the list.
  2. Authorize Zoom
  • Click “Connect Zoom.”
  • Log in to your Zoom account and authorize Calendly to access it.

Embedding the Calendly Widget in Your Portfolio Website

Integrating Calendly into your website lets visitors schedule meetings directly without navigating away.

  1. Get the Embed Code
  • From your Calendly dashboard, click “Share” next to your event type.
  • Choose “Add to Website” and select a style:
  • Inline Embed: Embeds the scheduler directly on your site.
  • Popup Widget: A floating button that opens the scheduler.

Insert the Code into Your Website
Open your portfolio website’s HTML file or editor and paste the code where appropriate:

  • For Inline Embed: Place the code where you want the scheduler to appear (e.g., in a “Contact Me” section).
  • For the Popup Widget: Place the script tag just before the closing </body> tag to activate the floating button.
<!-- Inline Embed Example --> 
<div class="calendly-inline-widget" data-url="https://calendly.com/your-username/event-name" style="min-width:320px;height:630px;"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
<!-- Popup Widget Example --> 
<script type="text/javascript"
src="https://assets.calendly.com/assets/external/widget.js" async>
</script>
<script type="text/javascript">
Calendly.initBadgeWidget(
{
url: 'https://calendly.com/your-username/event-name',
text: 'Schedule a Meeting',
color: '#00a2ff',
textColor: '#ffffff',
branding: true
}
);
</script>

Customize the Styling (Optional)
Use CSS to adjust the appearance of the widget to match your website’s theme.

This is how the Inline Embed implementation will look like:

Calendly is a powerful tool that simplifies scheduling while projecting a professional image. Connecting Zoom and embedding a widget into your portfolio website makes it effortless for clients, collaborators, and prospects to communicate with you. This small step can have a big impact on enhancing your brand and growing your network.

Sign up to discover human stories that deepen your understanding of the world.

Fateh Ali Aamir
Fateh Ali Aamir

Written by Fateh Ali Aamir

23. A programmer by profession. A writer by passion.

No responses yet

Write a response