How the Staublos website was built: quote calculator, chatbot and admin area

The project

staublos Gebäudereinigung has been operating in Munich since 2013 and specialises in cleaning offices and commercial spaces. The website fulfils four tasks:

• presenting the services clearly and in a way search engines can easily capture
• giving prospects a quick idea of the price
• offering the right way to get in touch depending on urgency
• keeping content up to date without programming knowledge

The online quote calculator

The heart of the website is the quote calculator. It leads to the monthly price for office cleaning in three steps:

1. Cleaning: visitors choose the area with a slider, the frequency from once to five times a week and one of two plans. A PDF shows what the “Basic” and “Plus” plans each include.
2. Contact: visitors enter their contact details.
3. Price: the calculated monthly price appears. Optionally, visitors can enter a preferred start date right away or request the quote by email.

For very large areas, the calculator doesn’t show a price but refers to an individual quote.

The urgency selector

Not every visitor has the same concern. Someone who wants to compare at leisure needs something different from someone who needs it sorted today. On the home page, visitors therefore slide a van along a scale from 1 to 10:

• 1–3, “at leisure”: the path leads to the quote calculator.
• 4–7, “soon”: visitors write via WhatsApp.
• 8–10, “urgent”: visitors call directly.

Technically, an invisible slider sits beneath the graphic. This means the selector works with a mouse, a finger and a keyboard and is also understandable for screen readers.

The AI chatbot

The chatbot answers questions about services, prices and booking. Suggested questions make it easy to get started. It is clearly labelled as an AI assistant and points out that binding information is provided via the contact form.

This is how the chatbot is implemented technically:

• Requests run through a dedicated script on the server. The access key for the AI model never reaches the browser.
• The basic instructions for the AI are stored on the server.
• Additional checks and limits, for example on message length and the number of requests per time period, reduce the risk of unwanted use. Incorrect answers remain possible.

The admin area

So that staublos can keep content up to date itself, the website includes its own admin area. Among other things, it can be used to manage:

• home page texts in German and English
• page titles and descriptions for Google
• font and colours as well as individual features
• new pages, images, client logos and testimonials
• legal notice and privacy policy
• backups of the content

Access is protected in several ways: passwords are stored as a hash, forms are secured against forged requests, and logins are temporarily blocked after several failed attempts. For security reasons, I don’t show a screenshot of the admin area here.

Further components

• Bilingual: all important content is available in German and English.
• Blog: guides on costs, scope and organisation of office cleaning.
• Contact form: enquiries are sent via a server script.
• Cookie settings: visitors decide for themselves about optional services.

Technical implementation

The website was developed without a website builder. Design and features are based on HTML, CSS and JavaScript. For features that need to run on the server – contact form, chatbot and admin area – PHP is used. The editable content is stored in structured files that the admin area edits. Images are delivered in the space-saving WebP format.

What other businesses can take away

• Interactive features make sense when they answer a specific question – such as “What does it cost?”.
• Different concerns need different ways to get in touch.
• An admin area creates independence when content is adjusted regularly.
• Security belongs in the planning from the start, not only after launch.

Questions about this article?I’ll answer you personally – free and non-binding.

Ask a question