Hayder Al-Khalissi

Posted on Sep 7

Share Your Apify Actors as Branded Web Apps (Without Leaking Your API Token!)

#webscraping #automation #api #tutorial

Have you ever built an incredible Apify Actor to crawl websites, scrape leads, or generate datasets, only to hit a wall when it's time to share it with clients, teammates, or non-technical users?

Usually, the options aren't great: you either have to teach them how to navigate the technical Apify Console (and risk them accidentally modifying something), build and host a custom frontend from scratch (which takes hours or days), or worse—manually run the Actor and email them the CSVs.

But what if you could turn your Actor into a clean, customized, and branded web app in under five minutes, completely hiding the underlying Apify complexity and keeping your API token safe?

Enter ActorWebApp (solutionssmart/actorwebapp), a clever tool maintained by the community that does exactly this.

📺 Watch the Walkthrough!

Before we dive into the details, I put together an educational, step-by-step video showing exactly how to set up and run the ActorWebApp in real-time. Check it out below!

🎥

In this tutorial, you will see how we take a standard scraper and transform it into a fully styled client-facing portal in just a few clicks!

Why ActorWebApp is a Game-Changer

Instead of spending your weekend writing boilerplate frontend code, routing API endpoints, and configuring webhooks, ActorWebApp acts as an instant UI proxy. It reads your target Actor's default-build input schema and automatically generates a matching web form .

Here is what makes it so powerful:

Instant Web Form Generation: It parses standard input fields, arrays, selectors, request lists, help texts, and numeric limits directly from the target Actor's schema.
No More Token Exposure: Your APIFY_TOKEN is kept securely on the server-side and is never sent to the end user's browser.
Built-in Brand Styling: You can easily customize the app with a light, dark, or warm theme, set an accent color, and upload your custom logo to show in the header.
Live Run Progress & Output Downloads: Users can fill out the form, click run, watch the status in real-time, preview the dataset rows, and download their data directly as JSON or CSV.
Simplifies the UI: You can toggle off technical platform parameters (like proxy settings, memory, and runtime options) so your clients only see the fields they actually need.

Common Use Cases

Client Data Portals: Turn a website scraper or lead generation tool into a branded data-collection interface for non-technical clients.
Team Operations: Let marketing or sales teams trigger internal data-gathering workflows without them needing access to your Apify platform credentials.
Result Delivery: Provide an instant results page showing live table previews and quick downloads without hosting a database.

How to Set It Up (Step-by-Step)

Getting your web app live takes just four simple steps:

1. Deploy & Enable Standby Mode

Deploy the Actor Web App (solutionssmart/actorwebapp) to your Apify account and enable Standby mode. Standby mode is what keeps the application active and ready to respond to requests.

2. Configure the Target Actor

Specify the Actor you want to create a frontend for by setting the actorId in the username/actor-name format. The target Actor must be accessible to the account running your Web App.

3. Customize Your Branding & Displays

Using the Apify Console's configuration controls (or directly editing the JSON), configure your branding, input display, and output display groups.

Here is a complete JSON configuration example to give you an idea of what is possible:

{
  "actorId": "solutionssmart/brand-dna",
  "title": "Brand DNA Portal",
  "description": "Extract a structured brand profile from any website.",
  "branding": {
    "logoUrl": "https://yourdomain.com/assets/logo.png",
    "accentColor": "#19724c",
    "theme": "dark",
    "hideApifyTechnicalFields": true
  },
  "input": {
    "showAdvancedFields": false
  },
  "output": {
    "showTable": true,
    "allowCsv": true,
    "allowJson": true,
    "maxPreviewRows": 100
  }
}

Note: You can replace the logo URL with any HTTPS image URL you control, set any hex accent color, and choose between a light, dark, or warm theme.

4. Share the Standby URL

Go to the Standby tab in your Apify Console, copy the shareable Standby URL, and send it to your team or clients. When they open it in their browser, they will see your beautifully branded form.

A Few Limitations to Keep in Mind

While ActorWebApp is incredibly versatile, here are a few things to keep in mind before building:

Schema Support: It supports the practical JSON Schema subset used by Apify input schema v1, but does not support arbitrary composition such as oneOf, $ref, or conditional schemas.
Data Sources: It reads from the default build, default Dataset, and filtered output files from the default Key-value store of the target Actor.
No Built-in User Management: It relies on Apify Standby for access and authentication settings rather than introducing its own separate user accounts. You can configure Standby access in Apify to control who can access your URL.

Wrapping Up

Building custom frontends for simple tools is a thing of the past. By leveraging solutionssmart/actorwebapp and Standby mode, you can deliver professional-grade, branded web applications to your clients and team in minutes, while keeping your developer credentials safe and sound.

Have you tried turning your scrapers into web apps yet? Let me know in the comments, and don't forget to watch the tutorial video above to see it in action!

Disclaimer: Actor Web App runs through Apify Standby and still incurs standard Apify platform execution and target Actor charges. Make sure to review your standby and running costs in Apify Console.

DEV Community