# API Call

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2F7936QKTbz189dr8ojwf5%2Fimage.png?alt=media&#x26;token=855386d4-65a1-4ae9-bf72-51f51e2ca0da" alt="" width="188"><figcaption></figcaption></figure></div>

The API Call service allows your app to communicate with other apps including third-party software services.

{% hint style="success" %}
Even if initiated from your app's page or form, the API Call request is always securely routed via Zingy's cloud infrastructure.&#x20;

This ensures that any sensitive information stored in the profile or the connection settings are never exposed on the user's browser.
{% endhint %}

***

## Profile Settings

{% hint style="success" %}
NOTE: All profile settings are encrypted and stored in Zingy's cloud infrastructure.
{% endhint %}

### Authorization Type

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FHcqkBbKX6Wzbnjncue49%2Fimage.png?alt=media&#x26;token=355a3a09-2da6-41fc-9a4d-e69ee4a22983" alt="" width="375"><figcaption></figcaption></figure></div>

Defines how the [HTTP Authorization request header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Authorization) will be constructed and used for the API call. The chosen value dictates how other settings (like [User Name](#user-name) and [Secret](#secret)) might be used.

The allowed choices are:

* **none:** No authentication is required for the API call.
* **Basic:** Utilizes the [Basic Authentication method](https://en.wikipedia.org/wiki/Basic_access_authentication) where credentials (username & password or API key) are sent as Base64-encoded in the header.
* **Bearer:** Utilizes [Bearer Token Authentication](https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication#authentication_schemes). This means sending a token (often JWT) as a header.
* **Custom:** Any other custom authentication method specific to the API.

### User Name

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2F26gPGkzJJcjCgcVPxPjz%2Fimage.png?alt=media&#x26;token=51c53046-3522-4f9e-bb90-1ca5c632bfad" alt="" width="375"><figcaption></figcaption></figure></div>

The username, typically used in 'Basic' [Authorization Type](#authorization-type). It's part of the credentials that might be needed for some APIs. This field will be used alongside the [Secret](#secret) setting to form the 'Basic' authentication header by encoding them to Base64.

Only needed if 'Basic' is chosen as the Authorization Type.

### Secret

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FWI7M5ntZGlH60EQn7zND%2Fimage.png?alt=media&#x26;token=d611039b-da96-44e2-b5b6-b2905000b632" alt="" width="375"><figcaption></figcaption></figure></div>

This is a versatile field. Depending on the context:

* **Password:** If 'Basic' [Authorization](#authorization-type) is chosen and a username is provided, this would be the password.
* **API Key:** For some services that provide an API key for authentication.
* **Custom value:** Any other secret value needed for a custom authentication mechanism.

### Additional Request Headers

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2Fgj9cSWGvyZJIzAMTvtTU%2Fimage.png?alt=media&#x26;token=84b615d8-d2e7-4ec9-be7e-6280d62ce90d" alt="" width="375"><figcaption></figcaption></figure></div>

Some APIs require additional headers for various reasons, be it for specifying content type, passing additional metadata, or for tracking. This field allows users to pass in extra header values in a JSON string format. For instance:

```json
{
    "Custom-Header1": "customValue1",
    "Custom-Header2": "customValue2"    
}
```

### Send Secret via POST Data

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2Fx5pU1QoDueLFVo5zIWMq%2Fimage.png?alt=media&#x26;token=526cf32f-438d-4686-9672-0c5e25e2faaf" alt="" width="375"><figcaption></figcaption></figure></div>

In some scenarios, especially when dealing with tokens or keys, the secret is not sent in the headers but rather in the body of the request. This field lets the system know how to handle the secret—whether to include it in the headers or in the body of the request.

The allowed choices are:

* **no:** The secret won't be sent in the request's body.
* **yes:** The secret will be parsed as JSON and included in the body of [POST request](#request-type).

***

## Connection Settings

{% hint style="success" %}
NOTE: All connection settings are encrypted and stored in Zingy's cloud infrastructure.
{% endhint %}

### URL

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FDu7uIw4mXJhf49jJRm2F%2Fimage.png?alt=media&#x26;token=6d1a8597-3e28-4305-991c-7d7db0c89833" alt="" width="375"><figcaption></figcaption></figure></div>

Specifies the destination URL of the API call, including the protocol (either `http` or `https`). It points to the server endpoint to which the API request is made. Example: `https://api.example.com/data`

### Request Type

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2Fk6DHxWFdbcI0NMtrweUr%2Fimage.png?alt=media&#x26;token=033b48e2-f5b8-4975-b8e5-a8748e85c89f" alt="" width="375"><figcaption></figcaption></figure></div>

Defines the HTTP or HTTPS request method to be used for the API call.

Allowed choices are:

* **GET:** Retrieve data from the server.
* **POST:** Send new data to the server.
* **PUT:** Update existing data on the server.
* **PATCH:** Partially update existing data on the server.
* **DELETE:** Remove data from the server.
* **HEAD:** Retrieve only the headers from the server.
* **OPTIONS:** Discover communication options available for the target URL.

### Additional Request Headers

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FVs2y4WmiHY7j0sTxv0xU%2Fimage.png?alt=media&#x26;token=c76f1f79-81a5-4567-9841-c2c08a81c03e" alt="" width="375"><figcaption></figcaption></figure></div>

Defines supplementary headers to be included in the request that is combined with the [Additional Request Headers provided in the profile settings](#additional-request-headers).&#x20;

Headers are specified in a JSON string format. As an example:

```json
{"Accept-Language": "en-US", "Custom-Header": "customValue"}
```

### POST Content Type

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FOjjyJ5fLi3i02MfTWxeX%2Fimage.png?alt=media&#x26;token=2b8cd7d4-58bb-4f37-a67c-b6a392bc6714" alt="" width="375"><figcaption></figcaption></figure></div>

Defines the content type of the body for [POST, PUT, and PATCH requests](#request-type). The chosen value specifies how the data in the [Request Data](#request-data) field will be formatted when sent.

Allowed choices are:

* **Default (JSON):** The request body will be sent as a JSON.
* **Form:** The request body will be sent as a standard form.
* **Multipart Form:** The request body will be sent as a multipart form, commonly used for file uploads.

### Request Data

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FfgrpOMeAoIU3VNTZGV7H%2Fimage.png?alt=media&#x26;token=bbaeb2c0-3510-4dbc-bc70-014693a8d719" alt="" width="375"><figcaption></figcaption></figure></div>

Optional. Contains the data to be sent in the request body, specified as a JSON string with key-value pairs. Additional or dynamic data using [Page Flow](https://docs.zingy.ai/app-editor/page-flow), and [Cloud Flow](https://docs.zingy.ai/app-editor/cloud-flow) can be added to the data provided here.

For example:

```json
{"userId": "12345", "details": {"firstName": "John", "lastName": "Doe"}}
```

{% hint style="success" %}
When considering API calls within [Page Flow](https://docs.zingy.ai/app-editor/page-flow), it's advisable to input sensitive or static information directly into these settings. Reserve the [Page Flow](https://docs.zingy.ai/app-editor/page-flow) data strictly for details that are dynamic.
{% endhint %}

### Request Parameters

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FvJvHUw1BYB4He67qBN23%2Fimage.png?alt=media&#x26;token=f394fe10-0890-4ac7-9078-c287809d596e" alt="" width="375"><figcaption></figcaption></figure></div>

Optional. These are parameters appended to the URL as a query string. Specified as a JSON string with key-value pairs. Additional or dynamic parameters can be appended using Widget, Page Flow, and Cloud Flow blocks.

For example: If the value is:

```json
{"sortBy": "date", "order": "desc"}
```

then, the final URL might look like: `https://api.example.com/data?sortBy=date&order=desc`

{% hint style="success" %}
When considering API calls within [Page Flow](https://docs.zingy.ai/app-editor/page-flow), it's advisable to input sensitive or static information directly into these settings. Reserve the [Page Flow](https://docs.zingy.ai/app-editor/page-flow) data strictly for details that are dynamic.
{% endhint %}

### Timeout

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FbF4CwkZsX5Ls08dJDDD9%2Fimage.png?alt=media&#x26;token=47cf9e40-a8c1-4aad-83ae-fcd0359ff12e" alt="" width="375"><figcaption></figcaption></figure></div>

Optional. Specifies the duration (in milliseconds) the API call will wait for a response before timing out. If not set, the default timeout is 10,000 milliseconds (10 seconds).

For example: Setting a value of `5000` would result in a 5-second timeout for the API call.

***

## Operations/Commands

Use the [Execute API Call](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/execute-api-call) block in [Page Flow](https://docs.zingy.ai/app-editor/page-flow) and [Cloud Flow](https://docs.zingy.ai/app-editor/cloud-flow) to invoke the API Call.

{% hint style="success" %}
Keep in mind that when integrating with an external API, always consult its official documentation to ensure correct configuration of endpoints, request types, headers, and other specifications.
{% endhint %}
