How to Add Asyntai AI Chatbot to TYPO3

Platform:

TYPO3

HTML/Custom WordPress Shopify WooCommerce Wix Squarespace Webflow Joomla Drupal Magento Blogger Bitrix TYPO3 PrestaShop OpenCart Ghost Umbraco Moodle

Step 1: Get Your Embed Code

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

Step 2: Using TypoScript footerData (Recommended)

The easiest way to add the chatbot to all pages is using TypoScript footerData:

1. Log in to your TYPO3 Backend
2. Go to Web → Template
3. Select your root page in the page tree
4. Click on "Edit the whole template record" (or select "Info/Modify" and then "Setup")
5. In the Setup field, add the following TypoScript code:
   page.footerData.99 = TEXT
page.footerData.99.value = <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
6. Replace YOUR_WIDGET_ID with your actual widget ID from the dashboard
7. Click "Save"
8. Clear the TYPO3 cache: Admin Tools → Maintenance → Flush TYPO3 and PHP Cache

Alternative: Using Site Package (For Site Packages)

If you're using a site package, you can add the script via your TypoScript configuration file:

1. Navigate to your site package folder: packages/your_sitepackage/Configuration/TypoScript/
2. Open or create setup.typoscript
3. Add the following code:
   page.footerData {
  99 = TEXT
  99.value = <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
}
4. Replace YOUR_WIDGET_ID with your actual widget ID
5. Clear the cache in TYPO3 backend

Alternative: Using Fluid Template (FooterAssets)

For sites using Fluid templates, you can use the FooterAssets section:

1. Navigate to your Fluid template file (usually in Resources/Private/Templates/)
2. Add a FooterAssets section in your layout or template:
   <f:section name="FooterAssets">
  <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</f:section>
3. Make sure your page layout renders the FooterAssets section:
   <f:render section="FooterAssets" optional="true" />
4. Clear the TYPO3 cache

Alternative: Using AssetCollector (For Developers)

For extension developers, TYPO3 v10.3+ offers the AssetCollector API:

1. In your PHP code (e.g., a controller or middleware), inject the AssetCollector
2. Add the script with custom attributes:
   use TYPO3\CMS\Core\Page\AssetCollector;

$this->assetCollector->addJavaScript(
  'asyntai_chatbot',
  'https://asyntai.com/static/js/chat-widget.js',
  ['async' => 'async', 'data-asyntai-id' => 'YOUR_WIDGET_ID']
);

Step 3: Verify Installation

After saving your changes and clearing the cache, visit your website in a new browser tab or incognito window. You should see the chat widget button in the bottom right corner. Click it to make sure it opens and works correctly.