Introduction

PixaBooking

Pixabooking is a smart and flexible booking and appointment management tool that helps businesses and professionals handle scheduling with ease. From managing calendars and confirming appointments to sending automated reminders and reducing no-shows, Pixabooking streamlines your entire booking process so you can focus more on delivering exceptional services.

To make your operations seamless, Pixabooking integrates with popular autoresponder Mailchimp. It also supports direct SMTP email settings, giving you full control over sending professional emails from your own server. For payments, Pixabooking connects with trusted gateways such as PayPal, Stripe, Razorpay, and FastSpring, ensuring smooth and secure transactions. Plus, with built-in support for Google Meet, Zoom, and Google Calendar, virtual meetings and schedule synchronization are just a click away.

By combining booking tools, email marketing integrations, video conferencing, and secure payments in one platform, Pixabooking provides everything you need to manage appointments efficiently. Whether you run a salon, clinic, consultancy, fitness studio, or any service-based business, Pixabooking saves you time, improves client communication, and helps grow your business with ease.

Demo Login Details

Admin Login Details

• URL : https://pixabooking.pixelnx.com/
• Email : demoadmin@pixabooking.com
• Password : demoadmin@123

User Login Details

• URL : https://pixabooking.pixelnx.com/
• Email : demouser@pixabooking.com
• Password : demouser@123

Key Features

Pixabooking tool has following key features :

1. Easy Appointment Management - Accept and manage bookings online with a simple and user-friendly dashboard.

2. Automated Reminders & Notifications - Reduce no-shows with instant emails reminders for clients.

3. Email Marketing Integrations - Connect seamlessly with top autoresponder Mailchimp.

4. SMTP Support - Use your own SMTP settings to send professional emails directly from your server.

5. Secure Payment Options - Accept payments through trusted gateways such as PayPal, Stripe, Razorpay, and FastSpring.

6. Video Conferencing Integration - Schedule and manage virtual meetings easily with Google Meet and Zoom.

7. Calendar Synchronization - Sync bookings effortlessly with Google Calendar to avoid double bookings.

8. Customizable Scheduling - Set flexible time slots, buffer times, and service durations according to your business needs.

9. Client-Friendly Experience - Offer a smooth booking process that enhances customer satisfaction and trust.

10. Multi-Industry Support - Perfect for salons, clinics, consultancies, fitness centers, coaches, and any service-based business.

Script Installation

Note

1. Before installing the script please make sure that you have nodejs installed on your server and for Database MongoDB is neccessary.

2. You can check the node version from the terminal/cmd just type node -v.

How To Install Script

Step 1 Extract the (BookingHub)file that you have received from the Codecanyon. Inside that you will get code file and documentation

Step 2 Open the terminal or Command Line Prompt (cmd) on the system.

Step 3 Navigate to the folder where you have extracted the file through commands.

3.1 Run Command "Cd Extract_file_location" (BookingHub).

3.2 Run Command "Cd file_name" (BookingHub).

Step 4 Then install npm modules. Run command npm install

Step 5 Run command

If Setup on local server (localhost)

Step 5.1 Run command npm run dev

If Setup on live server

Step 5.1 Run command npm run build

Step 5.2 Run command npm start

Step 6 Then Navigate to env file and then update the following mention fields below

If Setup on local server (localhost)

App URL : Set the variable AppURLLocal.

Api URL : Set the variable ApiUrlLocal (Domain-url/api).

Database URL : Set the variable dbUrlLocal.

If Setup on live server

App URL : Set the variable AppURLLive.

Api URL : Set the variable ApiUrlLive (Domain-url/api).

Database URL : Set the variable dbUrlLive.

App Logo : Set the variable LOGO_IMG (provide path of logo image).

jwt token - user session : NEXTAUTH_SECRET (any string to generate jwt token)

metadata : APP_NAME, META_KEYWORDS, APP_DESCRIPTION and META_AUTHOR

Autoresponder keys : AWEBER_CLIENT_ID, AWEBER_CLIENT_SECRET, CONSTANT_CONTACT_CLIENT_ID and CONSTANT_CONTACT_CLIENT_SECRET

Step 7 To add the widget form in your site, change the host URL with AppURLLive in the widget-form.js file.

Step 8 For getting widget preview, change the localhost:3000 with domain URL in the widget_preview.html file.

Step 9 After that, open the Mongo DB and paste the "MONGODB_CONNECTION_URL" in the field.

Note: How to get MongoDB Connection URL Check here .

Step 10 To Import the demo data. Please go to the import section. click here

Demo Import

Step 1 : Open Mongodb compass and past Mongodb connection URL, and then connect.

Step 2 : Please click on the database name. In our case is, "BookingHub" .

There is initially only one collection (users) in the database.

1. users (Shown in the screenshot)

Note : For above collection "BookingHub_" prefix is used but please match and use the same prefix as you added in the next.config.js file

Note : Do not use any prefix for users collection.

Step 3 : Click on the "Create collection" option.

Step 4 : Enter the collection name. then click the "create collection button" .

Step 5 : Import the user data in the users collection. To download the pixabooking.users.json file click here

2. emailNotifications (Shown in the screenshot)

Note: Same as users collection, create another collection emailNotifications.

Step 6 : Import the data in the emailNotifications collection. To download the pixabooking.emailnotifications.json file click here

3. templates (Shown in the screenshot)

Note: Same as users collection, create another collection templates.

Step 7 : Import the data in the templates collection. To download the pixabooking.templates.json file click here

Step 8 Once the demo data has been imported successfully, then type the domain-name/login/ on browser's address bar, like : https://domain-name.com/login and you will get login page of the admin panel. For login use the credentials mentioned below

Admin details
• Email : demoadmin@pixabooking.com
• Password : demoadmin@123

User details
• Email : demouser@pixabooking.com
• Password : demouser@123

Mongodb Setup

1. How do you get MongoDB connection URL.

Step 1 : Sign Up in MongoDB, or if you already have an account, then Login.

Step 2 : Login on Mongodb, then you will see the below screen. At this screen, you click on the first "visit MongoDB Altas" option.

Step 3 : Now at this step, you have to create a database. Please click on "Build a Database," as shown in the screenshot.

Step 4 : After that, select the free plan and click the Create button for the database. (later, you can upgrade your database plan as needed).

Step 5 : Firstly, create a user for the database at this step, update the details and create the user.

Step 6: Once you create a user, you will see this screen.

Step 7: Now click on the database showing in the left sidebar. Then click on the "Browse Collections" option.

Step 8: Click on the "Add My Own Data" option at this step.

Step 9: Now add your database information.

Step 10: Once the database has been created, you will get this screen.

Step 11: Now click on the "database" menu, then click on the "connect" option.

Step 12 : In this model, please click on the compass option.

Step 13 : In this model, you will see the connection URL. Copy this URL.

Step 14 : Now you will have your MongoDB connection URL.

mongodb+srv://pixabooking:<password>@cluster0.nsuha2x.mongodb.net/

In this URL you have to add your username, password, and database name.

For Example :

Username = pixabooking, password = pixabooking@123 , Database name = pixabooking

The final MongoDB connection URL will be like this (Please update the correct details in this connection URL).

mongodb+srv://pixabooking:pixabooking@123@cluster0.nsuha2x.mongodb.net/pixaurl?retryWrites=true&w=majority

You have to add the MongoDB connection URL to the next.config.js file.

Admin Dashboard

The Admin Dashboard is designed to provide a comprehensive overview and management of the entire booking system. It offers a user-friendly interface that allows administrators to efficiently monitor and control various aspects of the platform.

User Dashboard

The User Dashboard options panel has been specially created to make user work faster and easier.