Build a Client Portal with Softr (Step by Step)

Kundenportal mit Softr erstellen

🇬🇧 English

How to Use Softr to Build a Client Portal — Step by Step

A client portal is one of the most valuable tools you can offer your customers. It gives them a central place to access documents, track project progress, submit requests, and communicate with your team — all without cluttered email threads. The good news? You don't need a developer to build one. With Softr, you can create a fully functional, branded client portal in hours, not weeks.

In this guide, you'll learn exactly how to set up your client portal using softr, step by step — from connecting your data source to publishing a polished, access-controlled interface.

What Is Softr?

softr is a no-code web app builder that lets you turn Airtable, Google Sheets, or HubSpot data into fully functional web applications — including portals, directories, marketplaces, and internal tools. It's especially popular among freelancers, agencies, and small businesses that want powerful client-facing tools without writing a single line of code.

What You'll Need Before You Start

  • A free or paid softr account
  • An Airtable base or Google Sheets spreadsheet as your data source
  • Basic knowledge of your data structure (clients, projects, files, etc.)
  • Optional: a custom domain for a branded experience

Step 1: Set Up Your Data Source

Before touching softr, prepare your data. If you're using Airtable, create a base with tables for your clients, projects, and any relevant documents or tasks. Each row will typically represent one record — for example, one project or one client file.

Make sure your data includes a field that can be used for filtering by client, such as a Client Email or Client ID column. This will be essential for showing each logged-in user only their own data.

Step 2: Create a New App in Softr

Log into your softr dashboard and click "Create new app". You'll be prompted to choose a template. Select the "Client Portal" template — this gives you a pre-built structure with login, a dashboard, and list pages already configured.

Once the template loads, connect your Airtable base or Google Sheets file when prompted. softr will automatically map your fields to the blocks on screen.

Step 3: Configure User Authentication

One of the most powerful features in softr is its built-in user management. Navigate to the "Users" section in your app settings. Here you can:

  • Enable email/password login or magic link authentication
  • Import existing client emails directly from your Airtable base
  • Set up user groups (e.g., "Client", "Admin") with different access levels
  • Restrict specific pages to logged-in users only

softr handles all the authentication logic for you — no backend code required.

Step 4: Add and Customize Blocks

The softr editor is built around "blocks" — pre-designed UI components like lists, tables, forms, charts, and file galleries. To build your client portal, you'll typically want to add:

  • List or Table block — to display projects, invoices, or tickets
  • Details block — to show the details of a single record
  • Form block — to let clients submit new requests
  • File gallery block — to share downloadable documents
  • Header and navigation — for a professional branded look

Each block connects directly to your data source. Click any block to configure which fields are displayed, how items are filtered, and what actions users can take.

Step 5: Set Up Conditional Data Filtering

This step is critical. You need each client to see only their own data. In softr, this is handled through conditional filters on each data block.

On your List or Table block, open the filter settings and add a rule such as: "Client Email equals Logged-in User Email". This ensures that when a client logs in, they only see records linked to their email address. Apply this filter to every block that displays client-specific data.

Step 6: Customize Your Branding

softr makes it easy to match your portal to your brand. In the Design settings, you can update:

  • Logo and favicon
  • Primary and secondary colors
  • Fonts and button styles
  • Page layout and spacing

A branded portal builds trust and professionalism — your clients will feel like they're using a custom-built product, not a generic tool.

Step 7: Add a Custom Domain

To fully white-label your portal, connect a custom domain inside softr's settings. Navigate to Settings → Custom Domain and follow the instructions to point your domain's DNS records to softr. Once verified, your portal will be accessible at something like portal.youragency.com.

Step 8: Test and Publish

Before going live, test the portal from a client's perspective. Create a test user account, log in, and verify that:

  • Only the correct data is visible
  • All links and navigation work as expected
  • Forms submit data correctly back to your Airtable base
  • The portal looks good on mobile devices

When everything checks out, click "Publish" in softr and share the portal link with your clients.

Pro Tips for a Better Client Portal

  • Use automations: Connect softr with Zapier or Make to trigger emails when a client submits a form or a project status changes.
  • Add a notification system: Use Airtable automations to notify your team when clients upload files or submit requests.
  • Keep it simple: Don't overwhelm clients with too many pages. Stick to what they actually need: project status, documents, and a contact form.
  • Iterate based on feedback: Ask clients what they wish they could see and update the portal in softr without any developer help.

