TYPO3 AI Chatbot Extension (Free, TYPO3 10 to 14)

TYPO3 Extension

The WebChatAgent extension puts your chatbot on a TYPO3 website. You install it, paste your Chatbot ID into the site configuration, and the chat button appears on every page of that site. There is no TypoScript to include and no template to change. Design, texts, AI behavior and live chat stay in your WebChatAgent dashboard, so changes there show up on the website right away.

One release covers TYPO3 10.4, 11.5, 12.4, 13.4 and 14.

Step 1: Install the extension

With Composer (most TYPO3 projects):

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

Without Composer: open Admin Tools → Extensions, search for webchatagent and install it. TYPO3 creates the database fields itself.

The extension is free. You find it in the TYPO3 Extension Repository and on Packagist.

Step 2: Copy your Chatbot ID

  1. Log in to your WebChatAgent dashboard and open your chatbot.
  2. Open Chatbot actions and click Copy chatbot ID.

The ID looks like 3f2b9c1e-8a7d-4e5f-9b0c-1d2e3f4a5b6c.

Step 3: Add the ID to your site

  1. In TYPO3, go to Site Management → Sites and edit your site.
  2. Open the Chat tab.
  3. Paste the Chatbot ID into Chatbot ID and save.

Open your website in a new tab: the chat button sits in the corner of every page. With several sites in one TYPO3 installation, each site gets its own ID, so every website can run its own chatbot.

Hide the chat on certain pages

Open the page properties, tab Chat, and switch on Hide the chat button on this page and all subpages. Useful for checkout pages, landing pages for ads or an intranet area.

The switch applies to the page and everything below it. Set it on the root page and the chat button disappears on the whole site, a quick way to pause the chat without deleting the ID.

Show the chat inside a page

For a contact or help page you can place the chat directly in the content instead of (or in addition to) the floating button:

  1. In the Page module, add a new content element.
  2. Pick Inline chat from Special elements.
  3. Leave Chatbot ID empty to use the ID of the site, or enter another one for this page.
  4. Optional: set a Height such as 600px or 80vh. Without it the chat grows with its content.

The inline chat script only loads on pages that contain such an element. Welcome text, theme and the other inline options come from Channels → Inline chat in the dashboard, see the Inline Chat guide.

Editors without admin rights need the new fields and the content type "Inline chat" enabled in their backend user group.

Pass logged-in website users to the chat

If your TYPO3 site has a login area, switch on Pass logged-in website users to the chat in the site's Chat tab. For logged-in visitors the chat then receives name, email address and username. The bot can greet them by name and doesn't ask for contact details again.

TYPO3 adds this data on every request, it never lands in the page cache. Visitors who are not logged in get no user data. Mention the transfer in your privacy policy.

Pass your own data (for developers)

To hand over more, for example a customer number, register a listener for the event WebChatAgent\WebChatAgent\Event\ModifyContextDataEvent and add your keys with setContextData(). The README on GitHub has a complete example. Format and limits are described in Embedding the chat widget.

Content Security Policy

With frontend CSP enabled (TYPO3 12 and newer), the extension adds the chat server to the policy for scripts, connections, images and media, and allows inline styles for the widget. You don't have to edit csp.yaml.

WebChatAgent does not show its own consent banner. Without a consent signal it runs in anonymous Privacy Mode. If your TYPO3 site uses a consent manager, connect it as described in Cookie Consent and Anonymous Proactive Triggers.

Troubleshooting

  • No chat button? Check that the ID in the Chat tab is complete and that the page and its parent pages don't have Hide the chat button switched on. Then clear the TYPO3 caches. If you use a static file cache such as EXT:staticfilecache, clear that too.
  • Still nothing? Your chatbot may be limited to certain domains. Add your website's domain under Allowed Domains in the dashboard.
  • Blocked by Content Security Policy? Check the browser console. If you host the chat under your own address (white-label), enter it as Server address in the Chat tab, so the extension allows exactly that address.