Maak een interactieve webtool en krijg meer engagement op je site

Gewoon artikels schrijven en kennis delen? Dat volstaat niet meer om een horde bezoekers en lezers aan te trekken. Een mogelijk alternatief? Een eigen webtool die bezoekers langer kan bezighouden op je site.

Een interactieve webtool op Webeffectief.com?

Een behoorlijk deel van de bezoekers van deze site zijn bezig met de opbouw van een blog of andere (WordPress)-website. Zij zijn niet zelden begonnen op een gratis platform en zitten met vragen omtrent het kostenplaatje van een site op een eigen domeinnaam.

Met de Webeffectief Kostencalculator Website – te vinden onderaan dit bericht of op de homepage – kan iedereen die dat wil snel een goed idee krijgen van wat een webstek zoal kan kosten.

Advertentie

Stappenplan webtool ontwikkelen

Een webtool bouwen, dat klinkt als iets ingewikkelds. Wel, ik kan je zeggen dat dat reuze meevalt. Dankzij de inzet van AI-tools hoef je vandaag alvast geen kei te zijn in HTML, CSS en Javascript. Het volstaat om een paar prompts in te voeren in je favoriete AI-assistent. Die gaat er vervolgens mee aan de slag. De AI schrijft voor jou netjes de benodigde code uit. Kopieer het codefragment en plak het in je (WordPress)-website via een Aangepast HTML-blok.

1. Bepaal welke webtool nuttig zou kunnen zijn voor het publiek van je site

Natuurlijk kan je niet eender welke webtool maken en deze op je site slingeren. De tool moet aansluiten bij je niche en je (doel)publiek. Zo bijvoorbeeld:¹

• zou een fietsverkoper een tool kunnen ontwikkelen om mensen te laten ontdekken welke hun ideale fiets is
• kan een reisblogger aan de hand van een interactieve quiz bezoekers suggesties doen voor hun volgende vakantiebestemming
• kan een tekstschrijver een tool maken om (aan de hand van bepaalde parameters en criteria) een kostprijsindicatie te geven
• zou iemand met een blog rond Disney een quiz kunnen maken, zodat bezoekers kunnen ontdekken met welk Disney-personage ze het meest verwant zijn
• …

Doorgaans zijn rekentools nogal populair. Vooral keuzehulpen in combinatie met concrete prijsinformatie. Maar – zoals het laatste voorbeeld aantoont – mag er best wel een fun-factor aan zitten.

Advertentie

2. Noteer nauwkeurig alle categorieën, opties, criteria,… die in je webtool zullen voorkomen

Zo’n interactieve webtool kan natuurlijk niet werken zonder de nodige gegevens, data, creteria, opties, keuzemogelijkheden en prijzen.

Tip: noteer alles in een apart overzichtelijk document. Dat helpt bij het geven van de juiste opdrachten.

3. Probeer al een eerste prompt te schrijven voor je AI-assistent

Als je ongeveer weet wat voor tool je wil gaan bouwen, is het zaak een prompt te schrijven waar je AI-tool wat mee kan. Begin met in gewoon Nederlands te vertellen wat de bedoeling is, wat je wil maken.

Dit was mijn beginprompt voor de rekentool >klik<

Met de rekentool moet de bezoeker snel de totale jaarlijkse kostprijs van een website kunnen inschatten. De tool brengt daarvoor de volgende kostenposten in rekening: Domeinnaam, Webhosting, WordPress-onderhoud en WordPress-hulp. Voor elk van de kostenposten kan de bezoeker een keuze maken tussen een aantal opties met elk een vaste prijs. De totaalprijs is dan de som van elke gekozen kostenpost. Kan jij deze tool ontwikkelen?

En omdat Gemini (Notebook) intussen zo slim is kan het inderdaad meteen (een code voor) een rekenmodel voor een kostprijsberekening van een WordPress-site opdiepen. Maar meer dan een probeersel, een startpunt is dat niet. Ik heb nog aardig wat moeten schaven om tot het eindresultaat te komen dat je onder dit bericht kan vinden.

4. Chat met je AI-tool om je webtool te tweaken

Vanaf nu is het dus zaak te pingpongen met je AI-tool om via opdrachten in gewone spreektaal je tool naar wens in te richten. Geef opdrachten als:

• voeg een extra kostenpost toe onder het label —-
• verwijder de optie — (en vervang deze door —-)
• maak de titel groter en geef ‘m een andere kleur, maar zorg dat het past bij de rest van de opmaak
• wijzig de prijs van item —-
• bereken 21% btw bij de totaalprijs
• voeg bij de optie —– ook een optie toe met de waarde 0 en het label Extensie en voeg bij optie —– een optie toe met de waarde 0 en het label —–. Laat deze telkens de eerste keuzemogelijkheid zijn.
• …

Tip: werk je met Gemini Notebook en heb je een heel uitgebreide webtool, dan kan het slim zijn om alle gegevens eerst in een spreadsheetje te gieten en deze als bron aan je notebook toe te voegen. Geef dan de opdracht om de tool te ontwikkelen op basis van die data.

