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
Add the DaySchedule JavaScript and CSS on your website header
<link rel="stylesheet" type="text/css" href="https://cdn.dayschedule.com/widget/1.0/dayschedule-popup.css"/>
<script src="https://cdn.dayschedule.com/widget/1.0/dayschedule-widget.js" defer></script>
Embed code
Add the JavaScript code in script
tag to initialize the
widget
daySchedule.initPopupWidget({
url: 'https://meet.dayschedule.com'
});
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.initPopupWidget({
url: 'https://meet.dayschedule.com'
});
Customize 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 directly instead main events list page
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?date=2022-05-29'
});
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: 'vikash.rathee@dayschedule.com'
}
});
Hide event details
To hide the event name, description and avatar from calendar scheduling page.
daySchedule.initPopupWidget({
url: 'https://meet.dayschedule.com/product-demo',
hideEvent: true
});
Hide headers
To hide the scheduling popup header.
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?
Follow these steps to make a booking calendar
- 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 add the code on footer.php
or use any free Wordpress plugin which allow custom HTML, JavaScript to be embed directly
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.