With the rise of natural-language development, or "vibe coding," you no longer need to be a professional software engineer to build custom tools. If you have an idea, an AI assistant like Claude, and a clear understanding of your workflows, you can build tailored solutions directly on top of Aptly.
This guide explains how to design, test, and deploy embedded apps or custom dashboards that run seamlessly within your Aptly workspace.
Reference docs:
Building inside Aptly
Aptly · Security & platform
Custom dashboards and apps are one of the best ways to get more out of Aptly. But how you connect them to your data matters more than what they look like. Here is why we hand your apps a temporary, limited pass instead of a master key, and why that protects your business.
Two kinds of access, side by side
Property managers run on trust. Owners trust you with their properties, residents trust you with their homes and their personal details, and your team trusts that the tools you use will not quietly leak any of it. When you build a custom app on top of Aptly, the way that app gets to your data either honors that trust or puts it at risk.
It is tempting to build a dashboard the quick way: spin up a page on some outside website, paste in an API key that unlocks your Aptly account, and you are off. It works on day one. The problem is what that key becomes on day two, and every day after.
The Risk: A master key is forever, and easy to copy
A raw API key is a long-lived password for your whole account. To use it, an outside app has to store it somewhere: in the website's code, on its server, in a settings file. And anything stored can be copied.
If that key leaks, through a careless screenshot, a former contractor, a misconfigured server, or a breach at the outside vendor, whoever finds it can reach into your Aptly account and read or change data until you notice and shut it off. There is no signed-in user behind it and no built-in expiration. It is a key that fits every lock in the building and never stops working on its own.
A leaked API key does not feel like an emergency until the day it does. By then the copy is already gone.
In plain terms: An API key is like cutting a master key to your whole property and mailing it to a vendor so they can do one small job. They probably will. But now a master key exists outside your control, it works forever, and you have no record of who copied it along the way.
The fix: A delegate token is a pass, not a key
When you build an app inside Aptly and host it as a board tab or dashboard, Aptly handles access for you. The moment a signed-in user opens the app, Aptly hands it a delegate token: a short-lived pass that is created on the spot, tied to that exact person, and limited to only what they are allowed to see.
The app never needs a stored password, because it never holds a permanent one. The token is delivered fresh each time the page loads and expires shortly after. There is nothing durable to copy, nothing to leak, and nothing to leave behind when a contractor moves on.
What happens when something goes wrong
- Raw API key leaks. A copy is out there. It keeps working until a human notices and manually revokes it, and you may never know what it touched.
- Delegate token leaks. It is already expired, or about to be. It only ever opened the doors of one signed-in user, and a new one is issued next load. The blast radius is tiny.
The Bonus: Hosting inside Aptly does more than protect you
Keeping the app inside Aptly is not only safer. It is also less work and a better experience for your team. Because the app already knows who is signed in, it can act on their behalf the way the rest of Aptly does.
From inside Aptly, an app can do the things your team actually wants from a dashboard: open the underlying record in one click, start a call to a resident, draft an email, or create a task, all using Aptly's own screens. An outside app wired up with a raw key cannot reach into Aptly to do any of that. It can only read and write raw data, then leave your team to copy, paste, and switch tabs to act on it.
Outside app, raw API key | Inside Aptly, delegate token | |
Lifespan | Lives until manually revoked | Expires on its own, fast |
Who it represents | No one; acts on its own | The signed-in user |
Access | Often your whole account | Only what that user can see |
If it leaks | Usable by anyone, indefinitely | Already expired; minimal reach |
Can take action in Aptly | No; data in and out only | Yes; call, email, open, create |
A custom app is only as trustworthy as the way it reaches your data. Building outside Aptly with a raw API key means a master key to your account lives somewhere it can be copied, works forever, and answers to no one. Building inside Aptly with a delegate token means each app gets a temporary, person-specific pass that expires on its own and opens only the right doors.
Same dashboard. Same insights. Far less exposure, and a tool your team can actually act from without leaving Aptly. That is why we built it this way, and why we recommend every app you create lives inside Aptly.
Getting Started: Building Apps in Aptly
You can build your own dashboards and apps on top of Aptly without being a developer. The trick is simple: paste the snippet below into an AI coding tool like Claude, add your dev token, and describe what you want. The AI does the rest.
Requirements
Before prompting Claude to generate your application, ensure you have the following:
Any boards that you want to include in your app or dashboard must have API access enabled within its board settings.
A Developer (Delegate) Token: This acts as a temporary credential for local building and testing. You will need to first enable the developer feature on a user profile and then generate a dev token. Request the narrowest access scope required for your project. Treat developer tokens like passwords and never hardcode them into shared files.
An AI Assistant: Claude or a similar assistant to generate the HTML and JavaScript (ie. Claude or CodeX)
A Text Editor: A standard editor (such as VS Code, Notepad, or TextEdit) to save your code.
The snippet
Paste this into your AI tool, then add your dev token where marked and tell it what you want to build.
To simplify communication with the platform, Aptly provides a lightweight Software Development Kit (SDK). Instruct Claude to include this exact script tag inside the
Reference docs: https://docs.getaptly.com/building-embedded-apps-&-dashboards
--- Aptly embedded app context ---
Output: a single self-contained HTML file. Use Tailwind CSS (CDN) and shadcn/ui component patterns. All JS goes in a <script> at the end of <body>.
Load the SDK with this exact script tag (place it in <head>):
<script src="https://app.getaptly.com/api/ai/app-builder/sdk.js"></script>
After loading, window.aptly is available:
aptly.org.id / aptly.org.name — logged-in user's organization
aptly.user.id / aptly.user.email — logged-in user identity
aptly.config — key/value config declared by the app owner
aptly.fetch(path, options) — auth-aware API fetch, handles token + retries
Board API endpoints (pass to aptly.fetch):
GET /board/:boardId?page=0 — paginated card list (page param is required; loop until data.length < pageSize to get all)
GET /board/:boardId/:cardId — single card detail
POST /board/:boardId — create a card
GET /contacts?page=0 — paginated contacts
GET /contacts/:contactId — single contact
Board IDs — avoid hardcoding. Read from aptly.config:
const boardId = aptly.config.MY_BOARD_ID;
UI actions — call these to trigger Aptly UI from within the embedded app:
await aptly.openCardPane({ cardId })
await aptly.openCardView({ cardId })
await aptly.startDialer({ number, name? })
await aptly.openEmailComposer({ subject?, content?, composeMode? })
await aptly.createEvent({ date?, comments?, recipients? })
await aptly.createCard({ boardId, fields? })
await aptly.createTask({ title?, dueAt?, priority?, assigneeId?, aptletInstanceId? })
await aptly.createContact({ firstname?, lastname?, phone?, email?, company? })
await aptly.navigateToContact({ contactId })
Dev / testing — set this before the SDK script tag to authenticate outside of Aptly:
window.APTLY_DEV = { token: 'your-dev-delegate-token' };
or call: await aptly.startEmulation('your-dev-delegate-token');
Dev tokens are generated in Settings → Developer.Once the app is built
- Add the finished HTML file as a board tab or dashboard in Aptly.
- Turn on Needs Aptly Context for that tab so the app can load your data.
- If your app uses call, email, or open-card buttons, enable those under Allowed Actions for the tab.
That's it. The app pulls your data live every time it opens.
Full reference
For anything deeper, see the Aptly docs: https://docs.getaptly.com/building-embedded-apps-&-dashboards