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 to white label the appointment booking system

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

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.

How to use advanced options in inline scheduling widget?

You can set the 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

Widget