How to integrate Calendly into a Nuxt 3 website

I recently wanted to add an easy way for my customers to book calls with me, besides the "regular" contact form, which I think is a bit outdated – but still great to have. Calendly is a scheduling software that helps to easily schedule meetings, events and appointments without the need for back-and-forth emails.

If you want to easily integrate the calendly embed widget, or the popup button into your app, I've got you covered. I recently released nuxt-calendly, which allows you to do that in a few lines of code with the help of either Components or Composables. Everything is typed and super easy to get started with. Let's go!

Create your Nuxt project

You can of course skip this step if you already have a project setuped and running.
First of all, you can create a blank project by opening a command prompt:

npx nuxt init your-cool-name # or your favorite package manager

After installing dependencies with

npm install

and starting the dev-server with

npm run dev

You have successfully created your nuxt project! Dive deeper into it by looking into the Installation-section of the Nuxt docs.

Install the `nuxt-calendly` module

Now it's time to do the magic by installing the nuxt-calendly module.

npm install -D nuxt-calendly

Add it to your nuxt.config.ts file:

export default defineNuxtConfig({
  modules: ['nuxt-calendly'],
})

Awesome! You can now use the build in components or the composables. Read more at the Quick Setup guide.

As a component

Since everything is auto-imported, anywhere in your app you can just:

<template>
  <CalendlyInlineWidget v-bind="options" />
</template>

<script lang="ts" setup>
  const options = {
    url: 'https://calendly.com/YOUR_LINK/30min',   
  }
</script>

Check out the docs on which components and params are available.

As a composable

If you want more customization, you can also use the useCalendly and useCalendlyEventListener composable to just trigger different events.

<script lang="ts" setup>
  const calendly = useCalendly()
  
  onMounted(() => {
    calendly.initBadgeWidget({
      url: 'https://calendly.com/YOUR_LINK/30min',
    })
  })
</script>

In this example, after the page mounted, the badge widget would be initiated and visible at the bottom-right.

Playground

If you want to take a look at examples, check out the Playground-project.

Conclusion

With the module, it's easier than ever to include Calendly into your page – with a few lines of code. Let me know if this module is missing something though!

Questions, Issues, Suggestions?

If you like you can check out the project on GitHub at madebyfabian/nuxt-calendly and create an issue over there. If you need more help or have any questions, I can offer you a consulting session where we go through your code, analyze issues or build new features. Or do you need some custom Vue/Nuxt plugins, composables or modules specifically for your project? Feel free to contact me for more details, I would love to help you build great Nuxt applications.