Why API Integration Matters in Adalo
Adalo's built-in database works for simple apps, but production apps need to connect to external services: payment processors (Stripe), email services (SendGrid), CRMs (HubSpot), analytics, and custom backends. This is where most Adalo projects either level up - or stall out.
As certified Adalo Experts, we've built hundreds of API integrations in Adalo. This guide covers everything from basic GET requests to complex multi-step workflows.
Understanding Adalo's Integration Options
External Collections (Data In)
External collections let you display data from external APIs as if it were stored in Adalo's database. You can list, filter, and display external data using Adalo's native components.
Requirements:
- API must return a JSON array at the root level
- API must support CORS headers
- Responses must follow a consistent schema
- Authentication must be via headers (Bearer token, API key)
Custom Actions (Data Out)
Custom actions let you send data to external services when a user performs an action (button click, form submit, etc.). They support POST, PUT, PATCH, and DELETE methods.
Use cases: Sending emails, creating records in external databases, triggering webhooks, processing payments, updating CRM contacts.
Step-by-Step: Setting Up an External Collection
Step 1: Prepare Your API
Before configuring in Adalo, verify your API meets the requirements. Test in Postman or a similar tool:
- Endpoint returns a JSON array:
[{{"id": 1, "name": "Item"}}, ...] - Not wrapped in an object:
{{"data": [...]}}won't work without transformation - CORS headers are present (
Access-Control-Allow-Origin: *)
Step 2: Create the External Collection
In Adalo: Database → Add Collection → External Collection. Enter your base URL, authentication headers, and map the response fields to Adalo properties. Adalo will make a test request to validate the connection.
Step 3: Handle Common Issues
- "No Results" error: Check that your API returns a root-level array and CORS is configured
- Authentication failures: Verify header format - Bearer tokens need the "Bearer " prefix
- Slow loading: External collections add network latency - keep response payloads under 500KB
- Pagination: Implement server-side pagination and use query parameters to fetch pages
Step-by-Step: Setting Up a Custom Action
Step 1: Define the Action
In Adalo: Settings → Custom Actions → New Action. Name it descriptively (e.g., "Send Welcome Email," "Create Stripe Customer"). Choose the HTTP method (usually POST).
Step 2: Configure the Request
Set the endpoint URL, headers (Content-Type: application/json, plus auth headers), and body template. Use Adalo's magic text to inject active values from the current screen context.
Step 3: Map the Response
If your API returns data you need (e.g., a created record ID), map the response fields to Adalo properties. This lets you use the returned data in subsequent actions.
Common Integration Patterns
Pattern 1: Stripe Payment Flow
Create a custom action that calls your backend, which creates a Stripe Payment Intent. Return the client secret to Adalo. Use Adalo's Stripe component to complete the payment on the client side. Chain a second custom action on success to update your database.
Pattern 2: SendGrid Email Notifications
Custom action: POST to SendGrid's API with the recipient, template ID, and active data. Trigger on form submission or record creation. Add error handling by checking the response status in a subsequent action.
Pattern 3: Webhook-Based Workflows (Zapier/Make)
For complex multi-step workflows, use Zapier or Make as middleware. Adalo sends data to a Zapier webhook via custom action. Zapier handles the complex logic (conditional branching, multiple API calls, data transformation) and optionally sends results back to Adalo.
Advanced: Using Xano as a Backend
Xano is the most popular backend companion for Adalo. It provides a visual API builder with server-side logic, a scalable PostgreSQL database, and automatic API documentation. Use Xano when:
- Your database needs exceed Adalo's built-in limits (>10,000 records)
- You need server-side data processing (aggregations, transformations)
- Complex business logic that shouldn't run on the client
- You want a backend that survives an eventual Adalo migration
Troubleshooting API Integrations
| Problem | Likely Cause | Fix |
|---|---|---|
| CORS error | API server doesn't allow Adalo's origin | Add CORS headers to your API or use a proxy |
| "No Results" on GET | Response isn't a root-level JSON array | change response or use middleware |
| Auth failing | Wrong header format or expired token | Verify exact format in Postman first |
| Custom action not firing | Trigger condition not met or wrong click target | Check action is on the correct component |
| Slow external data | Large payload or slow API | Implement pagination, reduce response fields |
Need help with a complex Adalo integration? Get a free scope estimate from our certified Adalo team.
FAQ
Can Adalo connect to any API?
Adalo can connect to any REST API that returns JSON and supports CORS. GraphQL is not natively supported. For APIs that don't meet these requirements, use middleware (Zapier, Make, or a custom proxy) to change requests/responses.
What's the difference between external collections and custom actions?
External collections pull data INTO Adalo for display (GET requests). Custom actions push data OUT of Adalo when users perform actions (POST/PUT/DELETE). Most integrations use both - external collections to display data and custom actions to create/update it.
How do I handle authentication in Adalo API calls?
Add authentication headers in your external collection or custom action configuration. For API keys, use a custom header (e.g., x-api-key: your-key). For OAuth, use Authorization: Bearer your-token. Adalo sends these headers with every request.