# 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;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ownchat.app/whatsapp-channel/flow-builder/zoho-booking-configuration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.