---
name: techonomy-client-leadgen
description: Use this skill when Techonomy must create or update custom lead magnets for external clients — e.g., calculators, diagnostics, planners, configurators, scanners, matchers, benchmarks, or any interactive lead-gen format. Triggers on phrases like "client leadgen", "klant lead magnet", "campagne tool", "lead gen voor [brand]", "maak een tool voor", "calculator voor klant", "diagnostic tool", "scan maken", "configurator bouwen", or when building a lead-gen asset where the client's brand (not Techonomy's) is the hero. All output defaults to Dutch by default.
version: 3.0.0
category: marketing
last_updated: 2026-03-18
---

# Techonomy Client Lead Gen — Externe Skill

## Het fundamentele principe

Een lead gen is pas goed als de uitvoer **onafhankelijk waardevol** is.

Test dit zo: als je de lead-capture gate weghaalt, wil de invuller de output dan nog steeds? Als het antwoord nee is, is het geen lead gen — het is een quiz met een formulier ervoor.

**De echte dynamiek:** Invuller ervaart waarde tijdens het doorlopen → ziet dat de output specifiek voor hem is → geeft e-mail omdat hij die output wil hebben → bedrijf krijgt een gekwalificeerde lead met rijke data.

Goedkope quiz: "Beantwoord 5 vragen → jij bent Type B → bekijk ons product."
Echte lead gen: "Vertel ons jouw situatie → wij berekenen jouw specifieke ROI/score/plan → jij krijgt een rapport dat je morgen kunt gebruiken → wij weten precies waar jij in de buyer journey zit."

**De kernregel:** De klant is de enige zichtbare afzender. Geen Techonomy-branding tenzij de briefing co-branding vraagt.

---

## Stap 1 — Intake: het juiste concept kiezen

Stel deze vragen vóórdat je een concept kiest. Sla antwoorden op als context.

**Bedrijf & doelgroep:**
- Wat verkoopt de klant en aan wie?
- Wat is het grootste beslismoment of zorgpunt van de prospect?
- Wat weet de prospect niet over zichzelf dat hij zou willen weten?
- Wat wil het bedrijf over de prospect weten om hem beter te kunnen helpen?

**Commercieel doel:**
- Wat moet de invuller doen na het zien van het resultaat? (lidmaatschap, offerte, afspraak, download, aankoop)
- Welke data heeft het bedrijf nodig om de beste follow-up te sturen?

**Kwaliteitstest:**
Zou de invuller de output doorsturen naar een vriend, collega, of opslaan voor later gebruik? Als het antwoord waarschijnlijk nee is, is het concept niet goed genoeg.

---

## Stap 2 — Concept: kies het juiste format

Elk format heeft een specifieke reden van bestaan. Kies op basis van wát de invuller wil weten en wát het bedrijf nodig heeft — niet op basis van wat "makkelijk" is.

### Calculator / ROI-tool
**Wanneer:** De prospect heeft een concrete vraag met een numeriek antwoord (kosten, besparingen, rendement, capaciteit).
**Output:** Een specifiek getal of vergelijking, berekend op basis van de invullers eigen situatie.
**Voorbeeld:** "Hoeveel bespaar ik als ik overstap?" / "Wat kost mij een camper over 5 jaar?"
**Kwaliteitscheck:** Is de berekening realistisch? Klopt de formule? Zou een expert dit resultaat serieus nemen?

### Diagnostic / Scan
**Wanneer:** De prospect heeft een situatie die beoordeeld moet worden — maar hij ziet zichzelf niet van buiten.
**Output:** Een score met specifieke sterke en zwakke punten, niet alleen een getal maar een analyse.
**Voorbeeld:** "Hoe volwassen is jouw digitale marketing?" / "Is jouw camper klaar voor de winter?"
**Kwaliteitscheck:** Zijn de specifieke bevindingen per onderdeel echt bruikbaar? Kan iemand ermee aan de slag?

### Planner / Routegenerator
**Wanneer:** De prospect wil iets bereiken maar weet niet waar te beginnen of welke volgorde.
**Output:** Een concreet stappenplan, route, of tijdlijn die echt gevolgd kan worden.
**Voorbeeld:** "Wat is jouw ideale eerste camperstop?" / "Welk leerpad past bij jouw doelen?"
**Kwaliteitscheck:** Kan de invuller dit plan morgen gebruiken, zonder extra uitleg?

