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)
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:
import Vue from "vue";
import CalendlyVue from 'calendly-vue'
Vue.use(CalendlyVue)
Add the plugin to your plugins
array in nuxt.config.js
file:
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