MyFortiPage MyFortiPage EN Kostenlose Beratung
Projektberichte

So entstand die Staublos-Website: Angebotsrechner, Chatbot und Adminbereich

Für staublos Gebäudereinigung in München habe ich einen zweisprachigen Unternehmensauftritt gestaltet und entwickelt. In diesem Projektbericht zeige ich die wichtigsten Funktionen, wie sie technisch umgesetzt sind und welche Überlegungen dahinterstehen.

Die kurze Antwort: Die Website von staublos verbindet klassische Leistungsseiten mit interaktiven Funktionen: Ein Angebotsrechner nennt einen Monatspreis, eine Dringlichkeitsauswahl führt Besucher zum passenden Kontaktweg, ein KI-Chatbot beantwortet häufige Fragen, und über einen Adminbereich lassen sich Inhalte selbst pflegen.

Die Website ist auf Deutsch und Englisch verfügbar und unter staublos-gebaeudereinigung.de online.

Das Projekt

staublos Gebäudereinigung ist seit 2013 in München tätig und auf die Reinigung von Büros und Gewerbeflächen spezialisiert. Die Website übernimmt vier Aufgaben:

  • die Leistungen verständlich und für Suchmaschinen gut erfassbar darstellen
  • Interessenten schnell eine Preisvorstellung geben
  • je nach Dringlichkeit den passenden Kontaktweg anbieten
  • Inhalte ohne Programmierkenntnisse aktuell halten
Startseite der Staublos-Website in einem Browserfenster und auf einem Smartphone
Die Startseite von staublos auf Desktop und Smartphone.

Der Online-Angebotsrechner

Herzstück der Website ist der Angebotsrechner. Er führt in drei Schritten zum Monatspreis für eine Büroreinigung:

  1. Reinigung: Besucher wählen die Fläche über einen Regler, die Häufigkeit von einmal bis fünfmal pro Woche und einen von zwei Tarifen. Ein PDF zeigt, was die Tarife „Basic“ und „Plus“ jeweils umfassen.
  2. Kontakt: Besucher geben ihre Kontaktdaten ein.
  3. Preis: Der berechnete Monatspreis erscheint. Optional lässt sich direkt ein Wunschtermin angeben oder das Angebot per E-Mail anfordern.

Für sehr große Flächen nennt der Rechner keinen Preis, sondern verweist auf ein individuelles Angebot.

Erster Schritt des Staublos-Angebotsrechners mit Flächenregler und Buchungsübersicht
Der Angebotsrechner: links die Buchungsübersicht, rechts die Eingabe in drei Schritten.

Die Dringlichkeitsauswahl

Nicht jeder Besucher hat dasselbe Anliegen. Wer in Ruhe vergleichen möchte, braucht etwas anderes als jemand, bei dem es heute noch klappen muss. Auf der Startseite schieben Besucher deshalb einen Transporter über eine Skala von 1 bis 10:

  • 1–3, „In Ruhe“: Der Weg führt zum Angebotsrechner.
  • 4–7, „Zeitnah“: Besucher schreiben per WhatsApp.
  • 8–10, „Dringend“: Besucher rufen direkt an.

Technisch liegt unter der Grafik ein unsichtbarer Schieberegler. Dadurch funktioniert die Auswahl mit Maus, Finger und Tastatur und ist auch für Screenreader verständlich.

Dringlichkeitsauswahl auf der Staublos-Startseite mit Transporter auf Stufe 5 und WhatsApp-Empfehlung
Bei Stufe 5 empfiehlt die Website den Kontakt per WhatsApp.

Der KI-Chatbot

Der Chatbot beantwortet Fragen zu Leistungen, Preisen und zur Buchung. Vorgeschlagene Fragen erleichtern den Einstieg. Er ist klar als KI-Assistent gekennzeichnet und weist darauf hin, dass verbindliche Auskünfte über das Kontaktformular erfolgen.

Technisch ist der Chatbot so umgesetzt:

  • Die Anfragen laufen über ein eigenes Skript auf dem Server. Der Zugangsschlüssel zum KI-Modell gelangt nie in den Browser.
  • Die grundlegenden Anweisungen an die KI liegen auf dem Server.
  • Zusätzliche Prüfungen und Begrenzungen, etwa für die Länge der Nachrichten und die Anzahl der Anfragen pro Zeitraum, reduzieren das Risiko unerwünschter Nutzung. Fehlerhafte Antworten bleiben möglich.
