How to embed appointment scheduling widget on your website?
Tags: scheduling, widget, calendly, appointment
Published: 2023-04-03 12:02:57

---
title: How to embed appointment scheduling widget on your website?
published: true
description: How to embed appointment scheduling widget on your website?
tags: scheduling, widget, calendly, appointment
# cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/715jjlvttedzj8ezwamn.png
# Use a ratio of 100:42 for best results.
# published_at: 2023-04-03 11:42 +0000
---

![Appointment scheduler](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/715jjlvttedzj8ezwamn.png)

Embedding a Dayschedule [appointment scheduling widget](https://www.npmjs.com/package/dayschedule-widget) on your website is a great way to simplify the appointment scheduling process for your clients. Here are the steps to follow:

## Choose a appointment scheduling widget
There are many scheduling widgets available online, such as  [Calendly](https://calendly.com/), [Doodle](https://doodle.com/en/), [Acuity Scheduling](https://acuityscheduling.com/) and [DaySchedule](https://dayschedule.com/). Research different options and choose one that meets your business needs.

In this post, I am going to show you how to embed the [dayschedule widget](https://github.com/dayschedule/dayschedule-widget)

## Sign up for an account
1. Login to [Dayschedule](https://app.dayschedule.com/signup) (or create a new account, it's free for basic use), 
2. Create a resource 
3. Set availability, questions etc.

{% youtube z7_IwonRrp0 %}

## Customize your scheduling widget
Customize your scheduling widget to fit the design and branding of your website. You can set color, upload logo etc.


![Customize your scheduling widget](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yy96v52sjwad0rp2oakb.png)

## Generate an embed code
Once your scheduling widget is customized, [generate an embed code](https://dayschedule.com/widget). This code is what you will use to add the widget to your website.

![Generate an embed code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vyl1fknuw369qo6p9glj.png)

## Add the embed code to your website
Install the package from NPM
```
npm i dayschedule-widget
```

Add the code to open appointment booking popup on click.

```
<button type="button" 
	onClick="bookAppointment()">
	Book an appointment
</button>

function bookAppointment(){
  daySchedule.initPopupWidget({
	"url": "https://demo.dayschedule.com",
	"type": "popup",
	"color": {
            "primary": "#0f0980",
	    "secondary": "#afeefe"
	}
  })
}
```

See examples - https://stackblitz.com/@vickyRathee/collections/dayschedule-appointment-bookings

And paste the embed code into the HTML of your website where you want the scheduling widget to appear. This could be on a contact page, a services page, or a dedicated scheduling page.

## Test your scheduling widget
Once you have added the scheduling widget to your website, test it out to make sure it is functioning properly. Schedule a test appointment to make sure the process works as expected.

## Promote your scheduling widget
Now that your scheduling widget is embedded on your website, promote it to your clients and customers. Include a link to the scheduling widget in email signatures, social media posts, and other marketing materials.