> For the complete documentation index, see [llms.txt](https://docs.ownchat.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ownchat.app/whatsapp-channel/flow-builder/zoho-booking-configuration.md).

# Zoho Booking Configuration

This section explains how to configure **Zoho Booking** in Flow Builder using **Data Exchange** to fetch workspace details and display booking information dynamically.

### Overview  

Zoho Booking configuration enables the flow to:

* Fetch available workspaces
* Display booking details
* Show available slots
* Handle successful and failed API responses
* Redirect users to the correct screen

This setup is triggered when the user clicks the **Book Now** button.

### Prerequisites  

Before starting, ensure:

* Zoho Booking connection is already created
* Welcome screen is available in Flow Builder
* Booking Details screen is created
* Error Handler screen is created

### Open Welcome Screen  

1. Navigate to **Flow Builder**
2. Open the **required flow**
3. Select **Welcome Screen**
4. Click the **Edit button** to modify the screen components<br>

{% embed url="<https://app.supademo.com/demo/cmp3purqx01030juzjv5dpuss?utm_source=link>" %}

This opens the component editor where the footer button can be configured.

### Configure Footer Button &#x20;

1. Click the **Book Now** button in the footer section
2. Open the **Footer settings**
3. Under **On-click action**
4. Select:

data\_exchange<br>

{% embed url="<https://app.supademo.com/demo/cmp3pw4rt01100jv0qo0d3rtc?utm_source=link>" %}

This enables API-based redirection.

### Select Existing API or Create New Configuration &#x20;

Under **Choose / create from created APIs:**

* Select an existing API configuration\
  **OR**
* Click **Create New Config**<br>

{% embed url="<https://app.supademo.com/demo/cmp3pyzpt00yq0jw3ix43lqy2?utm_source=link>" %}

Use **Create New Config** if this is the first setup.

### Select Application &#x20;

Inside **Select App:**

1. Choose **Zoho Booking**

{% embed url="<https://app.supademo.com/demo/cmp3q0olr009q0jtlcq3r0ycb?utm_source=link>" %}

This connects the flow action with Zoho Booking integration.

### Select Action &#x20;

From the available actions, select:

{% embed url="<https://app.supademo.com/demo/cmp3q1sx501120jv0dd2gaezw?utm_source=link>" %}

Fetch Workspace

Available actions include:

* Create Booking
* Update Appointment
* Get Appointment
* Fetch Appointments
* Reschedule Appointment
* Fetch Workspace
* Fetch Staff
* Fetch Services
* Get Available Slots
* Get Booking Details

For initial booking setup, always use **Fetch Workspace.**

{% embed url="<https://app.supademo.com/demo/cmp3q3n5c01140jv0h36sf1pd?utm_source=link>" %}

### Selecting Workspace API &#x20;

Then, click the **Get Workspaces** dropdown to select an available API endpoint.<br>

{% embed url="<https://app.supademo.com/demo/cmp3q8mgn00070iwbpu32vpr2?utm_source=link>" %}

Next, click **Edit detail** to configure the API action settings.<br>

{% embed url="<https://app.supademo.com/demo/cmp3qbbnl010n0juzf7g19bd3?utm_source=link>" %}

From here, enter a descriptive name for your API workspace configuration.

{% embed url="<https://app.supademo.com/demo/cmp3r2j4p014c0juzrj1zymgu?utm_source=link>" %}

[<br>](https://app.supademo.com/demo/cmp3r2j4p014c0juzrj1zymgu?utm_source=link)After that, select **testzohobookings** from the dropdown to establish the app connection.<br>

{% embed url="<https://app.supademo.com/demo/cmp3s01nu016q0juznemskg6c?utm_source=link>" %}

### Configuring Success Navigation &#x20;

In the **On Success** screen, select the **Booking Details** screen to display booking information after a successful action.<br>

{% embed url="<https://app.supademo.com/demo/cmp3s15j700b30jtllcrg0zu3?utm_source=link>" %}

Following this, select the **AllWorkspaces** option to configure workspace data for the API.<br>

{% embed url="<https://app.supademo.com/demo/cmp3s5mjz004m0iwbu36ufoql?utm_source=link>" %}

After that, check the checkbox to include **AvailableSlots** in the API response.<br>

{% embed url="<https://app.supademo.com/demo/cmp3s6mk2012e0jv055s7kgd4?utm_source=link>" %}

### Viewing API Sample Response &#x20;

From here, click **View samples** to explore example configurations for this integration.<br>

{% embed url="<https://app.supademo.com/demo/cmp3u4ry5014o0jv08c6ykpaa?utm_source=link>" %}

Following this, click **Sample Response 1** to view the API response data structure.<br>

{% embed url="<https://app.supademo.com/demo/cmp3u7f5r017u0juz48d9wb8p?utm_source=link>" %}

After that, click the **Expand all** option to view all response details.

{% embed url="<https://app.supademo.com/demo/cmp3uf3d000da0jtl1sfia5ps?utm_source=link>" %}

Next up, click **Expand all** again to view the complete API response structure.

Afterwards, expand the **data array** section to view and verify the complete API response structure.

From here, expand the **Object** node to view the complete response structure and data.

Following this, click **Copy path** to copy the response variable path for configuration.<br>

{% embed url="<https://app.supademo.com/demo/cmp3uge8t01a80juz448lez27?utm_source=link>" %}

### Configuring Workspace Variables &#x20;

Next up, enter the workspace title in the **Title** field provided.<br>

{% embed url="<https://app.supademo.com/demo/cmp3uif7301ai0juzqowr7bhi?utm_source=link>" %}

After that, click **Copy path** to save the API response path for later use.<br>

{% embed url="<https://app.supademo.com/demo/cmp3zg2iy00010jst21sjrbkd?utm_source=link>" %}

From here, enter the workspace ID value in the required field to proceed.

### Configuring Failure Navigation &#x20;

In **On Failed**, select the **Error Handler** screen to display a message when an error occurs, prompting the user to try again later.<br>

{% embed url="<https://app.supademo.com/demo/cmp3ziihh00kl0jtlkagj11yy?utm_source=link>" %}

If you want to see the sample response, click **View Sample** to check the response details.

{% embed url="<https://app.supademo.com/demo/cmp3zm5n701hx0juzb37rpbaz?utm_source=link>" %}

### Workflow Execution Flow &#x20;

Once the customer clicks the **Book Now** footer button, the workflow uses the configured APIs to fetch the workspace data.

* If the API request is successful, the workflow redirects the customer to the **Booking Details** screen.
* If the API request fails, the workflow redirects the customer to the **Error Handler** screen.<br>

{% embed url="<https://app.supademo.com/demo/cmp3zobm500m10iwbjqmkr886?utm_source=link>" %}

### Error Handler Screen &#x20;

Afterwards, click the **Welcome Screen** dropdown to view and manage available screen options.

Select the **Error Handler** screen.<br>

{% embed url="<https://app.supademo.com/demo/cmp3zsdit01ms0jv0t996j6zf?utm_source=link>" %}

This screen displays when an error occurs, informing the user to try again later.<br>

{% embed url="<https://app.supademo.com/demo/cmp3zu1sm00l60jtl82z2p1oy?utm_source=link>" %}

### Booking Details Screen Configuration &#x20;

Following this, click on **Booking Details** to configure the booking information section.<br>

{% embed url="<https://app.supademo.com/demo/cmp3zwfwl01i20juzltt85crd?utm_source=link>" %}

From here, click **Edit** to modify the Booking Details section settings.<br>

{% embed url="<https://app.supademo.com/demo/cmp3zxect01p70jv0fhgd5ceh?utm_source=link>" %}

Following this, enter the data source variable to configure the dropdown options.<br>

{% embed url="<https://app.supademo.com/demo/cmp3zys8f00mh0iwbhzylm7nn?utm_source=link>" %}

Now, click the **Edit** button to modify the Booking Details screen configuration.

Next up, enable the **Additional options** checkbox to expand more configuration settings.<br>

{% embed url="<https://app.supademo.com/demo/cmp400imp00ci0jst0gfkvc86?utm_source=link>" %}

### Configuring Get Services API &#x20;

Then, select **dataexchange** from the dropdown menu to set the action.<br>

{% embed url="<https://app.supademo.com/demo/cmp402v1c00ml0iwbdv2is49b?utm_source=link>" %}

Now, select **Get Services** to choose the API configuration for this dropdown action.<br>

{% embed url="<https://app.supademo.com/demo/cmp4044ji01i80juzrthnypua?utm_source=link>" %}

Following that, click **Edit detail** to configure the API action settings.<br>

{% embed url="<https://app.supademo.com/demo/cmp405a1g021f0jw3fghoh3ln?utm_source=link>" %}

After that, enter the workspace ID to configure the fetch services request properly.

Afterwards, select the **AllWorkspaces** checkbox to include workspace options in your response data.<br>

{% embed url="<https://app.supademo.com/demo/cmp40ddnx00nc0jtlmpxcd14s?utm_source=link>" %}

### Viewing Get Services Sample Response &#x20;

Afterwards, click the **View samples** button to review the sample API responses.<br>

{% embed url="<https://app.supademo.com/demo/cmp40ejgc021l0jw37fwyubsi?utm_source=link>" %}

From here, click **Sample Response 1** to view the API response data structure details.<br>

{% embed url="<https://app.supademo.com/demo/cmp40lekj01pq0jv0n9s77xs9?utm_source=link>" %}

Afterwards, click **Object(2)** to expand the response data structure and view its contents.

Following this, click **returnvalue** to expand and view the response data structure.

Following this, expand the **data array** to view all available fields and properties.

Next up, click on **Object(12)** to expand and view the appointment details within the sample response.

Now, click on **item 0** to view the first available service in the response data.

If the API condition fails, the **Error Handler** screen is automatically displayed on the customer screen.<br>

{% embed url="<https://app.supademo.com/demo/cmp40p2w600nk0jtlbbxmlqcb?utm_source=link>" %}

Following that, click the back arrow to return to the previous Fetch Services configuration screen.

Following that, click the close button to exit the dropdown configuration panel.

### Configuring Select Services Dropdown &#x20;

Following this, click the **Edit button** to modify the **Select Services** dropdown configuration.<br>

{% embed url="<https://app.supademo.com/demo/cmp40rbdm00np0jtl1iyqlnv2?utm_source=link>" %}

Next up, enable **Additional options** to access more configuration settings for this component.<br>

{% embed url="<https://app.supademo.com/demo/cmp40t1oi00010jwsigfm3he5?utm_source=link>" %}

Afterwards, select **Get Staffs** from the dropdown menu to configure the API action.<br>

{% embed url="<https://app.supademo.com/demo/cmp40up2701rj0jv0rr9pel0g?utm_source=link>" %}

Click **Edit Details** to view the details of the **Get Staffs API** creation.

Following this, enter the **Service ID** value in the text field to proceed.

{% embed url="<https://app.supademo.com/demo/cmp40wdpc00o30iwblw65uj7p?utm_source=link>" %}

### Configuring Staff API Success Response &#x20;

Following that, click **On Success** to configure the success response settings.

{% embed url="<https://app.supademo.com/demo/cmp40y5gt01iv0juzt7ekhkhm?utm_source=link>" %}

After successful execution, the workflow moves to the **Booking Details** screen.

### Viewing Staff API Samples &#x20;

From here, click **View samples** to see example staff configurations and API response data.

{% embed url="<https://app.supademo.com/demo/cmp40z1n000po0iwbtjn35oir?utm_source=link>" %}

Next, click **Sample Response 1** to view the API response data structure.

Following this, click the **View samples** button to see error handling samples.

### Completing the Booking Workflow &#x20;

Now, click the **Booking Details** dropdown to view and manage available screen options.<br>

{% embed url="<https://app.supademo.com/demo/cmp410txi024z0jw3fjesml8g?utm_source=link>" %}

Click on **Complete Screen.**

{% embed url="<https://app.supademo.com/demo/cmp411vrm02540jw3i4cdgnca?utm_source=link>" %}

If the customer completes the details and booking successfully, this screen will appear.

For Zoho Bookings configuration in Flow Builder, you can configure the workflow in this manner.<br>

{% embed url="<https://app.supademo.com/demo/cmp415q8e00q20iwbdtggf8gd?utm_source=link>" %}

### Workflow Summary &#x20;

Welcome Screen\
&#x20;  ↓\
Book Now\
&#x20;  ↓\
Data Exchange\
&#x20;  ↓\
Fetch Workspace\
&#x20;  ↓\
Success → Booking Details\
Failure → Error Handler

### Expected Output &#x20;

After successful configuration:

* User clicks **Book Now**
* Workspace list is displayed
* Slots are loaded
* Staff and services are available
* Booking details screen opens
* Errors redirect properly

&#x20;