AI gedreven zoekfunctionaliteit dankzij Vragen.ai
Onlangs hebben we een zoekfunctionaliteit toegevoegd aan de website van de DLF. Hier hebben we de oplossing van Vragen.ai voor gebruikt. Met Vragen.ai kan je een website indexeren waarna je de inhoud kan bevragen in natuurlijke taal zoals je dat ook doet met bijvoorbeeld Chat GPT. Het mooie van dit alles is dat Vragen.ai al het werk voor je uit handen neemt. Zij indexeren je pagina's én voorzien de code om het te integreren op je website. In dit artikel neem ik je mee hoe we dat bij de website van de DLF hebben gedaan.
Account aanmaken
Als eerste heb je een account nodig bij Vragen.ai, je kan het 30 dagen gratis uitproberen. Bij het aanmelden geef je de url van je website op en vervolgens worden alle pagina's geïndexeerd. De duur van het indexeren is afhankelijk van de grootte van je website. Terwijl het indexeren bezig is, kan je de integratie op je website alvast voorbereiden.
Vragen.ai integreren op je website
Het integreren van de zoekfunctionaliteit op je website is eenvoudig. Vragen.ai biedt namelijk de mogelijkheid om dit te doen aan de hand van een oEmbed url. De inhoud bevat alle informatie die je nodig hebt:
{
"version": "1.0",
"type": "rich",
"width": "100%",
"height": "auto",
"html": "[html blob]",
"author_name": "Dutch Laravel Foundation",
"author_url": "https://dlf.vragen.ai?1",
"provider_name": "Vragen.ai",
"provider_url": "https://www.vragen.ai/"
}
De html is hetgeen wat je nodig gaat hebben. Voor de vorm heb ik die er even uit gelaten maar is hier https://dlf.vragen.ai/display/standaard/oembed te bekijken.
De website van de DLF gebruikt Laravel als achterkant dus de html kunnen we eenvoudig verkrijgen via een simpele GET request.
use Illuminate\Support\Facades\Http;
$response = Http::get('https://dlf.vragen.ai/display/standaard/oembed');
$html = json_decode($response->body())->html;
Er zijn ook integratievoorbeelden te vinden voor andere platformen op https://www.vragen.ai/docs/integreren-in-je-website.
Vervolgens printen we de html op de gewenste plek op de website. Alle nodige scripts en styling zijn voorzien in de html code. Hoewel de zoekfunctionaliteit er standaard al goed uit ziet, is het ook naar wens aan te passen met behulp van CSS.
<style>
.vragenai-question-form,
.vragenai-question-form:focus {
border-radius: 6px !important;
outline-color: #FF2D20 !important;
}
.vragenai-questions__item-list {
padding: 0 !important;
}
</style>
<div class="px-4">
{!! $html !!}
</div>
De bovenstaande css past de kleur van de focus border aan en wat padding. De integratie is nu compleet. Als de indexering inmiddels is geslaagd, zou je al antwoorden op je vragen moeten krijgen.
Inzicht in gebruik
Naast de functionaliteit om de inhoud van je website te kunnen bevragen geeft Vragen.ai ook waardevolle inzichten. Zo zijn alle gestelde vragen in te zien in hun portaal. Daarnaast zie je ook de antwoorden die zijn gegenereerd en welke bronnen daarbij zijn gebruikt.
De feedback van de gebruiker, duim omhoog/omlaag is ook inzichtelijk. Op deze manier krijg je een goed beeld waar gebruikers naar op zoek zijn en of het antwoord aansluit op hun vraag.
Je kan ook doorklikken op een conversatie om te zien op basis van welke bronnen de antwoorden zijn opgebouwd.
Conclusie
Dankzij Vragen.ai is het erg eenvoudig om een moderne zoekfunctionaliteit aan je website of applicatie toe te voegen. Met name het inzicht in de gestelde vragen, gegenereerde antwoorden en feedback van de gebruiker vinden wij een interessante toevoeging, omdat dit inzicht geeft in de informatiebehoefte van onze bezoekers en wat we daarbij nog aan content zouden kunnen produceren om daarop aan te sluiten. Met de proefperiode van 30 dagen heb je in ieder geval genoeg tijd om het uit te proberen!