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.

URL* Enter your DaySchedule URL. Get it from here

Widget type*

popup

inline

Select the widget type to specify how the scheduling calendar should be embed on your website

Color

Specify colors to match the scheduler with your website or brand

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