Scheduling Widget
DaySchedule's calendar scheduling widget to take online bookings for your services directly through your website. Just add a few lines of code to integrate the booking calendar on your website.
Prerequisites
Install dayschedule-widget package from NPM
npm i dayschedule-widget
Or, add the JavaScript into your website header from jsdelivr CDN<script src="https://cdn.jsdelivr.net/npm/dayschedule-widget@latest/dist/dayschedule-widget.min.js" defer></script>
Embed code
Add the JavaScript code in script
tag to initialize the widget
daySchedule.initPopupWidget({
url: 'https://meet.dayschedule.com'
});
Plugin and examples
Install the appointment booking plugin on Wordpress, or try these HTML examples on stackblitz to customize the booking calendar view. Our appointment Widget is SEO friendly and easily customizable, you can do everything within seconds.
Embed it on your website to show your available slots for customers to choose a date and time and schedule an appointment with you.
Popup widget
Open your main appointment scheduling page in a popup.
daySchedule.initPopupWidget({
url: 'https://meet.dayschedule.com'
});
Inline widget
To embed the calendar scheduling page on your website.
<dayschedule-widget url='https://meet.dayschedule.com' options='{ "color": {
"primary": "#0f0980",
"secondary": "#afeefe"
}}'>
</dayschedule-widget>
See demoCustomize color
Specify colors to match the calendar scheduling popup widget with your website or brand.
daySchedule.initPopupWidget({
url: 'https://meet.dayschedule.com',
color: {
primary: '#f44336',
secondary: '#fbbdb8'
}
});
Booking calendar
Open the single event calendar view directly, instead the main events list page to view available slots.
daySchedule.initPopupWidget({
url: 'https://meet.dayschedule.com/product-demo'
});
Custom date selection
Specify date parameter to pass selected date for calendar to show the available spots for an event directly when popup opened.
daySchedule.initPopupWidget({
url: 'https://meet.dayschedule.com/product-demo'
});
Pre-fill questions
Pre-fill customer details like name, email address for better appointment scheduling experience.
daySchedule.initPopupWidget({
url: 'https://meet.dayschedule.com/product-demo'
questions:{
name: 'Vikash Rathee',
email: '[email protected]'
}
});
Hide event details
To hide the event name, description and logo from appointment scheduling page to display the calendar only.
daySchedule.initPopupWidget({
url: 'https://meet.dayschedule.com/product-demo',
hideEvent: true
});
Hide headers
To hide the scheduling popup header from main appointment page. It will hide the DaySchedule logo as well to white-label on your website.
daySchedule.initPopupWidget({
url: 'https://meet.dayschedule.com/product-demo',
hideHeader: true
});
Frequently Asked Questions
What is the calendar scheduling widget?
The DaySchedule Calendar scheduling widget is a small JavaScript code to add on any website. The main purpose of this widget is to allow visitors to book an appointment with you directly from your website.
How do I make a booking calendar for my website?
- Create your scheduling page
- Create your booking calendar using event or services
- Connect with your Google calendar
- Use the form above to generate code
- Embed the code on your website
Can I add the appointment booking widget on my Wordpress website?
Yes, you can add the appointment booking widget on Wordpress , Joomla, Wix, Shopify or any other CMS. For Wordpress, just install our free plugin and add the shortcode on any post or page.
[dayschedule url="https://meet.dayschedule.com" type="popup"]
Can I white-label the appointment booking software on my website?
Yes, you can remove the DaySchedule logo, set your own brand color to white-label the complete appointment booking system.
How to use advanced options in inline scheduling widget?
options
attribute with values as JSON string to set custom options. For example, to hide the calendar header - <dayschedule-widget options='{ "hideHeader": true }' url='https://meet.dayschedule.com'>
</dayschedule-widget>
Can I use the widget in Free/Basic plan?
Yes, the widget is inclusive in the Free plan. You may use our free appointment scheduler to add booking calendar widget on your website