The barrier to entry into the world of Hapio just got a lot lower.
We’re excited to introduce Hapio Booking Flow for React, a plug-and-play component that makes integrating Hapio’s powerful booking features into React applications easier than ever.
Want to give Hapio a try but don’t have the time or know-how to get it up and running? With Hapio Booking Flow for React, you can start using Hapio in minutes! Simply set up your locations, services, resources and their schedules with the Hapio API, then drop the Flow component into your React app, pass in your API token, and you’re ready to go—no complicated setup required.
Requirements
- React 18
- ReactDOM 18
Getting Started
Integrating Hapio Booking Flow into a React project is quick and easy. Simply install the package using your preferred package manager:
shell
npm install @hapio/hapio-booking-flow-react
Then, use it in your react project:
javascript
// Import Flow component
import { Flow } from '@hapio/hapio-booking-flow-react';
// Setup or import a config JSON object
const config = { hapioApiToken: 'YOUR_API_TOKEN' };
function App() {
// Use the Flow component with your config as a prop
return <Flow config={config} />;
}
Customization & Features
The Hapio Booking Flow package comes with a default configuration that works right out of the box, but it’s fully customizable!
- Theming – Adjust colors, fonts, and styles to match your brand.
- Localization – Simply set your locale and add translations for a global audience.
- Form Customization – Modify booking metadata fields like name, email, and phone number.
- Configuration Options – Easily override default settings for a tailored experience.
Want to learn more?
With Hapio Booking Flow for React, getting started with Hapio’s powerful booking API has never been easier. Try it today!