Meestal duurt het een tijdje eer je webtool overeenkomt met datgene wat jij in gedachten had.

Probeer niet één lange prompt te schrijven, maar geef korte opdrachten en laat je AI-tool stap voor stap werken. Jij behoudt zo veel makkelijker het overzicht.

5. Maak in WordPress een nieuw patroon met het aangepast HTML-blok

Gemini Notebook kan moeiteloos code generen. Het kan echter niet laten zien wat het allemaal geeft als je webtool live is.

Tip: werk in WordPress met een Aangepast HTML-blok. Plak de volledige code vanuit je AI-tool rechtstreeks in het Aangepast HTML-blok. Je ziet meteen wat je gemaakt hebt en de werking controleren. En vervolgens kan je het codefagment verder bewerken.

6. Tevreden? Bewaar je codefragment in WordPress

Wanneer je tevreden bent over zowel de inhoud als de functionaliteiten als de opmaak en indeling van je interactieve webtool, kan je ermee aan de slag in je WordPress-omgeving.

Kopieer het volledige codefragment dat je AI-tool genereerde. Plak dit in een Aangepast HTML-blok in WordPress². Dat blok kan je dan op verschillen plekken op je site toepassen.

Tip: bewaar dit blok als een gesynchroniseerd patroon. Geef het patroon ook een passende naam. Zo vind je het makkelijk terug én ben je er zeker van dat – als je wijzigingen aanbrengt – deze overal worden doorgevoerd.

Advertentie

7. Promoot je nieuwe webtool

Nu kan je het zaakje gaan promoten. Volgers en toevallige passanten moeten je webtool leren kennen:

• Toon je tool op verschillende strategische plekken op je site
• spreek erover op je About-page
• wijd er een aparte blogpost aan
• verwijs naar je tool op social media-(profielen)
• plaats links naar je tool in relevante pagina’s en blogposts
• maak verschillende pins ter promotie op Pinterst
• voeg een linkje toe aan je link in bio
• maak melding van je webtool in je nieuwsbrieven
• vermeld je webtool in je auteursbio
• …

Een interactieve webtool op je website: de voordelen

Waarom een al die moeite voor een webtool?

1. Geïnteresseerde bezoekers blijven langer op je site

Zelfs als je bezoekers over de vloer krijgt is het een ferme uitdaging om mensen langer dan pakweg 10 seconden vast te houden.

Voeg een nuttige interactieve webtool toe aan je website en lezers spenderen er meer tijd. Ze moeten immers:

• nadenken over de keuzemogelijkheden die je tool aanreikt
• de gewenste keuzes maken (de tool aanklikken/invullen)
• kennis nemen van het resultaat
• de tool opnieuw raadplegen met andere keuzemogelijkheden
• …

Onderaan de streep heb je meer geëngageerde bezoekers. Het moet al gek lopen wil je dat niet merken in je statistieken (meer gebeurtenissen, meer sessies, meer pageviews, gebruikers de gemiddeld meer tijd op je site doorbrengen).

2. Je bezoeker wordt sneller geholpen

Even terug naar mijn rekentool voor WordPress-websites. Die geeft snel een antwoord op de vraag: “Wat kost zo’n WordPress-site eigenlijk?”

Natuurlijk kan ik die vraag ook beantwoorden in een blogpost van meer dan 1.000 woorden, te beginnen met: “Dat hangt ervan af…”. Niet iedereen wil de tijd nemen of er het fijne van weten. Veel mensen willen gewoon een bedrag dat ze kunnen inschrijven in hun begroting.

Advertentie

3. Je toont kennis en expertise

Als je een webtool bouwt en ter beschikking stelt maak je een en ander concreet voor je bezoeker. Je geeft aan dat je open kaart wil spelen. Vooral bij prijsinformatie is dat nog zeldzaam.

Daarnaast toon je simpelweg dat je ergens verstand van hebt. Als het goed is komen de gegevens waaruit je tool is opgebouwd immers niet uit de lucht vallen…

En voor zelfstandigen en zzp’ers onder ons: maak een degelijke webtool. De kans is groot dat die veel vaker gebruikt zal worden dan dat mensen een anoniem formuliertje invullen om een offerteaanvraag te doen.

4. Voordelen op het vlak van online vindbaarheid

Met de klap wordt je website een stuk interessanter voor zoekmachines. Tel daarbij op dat je de kans vergroot om genoemd te worden als bron in allerlei AI-tools. Ook zij merken de toegenomen activiteit op je site op, met alle gevolgen van dien.

1. Niet alle suggesties zijn even makkelijk uitvoerbaar. Het gaat mij om het voorbeeld. ↩︎
2. Wanneer je dit blok binnen je eigenlijke pagina of blogbericht plakt, zal, het waarschijnlijk de opmaak en indeling van je pagina of blogbericht overnemen (en niet de opmaak die je instelde bij het maken van je webtool). Gebruik het blok als een apart template onderdeel als je dit wil vermijden. ↩︎