Calendly Vue

A simple Vue.js component to embed calendly in your web app.

Install

npm i calendly-vue

Usage

Import and add to your components section

import CalendlyVue from "calendly-vue"

export default {
    components: {
        CalendlyVue
    },
    methods: {
        logEvent(evt) {
            console.log(evt)

            // Here you can handle the emitted events with custom code
            if (evt === "calendly.profile_page_viewed") {
                console.log("Calendly profile has been opened")
            }
        }
    }
}

Use in your HTML section:

<calendly-vue url="someone-123" @event="logEvent" @event-details="logEvent" @error="logEvent"></calendly-vue>

url prop refers to your personal/business link of calendly, buy only the variable part, i.e having the URL https://calendly.com/someone-123, we only need the someone-123 segment.

Nuxt

This component does not work in SSR, to use it in Nuxt it is necessary to create a new file named calendly.client.js in your plugins folder:

// plugins/calendly.client.js
import Vue from "vue";
import CalendlyVue from 'calendly-vue'

Vue.use(CalendlyVue)

Add the plugin to your plugins array in nuxt.config.js file:

// nuxt.config.js
plugins: [
    '~/plugins/calendly.client.js'
]

Props

Available props to customize the component.

Name	Description	Required	Default
url	The profile or business account segment of the calendly URL e.g (someone-123)	true	null
width	Sets a custom width to the calendly container (can receive px, %, em, vw)	false	100%
height	Sets a custom height to the calendly container (can receive px, %, em, vh)	false	60vh

Events

Events triggered by the component.

@event

Receives events triggered by the calendly embed, options are:

Event name	Description
calendly.profile_page_viewed	Profile page was viewed
calendly.event_type_viewed	Event type page was viewed
calendly.date_and_time_selected	Invitee selected date and time
calendly.event_scheduled	Invitee successfully booked a meeting

You can check the official events documentation here

@event-details

Triggers details about the user selected date or info provided by him.

@error

Receives errors generated by the calendly widget to allow you debug some errors.

---

Development

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

Tutorial followed to create this package Here