### Configurator / Builder
**Wanneer:** Er zijn meerdere combinaties van opties en de prospect wil de beste combinatie voor zijn situatie.
**Output:** Een specifieke aanbeveling of samenstelling die past bij de gegeven input.
**Voorbeeld:** "Welk abonnement past bij jou?" / "Welke dekking heb jij nodig?"
**Kwaliteitscheck:** Is de aanbeveling echt anders per invuller? Of krijgt iedereen hetzelfde?

### Benchmark / Vergelijkingstool
**Wanneer:** De prospect wil weten hoe hij het doet ten opzichte van anderen in zijn situatie.
**Output:** Een vergelijking: zijn score vs. gemiddelde, top 25%, of vergelijkbare profielen.
**Voorbeeld:** "Hoe rij jij vergeleken met andere camperaars?" / "Scoort jouw team boven of onder branchegemiddelde?"
**Kwaliteitscheck:** Is de benchmarkdata realistisch? Is het vergelijkingspunt zinvol voor de invuller?

### Matcher / Finder
**Wanneer:** De prospect heeft een behoefte maar weet niet welk product/dienst/type het beste past.
**Output:** Een match uit een catalogus, met uitleg waarom dit de beste keuze is voor deze persoon.
**Voorbeeld:** "Welke campingverzekering past het beste bij jouw situatie?" / "Welk type lidmaatschap?"
**Kwaliteitscheck:** Klopt de matching-logica? Worden alle opties eerlijk afgewogen?

### Simulator
**Wanneer:** De prospect wil een scenario doorrekenen voordat hij een beslissing neemt.
**Output:** Een beeld van "hoe ziet het eruit als jij X doet" — met realistische getallen.
**Voorbeeld:** "Wat is jouw road trip als je €300 budget hebt?" / "Wat kost je bedrijf als je niets verandert?"
**Kwaliteitscheck:** Is de simulatie realistisch genoeg om het besluitproces te beïnvloeden?

---

## Stap 3 — Kwaliteit van de output

De output is het hart van de lead gen. Hier mag nooit op bezuinigd worden.

**Eisen aan een goede output:**

1. **Specifiek, niet generiek.** "Jij scoort 67/100 op brandstofefficiëntie — dat is beter dan 60% van Nederlandse camperaars, maar je verliest gemiddeld €340/jaar door rijstijl" is goed. "Je rijdt redelijk zuinig" is slecht.

2. **Bruikbaar, niet alleen informatief.** De invuller moet iets kunnen *doen* met het resultaat. Geef concrete volgende stappen, niet alleen een label of score.

3. **Eerlijk, niet altijd positief.** Als iemand slecht scoort, zeg dat dan. Gevleid worden is minder waardevol dan eerlijke feedback. Vertrouwen bouw je op met eerlijkheid.

4. **Exporteerbaar/bewaarbaar.** Bied altijd aan om het resultaat op te slaan (via e-mail, PDF-screenshot prompt, of kopieerbare tekst). Dit verhoogt de gepercipieerde waarde enorm.

5. **Gepersonaliseerd in taal.** Gebruik de naam van de invuller in het resultaatscherm. Verwijs terug naar specifieke antwoorden: "Omdat je aangaf dat je voornamelijk in bergachtig gebied rijdt..."

---

## Stap 4 — Bouwen

### Technische vereisten

**Screen-switching (KRITIEK — CSS specificity bug)**

Elke multi-screen lead gen gebruikt een `show()` functie. Het **verkeerde patroon** veroorzaakt een bekende bug: als een screen-ID (`#hero`) een eigen `display:flex` of `display:grid` CSS-regel heeft, wint die (specificity 1,0,0) altijd van `.screen{display:none}` (specificity 0,1,0).

```javascript
function show(id) {
  document.querySelectorAll('.screen').forEach(s => {
    s.classList.remove('active');
    s.style.display = 'none';
  });
  const el = document.getElementById(id);
  el.classList.add('active');
  el.style.display = '';
  setTimeout(function() {
    document.documentElement.scrollTop = 0;
    document.body.scrollTop = 0;
    window.scrollTo(0, 0);
  }, 10);
}
```

