Calendly-vue NPM

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