Von DocuGenerate Der Aufbau professioneller Kunden-Onboarding-Systeme kann komplex sein, insbesondere wenn Sie personalisierte Dokumente erstellen und diese automatisch per E-Mail zustellen müssen. Herkömmliche Ansätze erfordern oft umfangreiche Entwicklungsarbeit, benutzerdefinierte Integrationen und erhebliches technisches Fachwissen. Mit modernen No-Code-Plattformen wie Bubble in Kombination mit spezialisierten Dokumentengenerierungsdiensten können Sie jedoch ausgefeilte Workflows erstellen, die alles von der Datenerfassung bis zur Dokumentzustellung abdecken.
In diesem umfassenden Tutorial erstellen wir ein vollständiges Kunden-Onboarding-System, das Kundeninformationen über ein Webformular erfasst, personalisierte Geheimhaltungsvereinbarungen (NDAs) auf Basis dieser Daten generiert und die fertigen Dokumente automatisch als E-Mail-Anhänge versendet. Dieser Ansatz zeigt, wie Sie Bubbles visuelle Entwicklungsplattform zusammen mit der Dokumentengenerierungs-API von DocuGenerate nutzen können, um professionelle Geschäftsworkflows ohne Code zu erstellen.
Das von uns erstellte System demonstriert mehrere leistungsstarke Konzepte: automatische Dokumentgenerierung basierend auf Formulareinreichungen, Integration zwischen No-Code-Plattformen und externen APIs sowie professionelle E-Mail-Zustellung mit Dateianhängen. Dieser Workflow ist besonders wertvoll für Unternehmen, die Kundenvereinbarungen, Verträge oder andere personalisierte Dokumente in großem Maßstab verarbeiten müssen und dabei ein professionelles Erscheinungsbild und zuverlässige Zustellung gewährleisten wollen.
Um unseren Entwicklungsprozess zu beschleunigen, verwenden wir Bubbles innovativen KI-Seitendesigner, der vollständige Anwendungsoberflächen basierend auf natürlichsprachlichen Beschreibungen generieren kann. Diese Funktion, die im Juni 2024 als Beta öffentlich veröffentlicht und beim Zero to One With AI + No-Code-Event offiziell angekündigt wurde, stellt einen bedeutenden Fortschritt in der No-Code-Anwendungsentwicklung dar.
Der KI-Seitendesigner ermöglicht es uns, unsere Anforderungen in einfachem Englisch zu beschreiben und eine vollständig funktionsfähige Anwendungsstruktur mit Formularen, Workflows und Datentypen zu erhalten. Dieser Ansatz reduziert die Entwicklungszeit erheblich und stellt sicher, dass die generierte Anwendung den Best Practices und Designmustern von Bubble folgt.
Für unser NDA-Unterzeichnungssystem geben wir dem KI-Designer folgenden detaillierten Prompt: “Help me create a web page that will allow my clients to sign NDAs. The web page needs to be modern and contain a form with the following fields: Name, Address, Email and Country. The form data will be used to generate the NDA using DocuGenerate and send it by email to the client.”
Dieser Prompt gibt der KI genug Kontext, um sowohl die funktionalen Anforderungen (Formularfelder, Datenverarbeitung) als auch den beabsichtigten Workflow (Dokumentgenerierung und E-Mail-Zustellung) zu verstehen. Die KI wird diese Informationen nutzen, um geeignete Datenstrukturen, Benutzeroberflächenelemente und initiale Workflow-Konfigurationen zu erstellen.
Der Generierungsprozess dauert in der Regel mehrere Minuten, während Bubbles KI die Anforderungen analysiert, die notwendigen Komponenten erstellt und sie zu einer kohärenten Anwendung zusammensetzt. Es ist wichtig, den Browser-Tab während dieses Prozesses offen zu halten, da das Schließen die Generierung unterbrechen kann.
Sobald die KI den Generierungsprozess abgeschlossen hat, verfügen Sie über eine vollständig funktionsfähige Anwendung mit mehreren Seiten, Datenstrukturen und initialen Workflows. Die generierte Anwendung umfasst zwei primäre Seiten, die zusammenarbeiten, um ein vollständiges Benutzererlebnis zu schaffen.
Dies dient als Haupteinstiegspunkt, an dem Kunden mit Ihrem System interagieren. Die Seite enthält ein modernes, übersichtliches Design mit einem umfassenden Formular, das alle für die NDA-Generierung notwendigen Informationen erfasst. Das Formular enthält Felder für den vollständigen Name, die Address, die Email Address und das Country, sowie eine prominente Submit NDA Request-Schaltfläche, die den Dokumentgenerierungs- und E-Mail-Zustellungs-Workflow initiiert.
Das Design der Startseite priorisiert das Benutzererlebnis mit klarer Beschriftung, angemessener Formularvalidierung und visuellem Feedback. Das Layout ist responsiv und professionell, sodass Kunden das Formular unabhängig von ihrem Gerät oder technischen Kenntnissen problemlos ausfüllen können.
Nach dem Absenden des Formulars werden Benutzer automatisch zu dieser Seite weitergeleitet, die sofortiges Feedback zu ihrem Anfragestatus liefert. Die Bestätigungsseite zeigt die übermittelten Informationen und den aktuellen Verarbeitungsstatus an, schafft Transparenz und stärkt das Vertrauen der Benutzer in das System.
Diese Zwei-Seiten-Struktur folgt bewährten Mustern für formularbasierte Anwendungen und bietet Benutzern klares Feedback und Engagement während des gesamten Prozesses.
Der KI-Designer erstellt automatisch den NdaSubmission-Datentyp, der als Grundlage für die Speicherung und Verwaltung von Kundeninformationen während des Workflows dient. Diese Datenstruktur ist so konzipiert, dass sie sowohl die initiale Formulareinreichung als auch die verschiedenen Statusverfolgungsfelder aufnehmen kann, die für die Dokumentgenerierung und E-Mail-Zustellung benötigt werden.
Der NdaSubmission-Datentyp enthält folgende Felder:
address (text): Speichert die vollständige Adressinformation des Kundenconfirmation_email_sent (yes/no): Verfolgt, ob die initiale Bestätigungs-E-Mail gesendet wurdecountry (text): Erfasst die Länderinformation des Kundendocugenerate_status (text): Überwacht den Dokumentgenerierungsprozess-Statusemail (text): Enthält die E-Mail-Adresse des Kunden für die Dokumentzustellungname (text): Speichert den vollständigen Namen des Kundennda_email_sent (yes/no): Gibt an, ob das NDA erfolgreich zugestellt wurdesubmission_date (date): Erfasst, wann das Formular ursprünglich eingereicht wurdeDiese umfassende Datenstruktur unterstützt sowohl die unmittelbaren Workflow-Anforderungen als auch zukünftige Erweiterungen wie Berichterstattung, Analysen und erweiterte Statusverfolgung.
Die generierte Anwendung enthält ein durchdachtes Beispieldataset, das die NdaSubmission-Tabelle mit realistischen Einträgen befüllt. Diese Beispieldaten dienen mehreren Zwecken: Sie demonstrieren das erwartete Datenformat, liefern sofortigen Inhalt für Test-Workflows und bieten Beispiele dafür, wie das System verschiedene Kundenszenarien behandelt.
Die sofortige Verfügbarkeit von Beispieldaten ermöglicht es Ihnen, den vollständigen Workflow zu testen, ohne manuell Testeinträge erstellen zu müssen. Dieser Ansatz beschleunigt die Entwicklung und stellt sicher, dass Sie die ordnungsgemäße Funktion aller Systemkomponenten überprüfen können, bevor Sie in die Produktion gehen.
Um Dokumentengenerierungsfunktionen in unserer Bubble-Anwendung zu aktivieren, müssen wir das DocuGenerate-Plugin aus dem Bubble-Marktplatz installieren und konfigurieren. Dieses Plugin bietet direkten Zugriff auf die API-Funktionalität von DocuGenerate über Bubbles visuelles Workflow-System und beseitigt die Notwendigkeit einer benutzerdefinierten API-Integration.
Die Plugin-Installation ist unkompliziert. Navigieren Sie zum Abschnitt Plugins in Ihrem Bubble-Editor und suchen Sie im Marktplatz nach „DocuGenerate”, dann klicken Sie auf Install:
Nach der Installation des Plugins müssen Sie es mit Ihren DocuGenerate-API-Zugangsdaten konfigurieren. Diese Konfiguration stellt die Verbindung zwischen Ihrer Bubble-Anwendung und Ihrem DocuGenerate-Konto her und ermöglicht sichere Kommunikation für Dokumentengenerierungsanfragen.
Die Konfiguration erfordert Ihren DocuGenerate-API-Schlüssel, den Sie in Ihren DocuGenerate-Kontoeinstellungen finden. Dieser API-Schlüssel authentifiziert Ihre Anfragen und stellt sicher, dass generierte Dokumente ordnungsgemäß Ihrem Konto und Ihren Nutzungslimits zugeordnet werden.
Sobald konfiguriert, bietet das Plugin über Bubbles Action-System Zugriff auf alle DocuGenerate-Funktionalitäten, einschließlich Dokumentgenerierung, Vorlagenverwaltung und Statusüberwachung. Das Plugin übernimmt automatisch Authentifizierung, Anforderungsformatierung und Antwortverarbeitung.
Bevor wir personalisierte NDAs generieren können, müssen wir eine Vorlage erstellen, die die Dokumentstruktur definiert und angibt, wo kundenspezifische Informationen eingefügt werden sollen. Für dieses Tutorial verwenden wir die Non Disclosure Agreement-Vorlage aus der Vorlagenbibliothek von DocuGenerate, die ein professionell formatiertes Rechtsdokument mit entsprechenden Merge-Tags bereitstellt.
Die Vorlage enthält mehrere Schlüsselabschnitte, die sie für unseren automatisierten Workflow geeignet machen:
Parteieninformationen: Die Vorlage enthält dedizierte Abschnitte für beide Parteien – die offenlegende Partei (Ihr Unternehmen) und die empfangende Partei (der Kunde) – mit Merge-Tags, die mit Informationen aus unserem Bubble-Formular befüllt werden.
Rechtlicher Rahmen: Die gesamte notwendige Rechtssprache ist vorgeschrieben und entsprechend formatiert, sodass die generierten Dokumente professionelle Rechtsstandards einhalten.
Merge-Tag-Integration: Die strategische Platzierung von Merge-Tags im gesamten Dokument ermöglicht das Einfügen dynamischer Inhalte bei Beibehaltung der richtigen Formatierung und rechtlichen Struktur.
Die Vorlage verwendet die Merge-Tag-Syntax von DocuGenerate, um anzugeben, wo dynamische Inhalte eingefügt werden sollen. Diese Tags entsprechen den Daten, die wir in unserem Bubble-Formular erfassen und über die DocuGenerate-API während des Generierungsprozesses übergeben.
Die KI-generierte Anwendung bietet einen Grundworkflow, den wir mit Dokumentgenerierungs- und E-Mail-Zustellungsfähigkeiten erweitern müssen. Der initiale Workflow umfasst grundlegende Formularverarbeitung und Seitennavigation, aber wir werden ihn um den vollständigen Dokumentenautomatisierungsprozess erweitern.
Der vorhandene Workflow auf der Startseite umfasst drei primäre Schritte, die den grundlegenden Formulareinreichungsprozess handhaben:
NdaSubmission-Datensatz mit Formulardaten
Dieser grundlegende Workflow erfasst die Formulardaten und liefert Benutzer-Feedback, enthält jedoch noch nicht die Dokumentgenerierungs- oder E-Mail-Zustellungsfunktionalität, die wir benötigen. Wir werden auf dieser Grundlage aufbauen, indem wir zusätzliche Workflow-Schritte hinzufügen, die diese erweiterten Funktionen übernehmen.
Der nächste Schritt besteht darin, eine Dokumentgenerierungsaktion zu unserem Workflow hinzuzufügen. Diese Aktion wird unmittelbar nach dem Speichern der Formulardaten ausgelöst, sodass die Dokumentgenerierung beginnt, sobald die Kundeninformationen im System verfügbar sind.
Um den Dokumentgenerierungsschritt hinzuzufügen, klicken Sie auf die +-Schaltfläche nach den vorhandenen Workflow-Schritten, navigieren Sie zum Abschnitt Plugins und wählen Sie DocuGenerate - Generate Document.
Die Dokumentgenerierungsaktion erfordert mehrere Konfigurationsparameter, die unsere Formulardaten mit der DocuGenerate-Vorlage verbinden:
template_id: Identifiziert die spezifische NDA-Vorlage, die wir in DocuGenerate erstellt haben. Jede Vorlage hat eine eindeutige ID, die dem System mitteilt, welche Dokumentstruktur für die Generierung verwendet werden soll.
name: Wir setzen dies so, dass es den Namen des Kunden dynamisch enthält. Dies schafft beschreibende Dateinamen, die die Identifizierung generierter Dokumente erleichtern.
output_format: Geben Sie .pdf ein, um PDF-Dokumente zu generieren, die eine konsistente Formatierung über verschiedene Geräte und Plattformen hinweg bieten und ein professionelles Erscheinungsbild gewährleisten.
data: Dies ist der komplexeste Teil der Konfiguration, da er die Zuordnung unserer Formulardaten zu den Merge-Tags in der Vorlage erfordert. Die Daten sollten als JSON-Array formatiert sein, das die dynamischen Werte aus unserer Formulareinreichung enthält.
Diese JSON-Struktur ordnet jeden Merge-Tag in der Vorlage entweder statischen Informationen (wie Ihre Unternehmensdetails) oder dynamischen Daten aus der Formulareinreichung zu. Die dynamischen Werte verwenden Bubbles Syntax, um die im ersten Workflow-Schritt erstellten Daten zu referenzieren, und stellen sicher, dass jedes generierte Dokument die richtigen Kundeninformationen enthält:
[{
"Effective Date": "Result of step 1 (Create a new NdaSubmission)'s submission_date:formatted as 8/30/25",
"Disclosing Party Name": "NDA Signer",
"Disclosing Party Address": "93 East Lassen Street, Los Angeles, CA, 90013",
"Receiving Party Name": "Result of step 1 (Create a new NdaSubmission)'s name",
"Receiving Party Address": "Result of step 1 (Create a new NdaSubmission)'s address",
"Governing Country": "Result of step 1 (Create a new NdaSubmission)'s country"
}]
Der letzte Workflow-Schritt übernimmt die E-Mail-Zustellung des generierten Dokuments. Dabei wird Bubbles native E-Mail-Funktion verwendet, um die PDF als Anhang an die E-Mail-Adresse des Kunden zu senden. Das E-Mail-Zustellungssystem bietet professionelle Kommunikation und stellt sicher, dass Kunden ihre Dokumente umgehend und zuverlässig erhalten.
Um den E-Mail-Schritt hinzuzufügen, klicken Sie auf das +-Zeichen nach dem Dokumentgenerierungsschritt und wählen Sie Send email aus dem Email-Untermenü:
Die E-Mail-Konfiguration erfordert mehrere Parameter, die ein professionelles Kommunikationserlebnis schaffen:
Recipient: Auf Result of step 1 (Create a new NdaSubmission)'s email gesetzt, um automatisch an die eingereichte E-Mail-Adresse des Kunden zu senden.
Sender Name: Verwenden Sie einen professionellen Namen wie „NDA Signer” oder Ihren Unternehmensnamen, um Glaubwürdigkeit und Markenbekanntheit zu etablieren.
Subject Line: Erstellen Sie einen klaren, professionellen Betreff wie „Your NDA is ready”, der den Zweck der E-Mail sofort kommuniziert.
Email Body: Verfassen Sie eine personalisierte Nachricht, die Professionalität wahrt.
File Attachment: Dies ist der kritischste Konfigurationspunkt. Setzen Sie dies auf Result of step 2 (DocuGenerate - Generate Document)'s document_uri:saved to Bubble Storage.
Der :saved to Bubble Storage-Modifikator ist für die ordnungsgemäße Behandlung von E-Mail-Anhängen unerlässlich. Ohne diesen Modifikator kann Bubble nicht auf die generierte PDF-Datei für Anhangszwecke zugreifen. Dieser weist Bubble an, das generierte Dokument von DocuGenerate herunterzuladen und es vorübergehend im Dateisystem von Bubble zu speichern, sodass es als E-Mail-Anhang verfügbar ist.
Mit allen konfigurierten Workflow-Komponenten können wir die vollständige Anwendung testen, um zu überprüfen, ob jeder Schritt korrekt funktioniert und die Integration zwischen Bubble, DocuGenerate und der E-Mail-Zustellung wie erwartet funktioniert. Diese Testphase ist entscheidend, um Konfigurationsprobleme zu identifizieren, bevor die Anwendung in der Produktion eingesetzt wird.
Bubble bietet einen Vorschaumodus, mit dem Sie Ihre Anwendung in einer Live-Umgebung testen können, ohne Produktionsbenutzer zu beeinträchtigen. Sie können auf die Testversion unserer NDA-Anwendung hier zugreifen. Die Testumgebung bietet Debug-Modus-Funktionen, die detaillierte Informationen zur Workflow-Ausführung, Datenverarbeitung und etwaigen Fehlern liefern.
Der Testprozess umfasst die Durchführung der gesamten Benutzerreise von der Formulareinreichung bis zum Dokumentempfang. Beim Testen sollten Sie realistische Informationen verwenden, die Ihren erwarteten Kundendaten entsprechen. Nach dem Ausfüllen des Formulars mit Kundeninformationen verarbeitet das System automatisch die Anfrage durch alle Workflow-Schritte:
1. Formularverarbeitung: Kundeninformationen werden validiert und in der Datenbank gespeichert.
2. Dokumentgenerierung: Das NDA wird mit personalisierten Informationen erstellt.
3. E-Mail-Zustellung: Das fertige Dokument wird als Anhang versendet.
4. Benutzer-Feedback: Die Bestätigungsseite zeigt den aktuellen Status an.
Die generierte E-Mail demonstriert das professionelle Erscheinungsbild und die Funktionalität des vollständigen Systems:
Die E-Mail enthält den personalisierten Nachrichteninhalt, professionelle Formatierung und das generierte NDA als PDF-Anhang. Dies zeigt, dass der gesamte Workflow korrekt funktioniert und Kunden eine professionelle Erfahrung bietet.
Ein wichtiger Aspekt des Testens ist die Überprüfung, ob generierte Dokumente ordnungsgemäß im Dateiverwaltungssystem von Bubble gespeichert werden. Diese Speicherfähigkeit bietet Sicherungszugriff auf generierte Dokumente und unterstützt zukünftige Erweiterungen wie Dokumenthistorie oder Wiederholungszusendungen.
Der Dateimanager zeigt, dass jedes generierte NDA ordnungsgemäß mit entsprechenden Namenskonventionen gespeichert ist und für zukünftige Referenz zugänglich ist. Diese Speicherfähigkeit stellt sicher, dass Ihr System Aufzeichnungen aller generierten Dokumente führt und Compliance-Anforderungen sowie Kundendienstbedürfnisse unterstützt.
Das Erstellen eines automatisierten Dokumentengenerierungs- und E-Mail-Zustellungssystems mit Bubble und DocuGenerate demonstriert die Stärke moderner No-Code-Entwicklungsplattformen in Kombination mit spezialisierten APIs. Das von uns erstellte System verarbeitet komplexe Geschäftsprozesse einschließlich Datenerfassung, Dokumentpersonalisierung und professioneller Kommunikation – alles ohne traditionelle Softwareentwicklungsfähigkeiten.
Dieser Ansatz bietet erhebliche Vorteile für Unternehmen, die Kundendokumente in großem Maßstab verarbeiten müssen. Der automatisierte Workflow eliminiert die manuelle Dokumenterstellung, reduziert Fehler, gewährleistet konsistente Formatierung und bietet professionelle Kundenerfahrungen. Die Integration zwischen Bubbles visueller Entwicklungsplattform und den Dokumentengenerierungsfähigkeiten von DocuGenerate schafft eine Lösung, die sowohl leistungsstark als auch zugänglich ist.
Geben Sie Ihre E-Mail-Adresse ein, um den aktuellen Newsletter von DocuGenerate zu erhalten
Erfahren Sie, wie Sie einen intelligenten Lebenslauf-Analyzer aufbauen, der Bewerbungen automatisch mit Pipedream, Claude AI und DocuGenerate verarbeitet. Dieses Schritt-für-Schritt-Tutorial zeigt, wie Sie wichtige Daten aus Lebensläufen extrahieren und daraus PDF-Berichte erstellen.
Erfahren Sie, wie Sie mit n8n und DocuGenerate einen automatisierten Rechnungsgenerierungs-Workflow erstellen, der einen Ordner auf Excel-Dateien überwacht, die Daten extrahiert und professionelle PDF-Rechnungen generiert. Ideal für lokale Verarbeitung ohne Abhängigkeit von mehreren Cloud-Lösungen.
Entdecken Sie, wie Sie neue Vorlagen automatisch erstellen, wenn Google Docs zu einem Ordner hinzugefügt werden, und Vorlagen aktualisieren, wenn Dokumente geändert werden. Ideal für Teams, die lieber in Google Docs arbeiten, aber die Leistung von DocuGenerate für die Dokumentgenerierung benötigen.