**Mobile responsive — Verplichte checklist**
- [ ] `<meta name="viewport" content="width=device-width,initial-scale=1.0">` aanwezig
- [ ] `font-size: clamp(min, vw, max)` voor alle koppen
- [ ] Knoppen: min. 44px touch target, `width:100%` op mobiel
- [ ] Input-velden: `font-size: 16px` (voorkomt iOS auto-zoom)
- [ ] Touch events naast mouse events voor alle interacties
- [ ] Geen horizontale scroll (`overflow-x:hidden` op body)

**Data layer — verplicht in elke lead gen:**
```javascript
const LeadData = {
  sessionId: crypto.randomUUID(),
  startTime: Date.now(),
  client: '[CLIENT_SLUG]',
  toolType: '[calculator|diagnostic|planner|configurator|benchmark|matcher|simulator]',
  answers: [],
  events: [],

  record(questionId, value, label) {
    this.answers.push({ id: questionId, value, label, t: Date.now() - this.startTime });
  },

  track(event, data = {}) {
    this.events.push({ event, t: Date.now() - this.startTime, ...data });
  },

  payload(contact) {
    return {
      sessionId: this.sessionId,
      client: this.client,
      toolType: this.toolType,
      contact,
      answers: this.answers,
      events: this.events,
      completionTime_ms: Date.now() - this.startTime,
      result: this.result || null
    };
  }
};
```

**Lead capture gate:**
- Altijd NA de interactie, VOOR het resultaat
- Email verplicht, naam sterk aanbevolen
- GDPR opt-in checkbox (unchecked by default)
- Shake-animatie op ongeldige invoer
- Vertel expliciet WAT ze ontvangen: "Je ontvangt jouw persoonlijke rapport direct"

**QA-modus:**
Elke build bevat `?qa=true` URL param die raw payload toont onderaan de pagina voor testing.

---

## Stap 5 — Data & integraties

**Payload schema:**
```json
{
  "id": "uuid",
  "createdAt": "ISO8601",
  "source": "utm_source",
  "client": "string",
  "toolType": "string",
  "contact": {
    "firstName": "string",
    "email": "string",
    "phone": "string (optional)",
    "consent": true
  },
  "answers": [
    { "id": "string", "label": "string", "value": "string|number", "tags": ["string"] }
  ],
  "result": {
    "type": "string",
    "score": "number (optional)",
    "specificFindings": ["string"],
    "recommendations": ["string"]
  },
  "events": [
    { "event": "string", "t": "number (ms since start)" }
  ],
  "completionTime_ms": "number"
}
```

Definieer altijd: Zapier action, Convex mutation naam, of CRM custom velden.

---

## Stap 6 — Follow-up copy

Lever altijd een schets van de bedankemail:
- Onderwerpregel die de persoonlijke uitkomst benoemt ("Jouw camperscore: 78/100")
- Recap van de belangrijkste bevinding
- Één specifieke volgende stap
- Geen bulk-content — dit is een persoonlijk bericht

---

## QA-checklist (volledig)

**Waardekwaliteit**
- [ ] Is de output specifiek voor deze invuller (niet generiek voor alle invullers)?
- [ ] Zijn er concrete volgende stappen in het resultaat?
- [ ] Is het resultaat eerlijk (ook als iemand slecht scoort)?
- [ ] Zou de invuller het resultaat doorsturen of bewaren?

**Functionaliteit**
- [ ] Screen-switching werkt correct (hero verbergt zichzelf)
- [ ] Elke CTA scrollt direct naar het volgende scherm
- [ ] Na formulier → direct naar resultaat
- [ ] Restart flow reset state volledig
- [ ] QA-modus (`?qa=true`) toont payload

**Mobile**
- [ ] Geen horizontale scroll op 375px
- [ ] Touch targets ≥ 44px
- [ ] Input-velden triggeren geen iOS-zoom

**Lead & data**
- [ ] Consent checkbox aanwezig en verplicht
- [ ] Payload bevat alle verplichte velden
- [ ] Webhook/Zapier commentaar aanwezig voor go-live

---

## Referenties

- [`references/wandelmaatje-notes.md`](references/wandelmaatje-notes.md) — CNV × 50+ Mobiel swiper quiz
- [`references/camper-dream-builder.md`](references/camper-dream-builder.md) — NKC bucketlist builder
- [`references/wandelbond-kwbn-notes.md`](references/wandelbond-kwbn-notes.md) — Wandel.nl / KWbN, 15 lead gens (2026-03)

Documenteer nieuwe client-voorbeelden onder `references/[client]-notes.md` en link ze hier.