---
agentTools:
  projectIndex: https://developers.pipefy.com/llms.txt
---

# Apps Client SDK

The JavaScript SDK your app loads inside its iframe

The **Apps Client SDK** is the JavaScript library your app loads inside its iframe. It gives you a client object — conventionally named `p` — that talks to the Pipefy product across the frame boundary.

The pages before this one covered *declaring* your app: the [manifest](https://developers.pipefy.com/docs/manifestjson) tells Pipefy your app exists, and [features](https://developers.pipefy.com/docs/features) tell Pipefy where to render it. This section covers *what your app can do* once it is rendered.

Load the SDK with a single script tag:

```html
<script src="https://platform.staticpipefy.com/pipefy-app.js"></script>
```

> 📘 Apps only run inside Pipefy
>
> The SDK needs an `appID` query parameter, which Pipefy adds when it builds your iframe. Opening your app's URL directly in a browser tab throws an error instead of returning a client. See [Client SDK overview](https://developers.pipefy.com/docs/getting-the-sdk).

## What's in this section

| Page                                                     | What it covers                                                                            |
| :------------------------------------------------------- | :---------------------------------------------------------------------------------------- |
| [Client SDK overview](https://developers.pipefy.com/docs/getting-the-sdk)               | Loading the SDK, and the difference between `PipefyApp.initCall()` and `PipefyApp.init()` |
| [Get Pipefy data](https://developers.pipefy.com/docs/get-pipefy-data)                   | Reading the current card, pipe, fields, attachments, locale and timezone                  |
| [Make API calls](https://developers.pipefy.com/docs/make-api-calls)                     | `p.query()` and `p.mutation()` — the full Pipefy GraphQL API, as the logged-in user       |
| [Custom App Data](https://developers.pipefy.com/docs/store-retrieve-custom-data)        | Storing your own data against a card, pipe or organization, and attaching links to cards  |
| [User Interface functions](https://developers.pipefy.com/docs/user-interface-functions) | Opening sidebars, modals, dropdowns and search; notifications; resizing your iframe       |
| [Where each function works](https://developers.pipefy.com/docs/sdk-availability)        | Which `PipefyApp.*` methods are available at which mount point                            |
| [Promises](https://developers.pipefy.com/docs/promises)                                 | How asynchronous results are returned                                                     |

## A minimal app

Every app has one entry point — the page at your manifest's `init_url`. It calls `PipefyApp.initCall()` once, registering a handler per feature:

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script src="https://platform.staticpipefy.com/pipefy-app.js"></script>
    <script>
      PipefyApp.initCall({
        'pipe-buttons': function (p, pipe) {
          return [
            {
              text: 'Say hello',
              callback: function (p) {
                p.showNotification('Hello from ' + pipe.name, 'success');
              },
            },
          ];
        },
      });
    </script>
  </body>
</html>
```

Anything you render *inside* a sidebar, modal, dropdown or card tab is a separate page in a separate iframe. Those pages call `PipefyApp.init()` instead, to get their own client:

```javascript
var p = PipefyApp.init();

p.card().then(function (card) {
  document.getElementById('title').textContent = card.title;
});
```

> 📘 Working example
>
> [HelloPipefy](https://github.com/Pipefyteam/sample-app-react) is a complete React app that wires up a card tab, a pipe view, pipe buttons, card buttons, a modal and a sidebar. See [Sample Apps](https://developers.pipefy.com/docs/sample-apps).