Final Thoughts

Building a client portal used to require months of development and thousands in budget. With softr, you can launch a professional, fully functional portal in a single afternoon — connected to real data, secured with user authentication, and branded to match your business.

Whether you're a freelancer managing five clients or an agency handling dozens of projects, softr gives you the infrastructure to deliver an exceptional client experience without the technical overhead. Start with the free plan, build your first portal, and upgrade as your needs grow.

This post was created with tools we use and recommend: n8n for workflow automation, Turbotic as an AI-native automation alternative, ElevenLabs for AI voiceover, Placid for visual content creation, and Hostinger for reliable VPS hosting. Some links are affiliate links.

🇩🇪 Deutsch

Wie du mit Softr ein Kundenportal erstellst — Schritt für Schritt

Ein Kundenportal ist eines der wertvollsten Tools, das du deinen Kunden anbieten kannst. Es bietet ihnen einen zentralen Ort, um Dokumente abzurufen, den Projektfortschritt zu verfolgen, Anfragen einzureichen und mit deinem Team zu kommunizieren – ganz ohne endlose E-Mail-Ketten. Die gute Nachricht: Du brauchst keinen Entwickler dafür. Mit Softr kannst du in wenigen Stunden ein vollständig funktionsfähiges, gebrandetes Kundenportal erstellen.

In dieser Anleitung lernst du Schritt für Schritt, wie du dein Kundenportal mit softr aufbaust – von der Datenbankverbindung bis zur Veröffentlichung einer professionellen, zugangskontrollierten Oberfläche.

Was ist Softr?

softr ist ein No-Code-Web-App-Builder, mit dem du Daten aus Airtable, Google Sheets oder HubSpot in vollwertige Webanwendungen umwandeln kannst – darunter Portale, Verzeichnisse, Marktplätze und interne Tools. Besonders beliebt ist softr bei Freelancern, Agenturen und kleinen Unternehmen, die leistungsstarke kundenorientierte Tools wollen, ohne eine einzige Zeile Code zu schreiben.

Was du vorher brauchst

  • Ein kostenloses oder kostenpflichtiges softr-Konto
  • Eine Airtable-Base oder ein Google Sheets-Dokument als Datenquelle
  • Grundkenntnisse über deine Datenstruktur (Kunden, Projekte, Dateien usw.)
  • Optional: eine eigene Domain für ein gebrandetes Erlebnis

Schritt 1: Datenquelle vorbereiten

Bevor du softr öffnest, bereite deine Daten vor. Wenn du Airtable verwendest, erstelle eine Base mit Tabellen für deine Kunden, Projekte und relevante Dokumente oder Aufgaben. Jede Zeile steht in der Regel für einen Datensatz – zum Beispiel ein Projekt oder eine Kundendatei.

Stell sicher, dass deine Daten ein Feld enthalten, das zur Filterung nach Kunde genutzt werden kann, zum Beispiel eine Kunden-E-Mail- oder Kunden-ID-Spalte. Das ist entscheidend, damit jeder eingeloggte Nutzer nur seine eigenen Daten sieht.

Schritt 2: Neue App in Softr erstellen

Melde dich in deinem softr-Dashboard an und klicke auf „Neue App erstellen". Du wirst aufgefordert, eine Vorlage auszuwählen. Wähle die Vorlage „Client Portal" – sie liefert dir eine fertige Struktur mit Login, Dashboard und Listenseiten.

Sobald die Vorlage geladen ist, verbinde deine Airtable-Base oder dein Google-Sheets-Dokument. softr ordnet deine Felder automatisch den Blöcken auf dem Bildschirm zu.

Schritt 3: Nutzerauthentifizierung einrichten

Eine der mächtigsten Funktionen von softr ist das integrierte Nutzermanagement. Navigiere in deinen App-Einstellungen zum Bereich „Users". Hier kannst du:

  • E-Mail/Passwort-Login oder Magic-Link-Authentifizierung aktivieren
  • Bestehende Kunden-E-Mails direkt aus deiner Airtable-Base importieren
  • Nutzergruppen einrichten (z. B. „Kunde", „Admin") mit verschiedenen Zugriffsrechten
  • Bestimmte Seiten nur für eingeloggte Nutzer sichtbar machen

