dayschedule / dayschedule-widget Goto Github PK

Appointment scheduling widget to embed the booking calendar on your website for 1:1, round-robin and group bookings with Google meet, Zoom and MS Teams integrations

Home Page: https://dayschedule.com/widget

License: MIT License

TypeScript 100.00%

appointment-api appointment-booking appointment-management-system appointment-scheduler appointment-scheduling appointments calendar scheduling calendly reservation reservation-system

dayschedule-widget's Introduction

dayschedule-widget

Appointment scheduling widget to embed the booking calendar on your website for 1:1, round-robin and group bookings with Google meet, Zoom and MS Teams integrations

Installation

Install the dayschedule-widget from NPM

npm i dayschedule-widget

Setup

Add the JavaScript dayschedule-widget.js library into your website HTML head section:

<script src="/dist/dayschedule-widget.js" defer></script>

CDN

Alternatively, you can install from CDN for better performance and global caching:

For example:

<script src="https://cdn.jsdelivr.net/npm/dayschedule-widget@latest/dist/dayschedule-widget.min.js" defer></script>

Usage

Call the daySchedule.initPopupWidget(...) function from any button or link from your website to open the scheduling popup:

<button type="button" 
	onClick="daySchedule.initPopupWidget({ url: 'https://meet.dayschedule.com' });">
	Book an appointment
</button>

Examples

The dayschedule widget offers easy embeddable, customizable designs, and automatic reminders to manage online appointments. See these examples to learn how to embed the appointment scheduling widget in React, Nest.js, Wordpress, Angular, Vue, Node.js etc.

Platform	Description
HTML Popup	An example of embedding a popup appointment widget using HTML5.
HTML Inline	An example of embedding a inline appointment widget using HTML5.
Wordpress	A WordPress plugin for managing appointments, events, and services.
Node.js	Embed appointment booking widget in Node.js
React	React.js and Tailwind CSS example to embed appointment booking widget in React
Angular	Angular 16 example to embed appointment booking widget in Angular
Vue.js	Vue.js example to embed appointment dayschedule booking widget in Vue website
Next.js	Next.js example to embed dayschedule appointment booking widget in Next website
Nuxt	Nuxt example to embed dayschedule appointment booking widget

Widget Types

There are 2 types of embed option available on DaySchedule for appointment bookings:

Popup widget
Inline widget

Popup widget

To embed as a button and open the appointment scheduling popup when clicked. We recommends the popup widget, because it's initialized when someone click on the book now button, instead of having it initialize upon page load to improve website speed and performance by avoiding unnecessary requests.

Add the dayschedule-popup.css on website header.

<link href="https://cdn.jsdelivr.net/npm/dayschedule-widget@latest/dist/dayschedule-popup.css" rel="stylesheet" />

Add a onClick function to open the popup when clicked on a button

daySchedule.initPopupWidget({
	url: 'https://meet.dayschedule.com',
	color: {
		primary: '#0f0980',
		secondary: '#afeefe'
	}
});

Popup examples

Inline widget

To embed the inline appointment scheduling plugin in HTML

<dayschedule-widget url='https://meet.dayschedule.com' options='{ "color": {
        "primary": "#0f0980",
        "secondary": "#afeefe"
    }}'></dayschedule-widget>

Inline examples

Options

Here is the list of options available to customize your appointment look and feel to match up with your website and brand :

Name	Description
url	To set your main scheduling link or single event link
color	To set primary and secondary color of your appointment calendar, e.g. `{color: {primary: '#0f0980', secondary: '#afeefe', mode : 'light' }}`
questions	To auto fill registration form questions, e.g. `{questions: {name : 'Vikash'}}`
hideHeader	To hide the header `{ hideHeader: true }`
hideEvent	To hide the event details from calendar view `{ hideEvent: true }`

Dark Mode

To enable the dark mode (night mode) on your appointment scheduling page. Go to pages setting to apply globally, or use the color.mode option in arugments.

daySchedule.initPopupWidget({
	url: 'https://meet.dayschedule.com',
	color: {
		primary: '#0f0980',
		secondary: '#afeefe',
		mode: 'dark'
	}
});

Performance

The dayschedule appointment pages are designed for optimal performance, providing users with a smooth and responsive booking experience across desktop, tablet and mobiles.

