Met Interactieve UI toont je AI-agent de contactpersoon een formulier, knoppen, een carrousel of media in de chat, in plaats van alleen een vraag in gewone tekst te stellen. Na het volgen van deze handleiding heb je een actie die je AI-agent op de juiste momenten gebruikt: de contactpersoon kiest bijvoorbeeld een datum in een kalender of tikt op een antwoord, waarna de AI-agent direct verdergaat met die keuze.
Je hebt een AI-agent nodig en een rol die de Connect AI-instellingen mag bewerken: stel op de pagina "Rollen" op het tabblad "Connect AI" de rij "Beheer" in op "Bewerken". Zonder deze toestemming zie je de knoppen "Toevoegen" niet. Je kunt eventueel een API- of MCP-actie toevoegen die gegevens levert, zoals beschikbare tijdsloten, of de antwoorden opslaat.
Goed om vooraf te weten: een formulier verschijnt alleen interactief in de Website Messenger. Op andere tekstkanalen krijgt de contactpersoon in plaats daarvan een vraag in gewone tekst. Tijdens telefoongesprekken biedt de AI-agent de actie helemaal niet aan; zie "Op welke kanalen wordt elk element weergegeven?".
Elk interactief element is een eigen actie van het type "Interactief element tonen". Je vindt deze acties in het menu Connect AI onder Acties > "Interactieve UI". Interactieve UI is alleen beschikbaar voor AI-agents, niet voor de Copilot.
Welke elementen zijn er?
Een actie toont precies één van deze elementen:
- Formulier: stel een kop en de velden in, bijvoorbeeld een datumbereik, een keuze en een tekstveld. De contactpersoon vult het formulier in en verstuurt alle antwoorden in één keer.
- Knoppen: de AI-agent schrijft een bericht met snelle antwoorden en links waarop de contactpersoon kan tikken. In de Website Messenger en eventueel op WhatsApp staat er een afbeelding of video boven.
- Carrousel: de AI-agent toont opties als kaarten waar je doorheen kunt swipen, met een afbeelding, beschrijving en knoppen.
- Media: de AI-agent deelt een afbeelding, video of document met een bijschrift.
De AI-agent schrijft de inhoud zelf in elk gesprek, in de taal van de contactpersoon: bij een formulier de opties, tijdsloten en datumgrenzen; bij de andere elementen alle tekst, inclusief kaarten en knoppen. Geef in het veld "Hoe deze actie uitvoeren" aan waar de AI-agent zich aan moet houden.
Een nieuwe actie begint altijd als formulier. Met "+ Element handmatig toevoegen" voeg je zowel formuliervelden als knoppen, een carrousel of media toe; de groep "Interactieve elementen" in dat menu bevat alleen die laatste drie.
Op welke kanalen wordt elk element weergegeven?
Op de volgende kanalen worden de elementen interactief weergegeven. Dat betekent dat de contactpersoon het element zelf ziet en kan gebruiken. Als een element niet interactief wordt weergegeven, krijgt de contactpersoon in plaats daarvan een vraag in gewone tekst.
- Formulier: alleen interactief in de Website Messenger; op WhatsApp, Facebook en alle andere tekstkanalen verschijnt een vraag in tekst.
- Knoppen: interactief in de Website Messenger, op WhatsApp en op Facebook; op de overige tekstkanalen verschijnt een vraag in tekst.
- Website Messenger: alle antwoorden en links staan direct in het bericht, eventueel met een afbeelding of video erboven.
- WhatsApp: maximaal drie antwoorden als knoppen; vier tot tien antwoorden als lijst die de contactpersoon met een knop opent. Een afbeelding of video staat boven het bericht. De eerste twee links worden als afzonderlijke berichten verzonden; eventuele overige links samen in één tekstbericht.
- Facebook: maximaal drie antwoorden als knoppen; bij meer dan drie antwoorden worden snelle antwoorden gebruikt: aantikbare suggesties bij het bericht. Er is geen afbeelding of video en alle links worden samen in één tekstbericht verzonden.
- Carrousel en Media: interactief in de Website Messenger en op WhatsApp; op Facebook en de overige tekstkanalen verschijnt een vraag in tekst. Op WhatsApp moet elke kaart een afbeelding of video en hetzelfde aantal snelle antwoorden bevatten, met een maximum van twee. Ontbreekt er iets, dan krijgt de AI-agent de instructie om de kaarten te herstellen. Zie "Hoe toon ik knoppen, een carrousel of media?" voor de mogelijke bronnen van afbeeldingen, video’s en bestanden.
De overige tekstkanalen zijn Instagram, Telegram, sms, e-mail, Threema en aangepaste kanalen. Tijdens telefoongesprekken biedt de AI-agent geen enkele actie voor Interactieve UI aan.
De AI-agent formuleert de tekstvraag zo dat deze om hetzelfde vraagt als het element. Bij een formulier met een datumbereik en een kamerkeuze stuurt de agent bijvoorbeeld één bericht met de vraag welke dagen en welke kamer de contactpersoon wil boeken. Afbeeldingen, video’s en knoppen worden weggelaten; alleen bij media wordt de bestandslink aan de tekst toegevoegd.
De contactpersoon antwoordt met een gewoon bericht. De AI-agent beoordeelt het antwoord en stuurt het element niet opnieuw.
Als WhatsApp of Facebook een element niet kan weergeven, krijgt de contactpersoon, net als op de andere kanalen, de tekstvraag. Dit gebeurt bijvoorbeeld als WhatsApp het bericht afwijst of een mediabestand niet kan laden, of als knoppen op Facebook alleen links en geen antwoorden bevatten.
Op de instellingenpagina van elke actie staat boven het formulier of element een melding met informatie over hoe het wordt weergegeven. De melding vermeldt elk kanaaltype, ook kanalen die je niet hebt ingesteld:
- "Interactief op:" vermeldt de kanalen waarop de contactpersoon het element zelf ziet. In de melding wordt de Website Messenger aangeduid als "Website".
- "Weergegeven als tekstvraag op:" vermeldt de kanalen waarop de contactpersoon de vraag in gewone tekst krijgt.
- "Niet aangeboden op:" vermeldt de kanalen waarop de AI-agent de actie helemaal niet aanbiedt, namelijk "Telefoon".
Controleer "Interactief op:" voordat je de actie opslaat, want daarna kun je het element niet meer wijzigen. Als het element interactief op WhatsApp moet verschijnen, kies dan knoppen, een carrousel of media.
Wat moet ik weten voordat ik opsla?
Het element van een actie ligt vast zodra je de actie opslaat. Een formulier kan daarna niet meer in een carrousel worden veranderd en knoppen niet in media. Maak een nieuwe actie voor een ander element.
Knoppen, een carrousel en media kunnen nog niet met formuliervelden worden gecombineerd. Zolang een formulier velden bevat, is de groep "Interactieve elementen" in het menu grijs en staat er een melding onder. Verwijder de velden voordat je opslaat; maak na het opslaan een nieuwe actie aan.
Al het overige blijft bewerkbaar: de naam, "Wanneer deze actie activeren" en "Hoe deze actie uitvoeren" en, bij een formulier, de kop en de velden. Ook na het opslaan kun je velden toevoegen, hernoemen, verplaatsen en verwijderen.
Hoe maak ik een actie voor Interactieve UI aan?
Open in het menu Connect AI Acties > "Interactieve UI" en klik op "Toevoegen". De instellingenpagina van de nieuwe actie "Interactief element tonen" wordt direct geopend.
Je kunt de actie ook vanuit een AI-agent aanmaken: klik op het tabblad "Acties" van de AI-agent op "Toevoegen", kies de categorie "Interactieve UI" in het venster "Nieuwe actie maken" en selecteer vervolgens de kaart "Interactief element tonen". Dezelfde instellingenpagina wordt geopend; de actie wordt hierdoor niet ingeschakeld voor die AI-agent.
Geef de actie onder "Actienaam" een duidelijke naam van maximaal 64 tekens, zodat de AI-agent begrijpt waarvoor de actie dient. De naam moet beginnen met een letter van a tot z, hoofdletter of kleine letter, en eindigen met een letter of cijfer. Daartussen zijn ook cijfers, spaties, koppeltekens en underscores toegestaan, maar geen umlauts, accenten of andere tekens. Anders verschijnt de melding "Alleen letters, cijfers, spaties, koppeltekens en underscores zijn toegestaan."
Beschrijf onder "Wanneer deze actie activeren" wanneer de AI-agent het element moet tonen in plaats van een vraag in gewone tekst te stellen, bijvoorbeeld wanneer de contactpersoon een datum, tijdslot of een van meerdere opties moet kiezen.
Als de AI-agent met echte gegevens moet werken, moet de API- of MCP-actie daarvoor al bestaan; op de pagina’s API-acties en MCP lees je hoe je die aanmaakt. Beschrijf vervolgens onder "Hoe deze actie uitvoeren" waar de gegevens vandaan komen en waar de antwoorden naartoe gaan. Je kunt bijvoorbeeld één actie gebruiken om beschikbare opties of tijdsloten op te halen en een andere om de antwoorden van de contactpersoon op te slaan. Je kunt onder "Hoe deze actie uitvoeren" ook vaste waarden en regels instellen. De tips rechts op de instellingenpagina bevatten voorbeelden voor beide velden.
Als je geen gegevensbron opgeeft, kiest de AI-agent zelf redelijke grenzen, zoals een kalender voor de komende dagen. De agent kent dan niet je werkelijke beschikbaarheid.
Houd er rekening mee dat de AI-agent tekst uit "Wanneer deze actie activeren" en "Hoe deze actie uitvoeren" in antwoorden aan contactpersonen kan opnemen. Een regel dat alleen datums uit je API-actie mogen worden aangeboden is prima; inloggegevens, interne telefoonnummers en gegevens van individuele klanten horen hier niet thuis.
Hoe maak ik een formulier?
Beschrijf onderaan de instellingenpagina, bij "Beschrijf wat je nodig hebt en laat AI het voor je maken", welke gegevens je wilt verzamelen en klik op "Genereren". Deze invoer heeft in de interface geen eigen naam; in deze handleiding noemen we dit de AI-formulierbouwer. Deze helpt alleen bij het instellen van de actie, niet tijdens het gesprek.
De AI-formulierbouwer voegt passende velden toe en markeert deze als "Door AI gegenereerd". Als de kop nog leeg is, stelt de bouwer ook een kop voor. Bestaande velden blijven staan en velden waarvan de titels al in het formulier voorkomen, worden niet toegevoegd.
Als de melding "Op basis van deze beschrijving kon geen formulier worden gemaakt. Benoem welke gegevens je wilt verzamelen." verschijnt, beschrijf dan specifieker welke gegevens je nodig hebt.
De melding boven de velden laat zien op welke kanalen het formulier interactief wordt weergegeven, zoals beschreven onder "Op welke kanalen wordt elk element weergegeven?".
Klik op "+ Element handmatig toevoegen" en kies een veldtype om zelf velden toe te voegen. Naast elk type staat een korte toelichting.
- Datum en tijd: "Kalender" voor één datum, "Datumbereik" voor een begin- en einddatum, "Tijdsloten" om één tijdstip uit meerdere opties te kiezen
- Keuzes: "Enkele keuze" als de contactpersoon één optie kiest, "Meerdere keuzes" als die meerdere opties mag kiezen
- Vrije invoer: "Tekst" voor een kort antwoord, "Getal" voor een waarde binnen grenzen, "Lange tekst" voor een beschrijving
Elk veld toont een voorbeeld met voorbeeldwaarden. Tijdens het gesprek vult de AI-agent de echte opties, tijdsloten, datumgrenzen en waardelimieten in, zoals je onder "Hoe deze actie uitvoeren" hebt beschreven.
Klik op de titel van een veld om deze te wijzigen. Een nieuw veld krijgt eerst de naam van het type. Geef elk veld een eigen titel: de contactpersoon ziet deze boven het veld en het antwoord verschijnt in het Message Center onder die titel.
Wijzig de volgorde van de velden door ze te slepen. Verwijder een veld met het prullenbakpictogram.
Vul onder "Kop" in wat de contactpersoon boven het hele formulier moet zien. De kop verschijnt één keer boven het formulier; de titel van een veld staat direct boven dat veld.
De kop en veldtitels verschijnen precies zoals je ze invoert en worden niet vertaald voor contactpersonen die een andere taal gebruiken. Schrijf ze in de taal van je contactpersonen.
De kop is verplicht en alle velden zijn verplicht: je kunt een veld niet optioneel maken en de contactpersoon kan het formulier pas versturen nadat alle velden zijn ingevuld.
Als er bij het opslaan iets ontbreekt, geeft de instellingenpagina de reden aan:
- De melding "Voeg ten minste één veld toe om deze actie op te slaan." verschijnt als het formulier nog geen velden bevat.
- De melding "Voeg een kop toe om deze actie op te slaan." verschijnt als de kop leeg is.
- De melding "Geef dit veld een titel om deze actie op te slaan." verschijnt bij een veld zonder titel.
- De melding "Een ander veld gebruikt deze titel al. Geef elk veld een eigen titel." verschijnt als twee velden dezelfde titel hebben, ook als alleen hoofdletters en kleine letters verschillen.
Hoe toon ik knoppen, een carrousel of media?
Klik op "+ Element handmatig toevoegen" en kies in de groep "Interactieve elementen" voor "Knoppen" (Tik om te antwoorden), "Carrousel" (Kaarten om doorheen te swipen) of "Media" (Afbeelding, video of bestand).
Dit werkt alleen zolang het formulier geen velden bevat. Zodra het velden bevat, wordt de groep grijs weergegeven met de melding "Interactieve elementen kunnen nog niet met formuliervelden worden gecombineerd. Maak hiervoor een aparte actie aan." Verwijder de velden met het prullenbakpictogram voordat je opslaat; daarna kun je de groep weer selecteren. Maak na het opslaan in plaats daarvan een nieuwe actie aan.
De instellingenpagina toont vervolgens het gekozen element in plaats van het formulier, met een voorbeeld van de inhoud en de kanaalmelding erboven. Zolang de actie nog niet is opgeslagen, kun je het element met het prullenbakpictogram verwijderen en in plaats daarvan een formulier maken.
Beschrijf onder "Hoe deze actie uitvoeren" wat de AI-agent moet tonen, bijvoorbeeld welke producten de carrousel bevat of welke antwoorden de knoppen aanbieden. Een carrousel bevat 2 tot 10 kaarten; knoppen bieden maximaal 10 antwoorden of links.
De AI-agent voegt afbeeldingen, video’s en bestanden alleen toe via links die beginnen met https, en uitsluitend vanuit de volgende bronnen:
- Knoppen (afbeelding of video boven het bericht): links in je instructies, in het resultaat van een andere actie (zoals een API-actie) of in het gesprek
- Carrousel (afbeelding of video op elke kaart): dezelfde bronnen als voor knoppen
- Media (het bestand): links in je instructies of in het gesprek; voer voor deze optie de bestandslink in onder "Hoe deze actie uitvoeren"
Met "in het gesprek" wordt een link bedoeld die iemand in de chat heeft verstuurd.
Hoe schakel ik de actie in voor mijn AI-agent en test ik deze?
Klik op "Opslaan" zodra het formulier of element klaar is. Een nieuwe actie wordt niet automatisch ingeschakeld voor een AI-agent, ook niet voor de agent op wiens tabblad "Acties" je deze hebt aangemaakt.
Als je de actie hebt aangemaakt onder Acties > "Interactieve UI", keer je terug naar het overzicht. In de kolom "Configuraties" zie je welke AI-agents de actie gebruiken; met configuraties worden hier AI-agents bedoeld. Klik op "Geen configuratie" en selecteer in het venster "Gekoppelde configuraties" de AI-agents die de actie moeten gebruiken. In de kolom verschijnt dan bijvoorbeeld "1 AI-agent".
Als je de actie vanuit een AI-agent hebt aangemaakt, keer je terug naar het tabblad "Acties" van die agent. Schakel de actie daar in via de kolom "Status".
Om te testen heb je een widget voor de Website Messenger nodig. De knop "Agent testen" verschijnt alleen als de AI-agent een chatbot heeft. Zodra de actie voor deze AI-agent is ingeschakeld, klik je rechts van de tabbladen op "Agent testen", kies je onder "Widget" een widget en klik je op "Testgesprek openen".
Schrijf in het testgesprek een bericht dat past bij de tekst onder "Wanneer deze actie activeren". Verschijnt het element niet, controleer dan of de actie voor de AI-agent is ingeschakeld en of de tekst onder "Wanneer deze actie activeren" bij je bericht past.
De test wordt uitgevoerd in de Website Messenger. Je kunt deze niet gebruiken om te testen hoe het element op WhatsApp wordt weergegeven of als tekstvraag verschijnt.
Wat ziet de contactpersoon in de Website Messenger?
In de Website Messenger verschijnt het element direct in het gesprek. De contactpersoon vult een formulier in en verstuurt het met "Bevestigen".
Als een antwoord ontbreekt, markeert het formulier het veld rood. De contactpersoon kan het formulier pas versturen als alles is ingevuld.
Na verzending toont het formulier de antwoorden van de contactpersoon en kan het niet meer worden gewijzigd.
Als de contactpersoon eerder in het gesprek al een antwoord heeft gegeven, kan de AI-agent dit alvast in het formulier invullen.
Bij knoppen en de carrousel antwoordt de contactpersoon door op een antwoord te tikken.
Als het gesprek is beëindigd, ziet de contactpersoon het element nog wel, maar kan die het niet meer gebruiken.
Wat ziet de operator in het Message Center?
In het Message Center verschijnt het element als een bericht van de AI-agent met de vraag in gewone tekst en daaronder het label "Interactief element". Zodra de contactpersoon via het element heeft geantwoord, wordt "Beantwoord" toegevoegd.
Het antwoord van de contactpersoon volgt als een apart bericht. Bij een formulier staat er één regel per veld, met de titel en het antwoord.
Hoe zit het met "Carrousel tonen" en "Media en knoppen tonen"?
De oudere actietypen "Carrousel tonen" en "Media en knoppen tonen" onder Acties > "Systeem" hebben het label "LEGACY". Ze blijven werken, je kunt nog steeds nieuwe acties van dit type maken en er wordt niets automatisch omgezet.
Gebruik voor nieuwe acties hier het element "Carrousel" in plaats van "Carrousel tonen". Gebruik in plaats van "Media en knoppen tonen" het element "Knoppen" of, voor een afbeelding, video of bestand, het element "Media" ("Afbeelding, video of bestand"). De toelichting bij het label LEGACY noemt alleen "Knoppen" en "Carrousel"; gebruik voor een afbeelding, video of bestand "Media".
Knoppen kunnen een afbeelding of video boven het bericht tonen, maar geen bestand. Met Interactieve UI toont de AI-agent per antwoord slechts één element. Een bestand en knoppen verschijnen dus nooit samen in één bericht; hiervoor heb je twee acties nodig: één met "Media" en één met "Knoppen". De verouderde actie "Media en knoppen tonen" kan daarentegen wel een bestand samen met knoppen in één bericht versturen en is hiervoor nog geschikt.
Schakel niet zowel een verouderde actie als een nieuwe actie voor hetzelfde doel in.
Meer informatie over het label LEGACY vind je op de pagina Systeemacties, onder "Wat betekent het label LEGACY?".