softr übernimmt die gesamte Authentifizierungslogik für dich – kein Backend-Code nötig.

Schritt 4: Blöcke hinzufügen und anpassen

Der softr-Editor basiert auf „Blöcken" – vorgefertigten UI-Komponenten wie Listen, Tabellen, Formularen, Charts und Datei-Galerien. Für dein Kundenportal brauchst du typischerweise:

  • Listen- oder Tabellenblock – zur Anzeige von Projekten, Rechnungen oder Tickets
  • Detailblock – um die Details eines einzelnen Datensatzes anzuzeigen
  • Formularblock – damit Kunden neue Anfragen einreichen können
  • Datei-Galerie-Block – um herunterladbare Dokumente bereitzustellen
  • Header und Navigation – für ein professionelles, gebrandetes Erscheinungsbild

Jeder Block ist direkt mit deiner Datenquelle verbunden. Klicke auf einen Block, um zu konfigurieren, welche Felder angezeigt werden, wie Einträge gefiltert werden und welche Aktionen Nutzer durchführen können.

Schritt 5: Bedingte Datenfilterung einrichten

Dieser Schritt ist entscheidend. Du musst sicherstellen, dass jeder Kunde nur seine eigenen Daten sieht. In softr wird das über bedingte Filter an jedem Datenblock geregelt.

Öffne bei deinem Listen- oder Tabellenblock die Filtereinstellungen und füge eine Regel hinzu, zum Beispiel: „Kunden-E-Mail entspricht der E-Mail des eingeloggten Nutzers". Damit sehen Kunden nach dem Login nur die Datensätze, die mit ihrer E-Mail-Adresse verknüpft sind. Wende diesen Filter auf jeden Block an, der kundenspezifische Daten anzeigt.

Schritt 6: Branding anpassen

softr macht es einfach, dein Portal an deine Marke anzupassen. In den Design-Einstellungen kannst du folgendes ändern:

  • Logo und Favicon
  • Primär- und Sekundärfarben
  • Schriften und Button-Stile
  • Seitenlayout und Abstände

Ein gebrandetes Portal schafft Vertrauen und Professionalität – deine Kunden haben das Gefühl, ein maßgefertigtes Produkt zu nutzen und kein generisches Tool.

Schritt 7: Eigene Domain verbinden

Für ein vollständiges White-Label-Erlebnis verbinde eine eigene Domain in den softr-Einstellungen. Navigiere zu Einstellungen → Custom Domain und folge den Anweisungen, um die DNS-Einträge deiner Domain auf softr zu verweisen. Nach der Verifizierung ist dein Portal unter einer Adresse wie portal.deineagentur.com erreichbar.

Schritt 8: Testen und veröffentlichen

Bevor du live gehst, teste das Portal aus der Perspektive eines Kunden. Erstelle ein Test-Nutzerkonto, melde dich an und prüfe:

  • Ob nur die richtigen Daten sichtbar sind
  • Ob alle Links und die Navigation wie erwartet funktionieren
  • Ob Formulare Daten korrekt an deine Airtable-Base übermitteln
  • Ob das Portal auf mobilen Geräten gut aussieht

Wenn alles stimmt, klicke in softr auf „Veröffentlichen" und teile den Portal-Link mit deinen Kunden.

Profi-Tipps für ein besseres Kundenportal

  • Automatisierungen nutzen: Verbinde softr mit Zapier oder Make, um E-Mails auszulösen, wenn ein Kunde ein Formular ausfüllt oder sich ein Projektstatus ändert.
  • Benachrichtigungssystem hinzufügen: Nutze Airtable-Automationen, um dein Team zu informieren, wenn Kunden

    Dieser Beitrag wurde mit Tools erstellt, die wir selbst nutzen und empfehlen: n8n für Workflow-Automatisierung, Turbotic als KI-native Automatisierungsalternative, ElevenLabs für KI-Voiceover, Placid für visuelle Content-Erstellung und netcup für zuverlässiges VPS-Hosting in Deutschland. Einige Links sind Affiliate-Links.