Viertalige maatwerksite met kostencalculator, keuzehulp en eigen CMS
De uitdaging
Dutch Fiber Trading uit Obdam levert vezelversterking voor beton en asfalt: kunststof macrovezels, staalvezels, basaltvezels, PP-microvezels en asfaltvezels. De afnemers zijn aannemers, betoncentrales en voorschrijvende partijen — in Nederland en daarbuiten.
De opdracht was een volledig nieuwe website te bouwen die deze markt zelfstandig kan bedienen, inclusief bestellen, offerte aanvragen en het beheer van alle content door de klant zelf.
Dat stelde vier eisen die een standaard sjabloonsite uitsluiten:
- Vier talen, tot in de URL. De site moest in het Nederlands, Engels, Duits en Frans werken, en niet met een taalschakelaar bovenop één Nederlandse structuur. Elke taal heeft een eigen, vertaalde URL-boom — /kenniscentrum wordt /en/knowledge-centre, /de/wissenszentrum en /fr/centre-de-connaissances. In totaal gaat het om 424 adressen in de sitemap.
- Een technische productkeuze, geen impulsaankoop. Welke vezel geschikt is, hangt af van de toepassing (beton of asfalt), de dosering, de normen en de bijbehorende certificaten en datasheets. Een bezoeker die kiest tussen macrovezel, staalvezel en basaltvezel heeft eerst inhoudelijke sturing nodig — en wil daarna vaak een offerte in plaats van een afrekenscherm.
- Duurzaamheid moet uit te rekenen zijn. In de Nederlandse infra wordt gestuurd op CO₂-uitstoot en MKI (milieukostenindicator). Een productpagina die daar niets over zegt, is in een aanbesteding onbruikbaar; de rekensom hoort op de site zelf te staan.
- Beheer zonder ontwikkelaar. Per taal gaat het om circa 63 kennisartikelen, 11 productpagina's en 13 projectpagina's. Zonder een eigen beheeromgeving met vertaaltooling wordt elke tekstwijziging een ontwikkelaarsticket — en dan veroudert een viertalige site binnen een half jaar.
Daarnaast wilde Dutch Fiber Trading een eigen kanaal naar de markt: een mailinglijst die per abonnee de taal onthoudt, zodat een nieuwsbrief in de juiste taal aankomt.
De aanpak en oplossing
CleverTech AI bouwde de site als maatwerk-Next.js-applicatie met React en Tailwind CSS. De content staat in SQLite (via node:sqlite), geseed uit TypeScript-fixtures; de deploy loopt via Docker en GHCR naar Plesk, met een persistent volume voor database en uploads.
De domein- en zoekmachinekant van dit traject — de migratie naar dutchfibertrading.com en de keywordstructuur — staat in een aparte case; hier gaat het over de bouw.
1. Een meertalige website laten maken die in vier talen echt vier sites is
De viertaligheid is met next-intl doorgevoerd tot in de routestructuur: elke taal heeft eigen, vertaalde paden voor de productcatalogus, het projectenoverzicht en het kenniscentrum.
Dat kenniscentrum is geen losse blogbak maar een geordend geheel van topic-clusters met certificaten, datasheets en normen erbij — het inhoudelijke bewijsmateriaal waar een voorschrijvende partij op zoekt. Voor AI-crawlers staat er een llms.txt.
2. Kostencalculator met CO₂- en MKI-berekening
De kostencalculator op de website rekent een toepassing door en geeft naast de kosten ook de CO₂- en MKI-uitkomst. Er zijn presets per referentieproject, zodat een bezoeker niet vanaf nul hoeft te beginnen maar kan starten bij een vergelijkbaar project uit het projectenoverzicht.
3. Keuzehulp: een productconfigurator laten maken die op productdata draait
Naast de calculator staat een keuzehulp-wizard, in alle vier de talen, die de bezoeker via zijn toepassing naar het passende vezeltype leidt.
Belangrijk detail: de wizard draait op dezelfde productdata als de catalogus en is via de beheeromgeving aan te passen — geen los stuk hardgecodeerde logica dat na de eerste assortimentswijziging uit de pas gaat lopen.
Ontwerpdoel van de calculator en de keuzehulp: een bezoeker die het verschil tussen macro-, staal- en basaltvezel niet kent, zelfstandig bij een onderbouwde aanvraag laten uitkomen. Dat is het gestelde doel van het ontwerp — de site is net live, er zijn nog geen gemeten conversie- of bezoekcijfers.
4. Semi-webshop: bestellen en offerte aanvragen in één flow
De site heeft een winkelwagen met zowel een bestel- als een offerteflow, bewust zonder online betaling. Een webshop met offerte-aanvraag past bij deze markt: hoeveelheden, levertijden en projectcondities worden in het gesprek vastgelegd, niet in een betaalscherm.
De dealerspagina wijst afnemers door naar de bestaande handelskanalen.
5. Custom CMS: alles beheersbaar, inclusief de rekentools
Achter een afgeschermde /admin zit een eigen beheeromgeving. Daarin beheert Dutch Fiber Trading producten, projecten, artikelen, datasheets, de calculator, de keuzehulp, de sitegegevens en de losse sectieteksten.
Er zijn zichtbaarheidsschuifjes per site-onderdeel, drag-and-drop voor de volgorde, uploads die client-side naar WebP worden verkleind, en taaltabbladen met vertaaltooling zodat een artikel in vier talen naast elkaar te onderhouden is.
Daarom ging een custom CMS hier boven een standaardpakket: de rekentools en de keuzehulp zijn onderdeel van het beheer, niet iets wat ernaast leeft.
6. Nieuwsbrief-module op maat, van inschrijving tot afmelding
De mailinglijst is het onderdeel dat het verst is doorgebouwd. Inschrijven gaat via de footer; de API slaat het idempotent op met de taal van de abonnee erbij en stuurt direct een welkomstmail in die taal, mét de actieve editie en een persoonlijke afmeldlink.
In de beheeromgeving maakt de klant doelgroepen aan, deelt abonnees in en verstuurt per doelgroep. Er is een HTML-nieuwsbriefeditor met PDF-upload, genummerde edities, CSV-import en een afmeldlijst die bewaard blijft — zodat een afgemeld adres bij een volgende import niet terugkomt.
Verzending loopt via SendGrid op een met SPF en DKIM geverifieerd domein.
7. Snelheid, toegankelijkheid en meetbaarheid
Op de opgeleverde site is een performance-overhaul uitgevoerd: ISR, kleinere payloads, minder client-side JavaScript en edge-caching. Verder zijn security-headers gezet en is de toegankelijkheid opgetrokken tot een Lighthouse-score van 100.
Elk formulier dat een aanvraag oplevert — contact, offerte, bestelling en nieuwsbrief — is als conversie-event in GA4 gezet, achter cookieconsent, zodat vanaf dag één meetbaar is welke ingang werkt.
De bouw liep achter een wachtwoordgate op een preview-domein; sinds 21 juli staat daar een host-bewuste variant op, die de live site publiek maakt en de preview dicht houdt. Er waren gedocumenteerde klantfeedbackrondes op acht dagen in juli — een iteratiecyclus van gemiddeld twee tot drie dagen.
Wat nog loopt: een deel van de productbeelden en tekstspecificaties wacht op aanlevering en bevestiging door de klant. Een dealerportaal en een volledige webshop met iDEAL zijn als vervolgstap ontworpen, maar in dit traject niet gebouwd.
Wat het opleverde
Viertalige site (NL/EN/DE/FR) met volledig vertaalde URL-structuur, goed voor 424 adressen in de sitemap
- ~2 weken
- Van eerste commit tot live site, met 103 commits in drie weken
- CO₂/MKI
- Kostencalculator die naast de kosten ook de CO₂-uitstoot en MKI berekent, met presets per referentieproject
- 8
- Custom CMS waarin acht onderdelen zelf te beheren zijn: producten, projecten, artikelen, datasheets, calculator, keuzehulp, sitegegevens en sectieteksten
- 63
- Per taal circa 63 kennisartikelen, 11 productpagina’s en 13 projectpagina’s, met taaltabbladen en vertaaltooling in het beheer
- SendGrid
- Werkende nieuwsbrief-module: taalbewuste inschrijving, welkomstmail met afmeldlink, doelgroepen, HTML-editor en CSV-import
- 2flows
- Winkelwagen met bestel- én offerteflow, bewust zonder online betaling
- 100
- Toegankelijkheid opgetrokken tot een Lighthouse-score van 100, met performance-overhaul (ISR, edge-caching) en security-headers
Vergelijkbare cases
Dutch Fiber Trading (Obdam)Domeinmigratie en keyword-engineering voor Dutch Fiber Trading
800keywords met een eigen difficulty-score
Klaar voor zulke resultaten?
Gratis AI-scan: binnen 48 uur een rapport met de AI-kansen met de hoogste ROI voor jouw bedrijf — concreet, geen verkooppraatje.