Conversational Bookings

Leverage Square Bookings in a chatbot, to drive conversion, upsells and gather relevant information about your customers, alongside customer support and contact.

Comment

Inspiration

Chatbots provide rich interactive ways to inform your customers and answer their enquiries. Many facilities exist to provide FAQs, contact forms and other facilities within a chat interface. This app uses the Square Bookings API to make bookings available to your customers in your website chat.

What it does

On the web panel customer can create an account, log in and add a new square App to get a unique embed code for their website. In the webchat initiate a conversation with the agent and make a booking from the results pulled by the API.

How I built it

Google Dialogflow for the chat and NLP DialogFlow fulfilment/messenger for the Chatbot interface React/Typescript frontend for the panel Google Firebase Functions for the Intent Fulfillment (backend) Some mocked data with node.js/Express API

Challenges

Using the square API in a serverless firebase functions environment with a multi-tenanted structure is a challenge. Some of the data I wanted to demonstrate for the conversation wasn’t illustrative enough in the demo environment so a few things have been hard coded in to get the full flow showing. Would have liked to have more time for finishing off the frontend but getting the end-to-end conversation working was the main thing.

Accomplishments

Getting the full end-to-end conversation working required using a lot of successive Square API endpoints.

What we learned

Trying to do this fully serverless was potentially not the best approach and I may need to switch to server backend for security before putting this in prod. There are several data dependencies for booking API and it was interesting to think about these sequentially and build this flow.

What's next for Conversational Bookings

  • Add new App experience and customised embed to be finished
  • Customer App Panel uses Square Oauth
  • Customer App Panel uses a unique embed code for each “app”
  • Chat Embed app contains a header field and other information used to specify the app and manage Square API interactions (so multiple customers can use it on different websites).
  • Make different card/fulfilment types (clickable buttons instead of number select)
  • Email confirmation in flow
  • Longer-term vision would be a visual conversation builder, with building blocks and the ability to parse date preferences, etc.

Built With

Share this project:

Updates