Learn more about our Apps framework
Developing your own Pipefy app is simple. We built the framework in a way that allows you to use intuitive JavaScript APIs to build powerful products or integrations on Pipefy's platform. Display or update external data, add feature buttons to your Pipe, create new tabs on cards, attach data to cards, and open modals or sidebars to display customized views.
The Apps run in iframes in the product, so you can build Apps with any technology you like, including server-side technologies. The framework also gives your Apps access to various product resources by using consistent APIs.
Getting started
The fastest route is to start from our sample app rather than an empty folder:
- Fork the sample app. HelloPipefy is a React + Vite app that already wires up a card tab, a pipe view, pipe buttons, card buttons, a modal and a sidebar.
- Host it over HTTPS. Any static host works — Vercel, Netlify, Cloudflare Pages, GitHub Pages, or your own server. Pipefy loads your app in an iframe, so it must be served over HTTPS and must allow being framed by
https://app.pipefy.com. - Register it in Pipefy. Go to Apps in your developer settings, click Add new app, and give it a name plus the URL of your
manifest.json. - Open it. Your app appears under the Tools menu in the top-right of the navbar, and on whichever surfaces your manifest's
featuresdeclared.
You will need to be an admin of the Pipefy organization where you want to add your app. It doesn't matter whether the organization is free or paid.
Not an admin?
App registration lives in organization settings, so you need an admin to do step 3. Ask an admin of your organization to add the app once — after that you can iterate on the code freely, since Pipefy re-fetches your manifest and app on load. To experiment on your own first, create a free organization where you are the admin.
How does it work?
Every app has a manifest.json that tells Pipefy the app's name and description, where to make the initial request, and which features it uses. This is the manifest from the HelloPipefy sample app:
{
"name": "HelloPipefy",
"short_description": "A sample app demonstrating how to customize Pipefy components.",
"description": "HelloPipefy is a beginner-friendly sample app showing how to extend Pipefy with React — pipe views, card tabs, card buttons, dropdowns, pipe buttons, modals and sidebars.",
"icon": "./pfy.png",
"author": "Pipefy, Inc.",
"init_url": "./",
"screenshots": ["./screenshots/card-tab.png"],
"features": [
"pipe-buttons",
"card-tab"
]
}
Documentation
Click here to learn more about
manifest.jsonattributes
What happens after manifest.json?
Pipefy creates an iframe calling the init_url specified in the manifest.json. On that page you include the Pipefy Client JS to interact with the framework API, and call initCall from our JS client.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!-- Pipefy Apps Client.js -->
<script src="https://platform.staticpipefy.com/pipefy-app.js"></script>
<script>
PipefyApp.initCall({
// Add pipe buttons
'pipe-buttons': function(p, pipe) {
return [
{
icon: './icon.svg',
text: 'Open video room',
url: 'https://whereby.com/pipefy-pipe-' + pipe.id,
target: '_blank'
}
];
}
});
</script>
</body>
</html>
This page renders no UI of its own — it only declares what your app adds to Pipefy. Everything the user actually sees is a separate page of yours, rendered inside a tab, modal, dropdown, sidebar or pipe view.
You can build the app using any client-side or server-side technology you like, including plain HTML, JavaScript and CSS.
Developing locally
Pipefy loads your app from the manifest URL you registered, so pointing that URL at your machine is all local development requires:
- Serve your app over HTTPS from a tunnel (
ngrok,cloudflared, or similar) and register that tunnel URL as your app's manifest URL. - Your app must be opened from inside Pipefy. Navigating to your app's URL directly in a browser tab throws an error, because Pipefy appends an
appIDquery parameter the SDK depends on. See Client SDK overview.
Video walkthrough
A community-contributed walkthrough of building a first Pipefy app. Some of the UI shown has changed since it was recorded — the current registration flow is the one described above.
Where to go next
- Features — the surfaces your app can add to Pipefy
- Manifest reference — every
manifest.jsonattribute - Apps Client SDK — what your app can do once it's running
- Sample Apps — working code to start from
- Frequently Asked Questions