Inspiration

Square merchants love Square appointments because it tightly integrates with the rest of their Square products. However, Square merchants have also been asking for customizable appointment intake forms. Sidr Customizable Appointments is created to bridge the gap.

This is a sample Square merchant discussion with 117 replies:

CUSTOM BOOKING QUESTIONS AND FIELDS?

What it does

Sidr Customizable Appointments is a widget that can be added to Square Online or any other merchant site through a JS snippet. It offers merchants the capability to customize their appointment intake forms.

Sidr Customizable Appointments also directly integrate with Square Appointments, so form input is directly added to the appointment notes section.

How we built it

Sidr Customizable Appointments is built with Square snippets API and Square bookings API. We used React and Webpack to build a single injectable JS file.

We also used NextJS to build the user management UI to configure form fields.

Challenges we ran into

Our snippet initially added conflicting styles to the hosting site. We eventually found a way to create an isolation for our stylesheet, so our widget can live nicely with the hosting site.

Accomplishments that we're proud of

We were able to introduce customizable appointment intake forms for the Square appointment system. It has been a long running requests for the last 4 years: CUSTOM BOOKING QUESTIONS AND FIELDS?

This is all made possible with the recent launch of Snippets API and Bookings API!

What we learned

Square snippets API is an incredibly flexible way to enhance the merchant experience. We are confident that we will be able to build more advanced features in the future.

What's next for Sidr Customizable Appointments

Due to time constraints, we strategically decided on leaving out a few features, including:

  • Form validation
  • Required fields
  • More field types such as radio buttons

We're very excited to build these into the next release!

Built With

Share this project:

Updates