WebChatAgent Logo

TYPO3 AI Chatbot-extensie (Gratis, TYPO3 10 tot 14)

TYPO3 Extension

De WebChatAgent-extensie plaatst je chatbot op een TYPO3-website. Je installeert de extensie, plakt je Chatbot-ID in de siteconfiguratie en de chatknop verschijnt op elke pagina van die site. Er hoeft geen TypoScript te worden toegevoegd en er hoeven geen templates te worden aangepast. Design, teksten, AI-gedrag en live chat beheer je in je WebChatAgent-dashboard, waardoor wijzigingen direct zichtbaar zijn op de website.

Eén release ondersteunt TYPO3 10.4, 11.5, 12.4, 13.4 en 14.

Stap 1: Installeer de extensie

Met Composer (de meeste TYPO3-projecten):

composer require webchatagent/typo3-webchatagent
vendor/bin/typo3 extension:setup

Zonder Composer: open Admin Tools → Extensions, zoek naar webchatagent en installeer de extensie. TYPO3 maakt de databasevelden zelf aan.

De extensie is gratis. Je vindt deze in de TYPO3 Extension Repository en op Packagist.

Stap 2: Kopieer je Chatbot-ID

  1. Log in op je WebChatAgent-dashboard en open je chatbot.
  2. Open Chatbotacties en klik op Chatbot-ID kopiëren.

Het ID ziet eruit als 3f2b9c1e-8a7d-4e5f-9b0c-1d2e3f4a5b6c.

Stap 3: Voeg het ID toe aan je site

  1. Ga in TYPO3 naar Site Management → Sites en bewerk je site.
  2. Open het tabblad Chat.
  3. Plak het Chatbot-ID in Chatbot-ID en sla op.

Open je website in een nieuw tabblad: de chatknop staat in de hoek van elke pagina. Bij meerdere sites in één TYPO3-installatie krijgt elke site zijn eigen ID, zodat elke website een eigen chatbot kan gebruiken.

De chat verbergen op specifieke pagina's

Open de pagina-eigenschappen, tabblad Chat, en schakel Hide the chat button on this page and all subpages in. Dit is handig voor checkoutpagina's, landingspagina's voor advertenties of een intranetomgeving.

De instelling geldt voor de pagina en alle onderliggende pagina's. Stel dit in op de hoofdpagina en de chatknop verdwijnt van de hele site, een snelle manier om de chat te pauzeren zonder het ID te verwijderen.

De chat binnen een pagina tonen

Voor een contact- of hulppagina kun je de chat direct in de inhoud plaatsen in plaats van (of naast) de zwevende knop:

  1. Voeg in de Page-module een nieuw content-element toe.
  2. Kies Inlinechat onder Special elements.
  3. Laat Chatbot-ID leeg om het ID van de site te gebruiken, of voer een ander ID in voor deze pagina.
  4. Optioneel: stel een Hoogte in zoals 600px of 80vh. Zonder deze instelling groeit de chat mee met de inhoud.

Het inlinechat-script wordt alleen geladen op pagina's die zo'n element bevatten. Welkomsttekst, thema en de overige inline-opties configureer je via Kanalen → Inlinechat in het dashboard, zie de Inline Chat guide.

Redacteuren zonder beheerdersrechten moeten toegang krijgen tot de nieuwe velden en het content-type "Inlinechat" in hun backend-gebruikersgroep.

Ingelogde websitegebruikers doorgeven aan de chat

Als je TYPO3-site een inloggedeelte heeft, schakel dan Pass logged-in website users to the chat in op het tabblad Chat van de site. Bij ingelogde bezoekers ontvangt de chat vervolgens de naam, het e-mailadres en de gebruikersnaam. De bot kan hen bij naam begroeten en vraagt niet opnieuw om contactgegevens.

TYPO3 voegt deze gegevens toe bij elk verzoek, ze komen nooit in de paginacache terecht. Bezoekers die niet zijn ingelogd, krijgen geen gebruikersgegevens mee. Vermeld deze overdracht in je privacybeleid.

Eigen gegevens doorgeven (voor ontwikkelaars)

Om extra gegevens door te geven, zoals een klantnummer, registreer je een listener voor het event WebChatAgent\WebChatAgent\Event\ModifyContextDataEvent en voeg je je sleutels toe met setContextData(). De README op GitHub bevat een compleet voorbeeld. Het format en de limieten worden beschreven in Embedding the chat widget.

Content Security Policy

Als frontend-CSP is ingeschakeld (TYPO3 12 en nieuwer), voegt de extensie de chatserver toe aan het beleid voor scripts, verbindingen, afbeeldingen en media, en staat inline-stijlen toe voor de widget. Je hoeft csp.yaml niet aan te passen.

Cookietoestemming

WebChatAgent toont geen eigen toestemmingsbanner. Zonder toestemmingssignaal draait de chat in de anonieme Privacy Mode. Als je TYPO3-site een consent manager gebruikt, koppel deze dan zoals beschreven in Cookie Consent and Anonymous Proactive Triggers.

Probleemoplossing

  • Geen chatknop? Controleer of het ID op het tabblad Chat volledig is ingevuld en of de pagina en bovenliggende pagina's niet zijn ingesteld op Hide the chat button. Leeg daarna de TYPO3-caches. Als je een statische bestandscache gebruikt zoals EXT:staticfilecache, leeg deze dan ook.
  • Nog steeds niets zichtbaar? Je chatbot is mogelijk beperkt tot bepaalde domeinen. Voeg het domein van je website toe onder Allowed Domains in het dashboard.
  • Geblokkeerd door Content Security Policy? Controleer de browserconsole. Als je de chat onder een eigen adres host (white-label), voer dit dan in als Server address op het tabblad Chat, zodat de extensie precies dat adres toestaat.