A component built for the Hapio API that can be installed as an npm package. Users can pass a configuration JSON object to the flow component after importing the package to customize settings
- Easy Booking: Streamlined booking process.
- Get started fast: Works out of the box with just an Hapio Api Token, no other setup needed.
- Hapio API Integration: Manage resources, schedules, and bookings with Hapio's lightning quick API.
- Customizable: Override the default configuration with your own settings, texts and theme configurations.
- React 18
- ReactDOM 18
- Hapio State Manager
Install the package with your favourite package manager
npm install @hapio/hapio-booking-flow-reactyarn add @hapio/hapio-booking-flow-reactImport the Flow component in your project and pass hapioApiToken and your custom configuration if needed.
// Example usage in a React app
import React from 'react';
import { Flow } from '@hapio/hapio-booking-flow-react';
const userConfig = {
"hapioApiToken": "HAPIO_API_TOKEN",
... Optional config settings ...
};
function App() {
return <Flow config={userConfig} />;
}
export default App;Hapio Booking Flow comes with a default config for all settings, all of these settings can be changed by passing a JSON object to the Flow component.
{
"hapioApiToken": "",
"hapioBaseURL": "https://eu-central-1.hapio.net/v1",
"settings": {
"locale": "en-GB",
"storeExpireTime": 84000000,
"afterBookingExipreTime": 300000,
"metaDataFields": {
"name": {
"required": true,
"type": "text",
"size": "full",
"label": "Name",
"placeholder": "Name"
},
"email": {
"required": true,
"type": "email",
"size": "half",
"label": "Email",
"placeholder": "Email"
},
"phone": {
"required": true,
"type": "tel",
"size": "half",
"label": "Phone",
"placeholder": "Phone"
}
}
},
"theme": {
"palette": {
"primary": "#F6C800",
"secondary": "#B1BCFD",
"text": "#F5EAFF",
"dark": "#28213D",
"light": "#6B7280",
"disabled": "#374151",
"background": "#0F042E",
"error": "#F6C800"
},
"fonts": {
"families": {
"primary": "'Space Grotesk', cursive",
"secondary": "'Helvetica Neue', sans"
},
"sizes": {
"h1": "2.5rem",
"h2": "2rem",
"h3": "1.75rem",
"h4": "1.5rem",
"h5": "1.25rem",
"h6": "1rem",
"body1": "1rem",
"body2": "0.875rem"
}
}
},
"content": {
"backButton": "Back",
"stepText": "Step",
"locationTitle": "Location",
"serviceTitle": "Service",
"resourceTitle": "Resource",
"dateTitle": "Date",
"timeSlotTitle": "Time",
"metaDataFormTitle": "Your details",
"metaDataLocationLabel": "Location",
"metaDataServiceLabel": "Service",
"metaDataResourceLabel": "Resource",
"metaDataDateLabel": "Date",
"metaDataTimeLabel": " Time",
"metaDataFieldsLabel": "Your details",
"metaDataSubmitButton": "Confirm booking",
"completedTitle": "Booking Confirmed",
"completedMessage": "Thank you for your booking! A confirmation email with all the details has been sent to your inbox."
}
}locale
date-fns locale string List of available languages can be found here
"locale": string,storeExpireTime
Life span of local storage
"storeExpireTime": integer,afterBookingExpireTime
Life span of local storage after a booking is completed
"afterBookingExpireTime": integer,metaDataFields
Metadata fields for "Details" view
{
// Unique field key, will also be used as the key in the API request.
"uniqueKey": {
// Field required property: true or false
"required": boolean,
// Field type, ex: 'text', 'email', 'tel', 'textarea'
"type": string,
// Field width: 'full', 'half', or 'third'
"size": string,
// Field label and placeholder texts
"label": string,
"placeholder": string
},
// Add any number of fields here
}Q: Is Hapio free to use?
A: Hapio does have a free plan with no card details required! Read more about our pricing here.
Q: If I run into trouble, can I get help?
A: Absolutely! Feel free to reach out to us at [email protected], and we’ll do our best to assist you.
Contributions are welcome!
Please open an issue or submit a pull request for improvements or bug fixes. Security fixes will be recognized in our Hapio Hall of Fame.