Scheduling Widget

DaySchedule's appointment 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.

Step 1: Install the 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>

Step 2: Generate the initialize code

React

React example to embed DaySchedule

Angular

Angular 16 example to embed DaySchedule

Vue.js

Vue.js example to embed DaySchedule

Nuxt.js

Nuxt.js framework example to embed DaySchedule

Next.js

Next.js React framework for building static website with dayschedule appointments

Node.js

Node.js example to open appointment popup on button click

HTML

Simple HTML 5 example to add appointment booking popup on static HTML

Wordpress

Wordpress plugin to add dayschedule appointment widget with shortcode.

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.

Inline example

To embed the inline booking widget on HTML using JavaScript

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 demo

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 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?

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 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?

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