Adalo Integration

Trigger real mockup renders from a button in your Adalo app using a Custom Action. No code required.

No-Code App Builder

A Custom Action calls SudoMock when a user taps a button, then hands the finished mockup URL back to your app

An Adalo Custom Action sends your user's design to the SudoMock render endpoint and receives a finished, photorealistic mockup image URL in the response. You can store that URL on a record or show it in your app. This guide follows Adalo's Custom Actions documentation and covers the one setup detail that causes most failures: dynamic values must be defined as Inputs with Example Values, never typed into the body by hand.

Before You Start

API key: create one in your dashboard. See Authentication for details.
Mockup and layer UUIDs: you need your mockup_uuid and the uuid of each smart object layer you want to fill.
A reachable design URL: SudoMock downloads the artwork from the URL you send, so it must load without a login.
An Adalo plan with Custom Actions: Adalo offers Custom Actions on its Professional plan and higher.

Get the UUIDs either from the API:

List your mockups

1curl -X GET "https://api.sudomock.com/api/v1/mockups" \
2  -H "x-api-key: sm_your_api_key"

The response lists every mockup with its uuid and a smart_objects array containing each layer's uuid. Or open a mockup in the Playground and switch to the Code tab: the generated request already contains your mockup_uuid and layer UUIDs.

Create the Custom Action

Start a New Custom Action

Select a button (or another component that supports actions), click Add Action, then choose Custom Action > New Custom Action. Name it something like Render Mockup. The name is internal only.

Note: Adalo does not offer Custom Actions on form submit buttons. Use a regular button.

Set Method and URL

Method: POST
URL: https://api.sudomock.com/api/v1/renders

Add Headers

Click +Add Header and add both headers:

Headers

1Name: x-api-key
2Value: sm_your_api_key_here
3
4Name: Content-Type
5Value: application/json

Define Inputs with Example Values

In the Inputs section on the right, click +Add Input for every value that changes per user or per record. For a first version one input is enough:

Name: Design URL
Type: Text
Example Value: a real, public image URL, for example https://example.com/designs/artwork.png

Click Done. Repeat for any other dynamic value (a per-record mockup UUID, a second layer's artwork, and so on).

Example Values are literal test data

The test request runs with the Example Values exactly as typed. Use a plain sample value only: a URL, a UUID, a number. Never put magic text or placeholder markers such as # tokens into an Example Value.

Build the JSON Body

Paste the body below, then replace the values that should be dynamic: select the artwork URL string (keep the surrounding double quotes) and insert your Design URL input with the Magic Text button. Leave the inserted token exactly as Adalo renders it; do not retype or edit it.

Request body (replace the UUIDs with your own)

1{
2  "mockup_uuid": "c315f78f-d2c7-4541-b240-a9372842de94",
3  "smart_objects": [
4    {
5      "uuid": "128394ee-6758-4f2f-aa36-e2b19b152bd9",
6      "asset": {
7        "url": "https://example.com/designs/artwork.png",
8        "fit": "cover"
9      }
10    }
11  ],
12  "export_options": {
13    "image_format": "webp",
14    "image_size": 2048
15  }
16}

Never hand-type magic text into the body

If you type a placeholder into the body yourself instead of inserting an Input, Adalo has no value to substitute when the field is empty. The request then reaches SudoMock with literal text such as #null in place of a real value, validation fails with 422, and the test never passes. Every dynamic value must be an Input with an Example Value, inserted through the Magic Text button.

Run the Test Request

Click Run Test Request. Adalo sends the request using your Example Values. On success you will see a Test Successful message; click Show Full Response to inspect the JSON that came back. A successful test costs one render credit, like any other render.

Add the Output and Save

Click +Add Item under Outputs and add the render URL field (see the response layout below) as a Text output named Render URL. Then click Save immediately. Outputs become available to the actions that run after this one.

Bind the Inputs on Your Button

Example Values only feed the test. In the live app, every place you attach the action supplies real values through magic text:

Open the button's actions and select your Render Mockup custom action (it is saved and reusable across the app).
Each Input you defined appears as a field in the action settings. Use the Magic Text button to bind it to the record that holds the real value, for example Current Design > Artwork URL.
In a follow-up action, use the Render URL output to store the result, for example Update Current Design with Render URL written to an image or text property.

Custom Actions are team-wide

Adalo saves Custom Actions at the team level, not per app. Editing this action later changes it in every app that uses it.

Get the Render URL from the Response

A successful render responds with the finished image URL at data.print_files[0].export_path:

Render response

1{
2  "success": true,
3  "data": {
4    "print_files": [
5      {
6        "export_path": "https://cdn.sudomock.com/renders/c315f78f-.../render_1711234567890.webp",
7        "smart_object_uuid": "128394ee-6758-4f2f-aa36-e2b19b152bd9",
8        "render_uuid": "9adcc828-1f4e-4a2b-9c3d-2e6f8b0a1d77"
9      }
10    ],
11    "render_uuid": "9adcc828-1f4e-4a2b-9c3d-2e6f8b0a1d77"
12  }
13}

Adalo Outputs support Text, Number, and Date/Time fields; fields inside nested arrays are not always listed. If export_path does not appear when you click +Add Item, run the render through an intermediary that returns a flat field instead: our Make guide and Zapier guide both show the same render call, and both tools can pass the URL back to Adalo as a single text value.

Troubleshooting

Symptom	Why it happens	Fix
Test or live render fails with `422`, request contains literal text such as `#null`	Magic text was typed straight into the body. When the bound field is empty, the placeholder itself is sent instead of a value.	Remove hand-typed placeholders. Define each dynamic value as an Input with an Example Value and insert it with the Magic Text button.
Render fails because the design image cannot be downloaded	The design URL requires a login or is not publicly reachable, so SudoMock cannot fetch it.	Host the artwork at a public or signed URL. Open it in a private browser window: it must load without signing in.
Outputs are gone after re-testing or editing the action	Each re-test or save refreshes the response structure and clears previously added Outputs.	Run the test again, re-add the Outputs with `+Add Item`, then save immediately.
Test fails with a parse or validation error right after pasting text	Line breaks, unescaped quotes, or a trailing comma make the body invalid JSON.	Keep text values on a single line, wrap them in double quotes, and remove any comma after the last field.
`export_path` missing from the Outputs list	Adalo lists only Text, Number, and Date/Time response fields; nested array fields may not appear.	Call SudoMock through Make or Zapier and return the URL to Adalo as a flat text field.
`401 Unauthorized` on the test request	The `x-api-key` header is missing, misspelled, or holds an incomplete key.	Re-add the header named exactly `x-api-key` with the full key from your dashboard.

Adjust the render, not the app

Everything about the output image (format, size, which layers are filled, text overrides) is controlled by the request body. See the Render API reference for every available field.

Explore Other Integrations

The same render call works from Zapier, Make, n8n, and plain HTTP.

Zapier Guide Render API →