Geöffneter Staublos-Chatbot mit Begrüßung und vorgeschlagenen Fragen
Der Chatbot mit Begrüßung, vorgeschlagenen Fragen und Hinweis zur Verbindlichkeit.

Der Adminbereich

Damit staublos Inhalte selbst aktuell halten kann, gehört ein eigener Adminbereich zur Website. Darin lassen sich unter anderem verwalten:

  • Texte der Startseite auf Deutsch und Englisch
  • Seitentitel und Beschreibungen für Google
  • Schriftart und Farben sowie einzelne Funktionen
  • neue Seiten, Bilder, Kundenlogos und Kundenstimmen
  • Impressum und Datenschutz
  • Sicherungen der Inhalte

Der Zugang ist mehrfach geschützt: Passwörter werden als Hash gespeichert, Formulare sind gegen gefälschte Anfragen abgesichert, und nach mehreren Fehlversuchen wird die Anmeldung vorübergehend gesperrt. Aus Sicherheitsgründen zeige ich hier keinen Screenshot des Adminbereichs.

Weitere Bausteine

  • Zweisprachigkeit: Alle wichtigen Inhalte gibt es auf Deutsch und Englisch.
  • Blog: Ratgeber zu Kosten, Leistungsumfang und Organisation einer Büroreinigung.
  • Kontaktformular: Anfragen werden über ein Server-Skript verschickt.
  • Cookie-Einstellungen: Besucher entscheiden selbst über optionale Dienste.

Technische Umsetzung

Die Website ist ohne Baukasten entwickelt. Gestaltung und Funktionen basieren auf HTML, CSS und JavaScript. Für Funktionen, die auf dem Server laufen müssen – Kontaktformular, Chatbot und Adminbereich –, kommt PHP zum Einsatz. Die pflegbaren Inhalte liegen in strukturierten Dateien, die der Adminbereich bearbeitet. Bilder werden im platzsparenden WebP-Format ausgeliefert.

Was andere Unternehmen daraus mitnehmen können

  • Interaktive Funktionen sind dann sinnvoll, wenn sie eine konkrete Frage beantworten – etwa „Was kostet das?“.
  • Unterschiedliche Anliegen brauchen unterschiedliche Kontaktwege.
  • Ein Adminbereich macht unabhängig, wenn Inhalte regelmäßig angepasst werden.
  • Sicherheit gehört von Anfang an in die Planung, nicht erst nach dem Start.

Fragen zu diesem Artikel?Ich antworte dir persönlich – kostenlos und unverbindlich.

Frage stellen

Häufige Fragen

Fragen zum Staublos-Projekt

Ist staublos ein echtes Kundenprojekt?
Ja. Die Website von staublos Gebäudereinigung ist ein Kundenprojekt und unter staublos-gebaeudereinigung.de online.
Kann ich einen ähnlichen Angebotsrechner für mein Unternehmen bekommen?
Ja. Individuelle Funktionen wie Angebotsrechner, interaktive Elemente oder KI-Chatbots sind möglich. Umfang und Kosten vereinbaren wir passend zu deinem Projekt.
Kann ich die Inhalte meiner Website selbst ändern?
Auf Wunsch integriere ich ein CMS oder einen Administrationsbereich. Welche Inhalte du damit bearbeiten kannst, legen wir vorab fest. Alternativ übernehme ich Änderungen für dich.
Sind die Antworten des Chatbots immer richtig?
Nein. Der Chatbot ist als KI gekennzeichnet, und seine Antworten können Fehler enthalten. Verbindliche Auskünfte gibt es über die persönlichen Kontaktwege.
Mit welcher Technik ist die Website umgesetzt?
Mit HTML, CSS und JavaScript ohne Baukasten. Kontaktformular, Chatbot und Adminbereich laufen über PHP auf dem Server.

Kostenlos & unverbindlich

Du möchtest ähnliche Funktionen?

Erzähl mir, welche Aufgaben deine Website übernehmen soll – etwa Preise berechnen, Fragen beantworten oder Inhalte selbst pflegen. Danach erhältst du ein unverbindliches Angebot.

Projekt besprechen
MyFortiPage KI-Assistent KI · antwortet sofort

👋 Hallo! Ich bin der KI-Assistent von MyFortiPage — du chattest hier mit einer künstlichen Intelligenz. Ich beantworte alle deine Fragen rund um unsere Webseiten-Pakete, Leistungen und Preise.

Wie kann ich dir helfen?