We optimize each of the functionality to -

Minimize network requests
Image conversion to WebP (a modern image format developed by Google, to ensure high-quality images while significantly reducing file sizes)
Advanced gzip, br compression to minimize the size of assets such as scripts, and stylesheets
Low latency with CDN

Making it faster then Calendly, Cal.com etc.

The scheduling pages are hosted on 250+ regions on Cloudflare and/or AWS cloudfront for high-performance and low-latency. So you will always see lightning-fast loading times and efficient caching mechanisms to ensure swift access of your available time slots and services to your customers for online appointment bookings.

A grade on Gtmetrix, Lighthouse ✅

Support

Have a question? Contact us on [email protected]

dayschedule-widget's People

Contributors

Stargazers

Watchers

Forkers

yensen fabiannavarroit meyergreg vitorfnery smaramwbc bhuvana-03 hybridhyper

dayschedule-widget's Issues

Allow widget for rescheduling an appointment

I am building out a mobile only SMS- based service (salon/day care/dog care) app. Current use case for the widget is only for creating new appointments, which works great with a default workflow to send the invitee a confirmation email with links to reschedule or cancel the appointment. However, to reschedule or cancel an appointment, the invitee needs to have a daySchedule account, and most invitee will not be comfortable with. I have the following questions:

Can the widget be configured so that email is optional? I am using SMS based communication only via Twilio, as most small business owners may not have a business email.
Is there a way to have the reschedule/cancel links embedded with the appointment/booking/invitee ids, and have the widget pre-populated with the appointment details, allowing the invitee to change or cancel the appointment?

Notes:

I do recognize this may compromise security as anyone with the links will be able to make changes.
I have not tested with other workflows so may be there is one that will do the above.

Booking an appointment does not respect the schedule configured for the resource

I have the following setup in dayschedule with a single account:

Resource A and Resource B
Schedule 1 and Schedule 2 with Schedule 1 being marked as default
Resource A is configured with Schedule 1 and Resource B is configured with Schedule 2

Since each resource is configured with its own schedule, I assume bookings for each resource will have different schedules, however, it seems that both are using the same schedule that has been marked as default, and not with the one that has been configured.

P.S. I have confirmed the resources do have their respective schedule with GET api /v1/resources. I have also tried to use the GET api /v1/bookings to see if the bookings have a schedule_id, but unfortunately schedule_id isn't a field in the response.

The popup widget cannot be easily closed on a mobile device, i.e. no 'X' button

I have a slightly edge case. My app uses a webview in React Native to show the live site. Upon clicking on the 'Book Now' button, the daySchedule popup will be displayed perfectly. However, it is difficult to dismiss/close the pop up as there is no close button, to close the popup, I have to click area outside the popup. Since the daySchedule popup occupies the mobile device screen, there isn't any area to dismiss the popup except the gap between the resource and 'Select a Time' section. Please see attached screenshot and add a button (or a 'X' in the upper right) to close the popup.

dayschedule is not defined

If you are getting error - dayschedule is not defined, see the solution below

Nice Plugin!

Hi I like your plugin and feel that it works quite well.

I had to use it in an iframe as the css breaks my site style which was a little tricky with react.
I would like to see a slightly improved interface as there isn't enough padding between text elements and you should use better grays such as the tailwind grays.
I feel an even three columns would look more appealing than 3 different width columns.

I liked that i could pre-fill the form with the previous inputs from my website.
It would be nice to configure actual times that I am available, rather than the current rules, like instead of 1hr meeting, 30m break before, 5 min break after, i would just provide it a list of time slots. this would help sometimes there is times in the middle of the day where you have regular meetings that need to be blocked out every week.

Love what you're doing and I hope it goes well!

Button to confirm appointment in widget should show 'Confirm' instead of 'Pay and confirm'

If the booking resource does not have 'Accept Payment' specified, then the widget's button should show 'Confirm' and not 'Pay and confirm' to avoid confusion.

Pages performance

DaySchedule

Calendly

Cal.com

The button to confirm a booking should show 'Confirm Booking' instead of 'Pay and Confirm' if no payment gateway is configured

If a service is configured to have a fee, but the payment gateway has not been setup, then the button should show 'Confirm booking' instead of 'Pay and confirm', since the site visitor cannot pay for the service during the booking, and must pay after service is rendered.