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-22'
});
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
});