DEV Community

Vikash Rathee
Vikash Rathee

Posted on

2

How to embed appointment scheduling widget on your website?

Appointment scheduler

Embedding a Dayschedule appointment scheduling 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, Doodle, Acuity Scheduling and DaySchedule. 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

Sign up for an account

  1. Login to Dayschedule (or create a new account, it's free for basic use),
  2. Create a resource
  3. Set availability, questions etc.

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

Generate an embed code

Once your scheduling widget is customized, generate an embed code. This code is what you will use to add the widget to your website.

Generate an embed code

Add the embed code to your website

Install the package from NPM

npm i dayschedule-widget
Enter fullscreen mode Exit fullscreen mode

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"
    }
  })
}
Enter fullscreen mode Exit fullscreen mode

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.

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

AWS Security LIVE!

Hosted by security experts, AWS Security LIVE! showcases AWS Partners tackling real-world security challenges. Join live and get your security questions answered.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️