Back to Dashboard

Documentation

Learn how to use Asyntai

Getting Started
Installation Knowledge Base Test Your AI Manage Websites
Customization
Widget Colors AI Assistant Name Initial Message Widget Position Auto-Trigger Notification Bubble Unread Badge Instruction Mode Ask Questions Use Emoji Collect Emails Collect Phone Numbers Smart Lead Capture Localization Hide Branding Privacy Link Custom Notice Transcript Download New Conversation Conversation History Tagline & Status Dot Speech to Text Chat Icon Company Logo Character Limit Temperature
AI Instructions Tips Compare Plans
Features
Website Crawl Knowledge Gaps Product Cards User Context Live Monitoring Human Takeover Escalation AI Notifications Daily Report Real-Time Data Feed Real-Time Data Feed Max Team Members Single Sign-On Include Images Image Vision Translation Widget Localization Leads Smart Lead Capture Support Tickets Bookings Exclude Pages Smarter Model Enable Thinking Reply Suggestions Follow-up Messages Speech to Text Transcript Download Embedded Chat
Analytics
Chat Analytics Chat Logs
Integrations
REST API Instagram Messenger WhatsApp Zapier Email Mobile Apps
Other
Add to Home Screen Custom Open Button

How to Add Asyntai AI Chatbot to Adobe Experience Manager

Step-by-step guide for AEM websites

Get Embed Code
Platform:
HTML HTML/Custom WordPress WordPress Shopify Shopify WooCommerce WooCommerce BigCommerce BigCommerce Ecwid Ecwid Wix Wix Squarespace Squarespace Webflow Webflow Weebly Weebly HubSpot HubSpot Tilda Tilda Adobe Experience Manager Adobe Experience Manager Duda Duda Google Sites Google Sites Bludit Bludit Plesk Plesk Concrete CMS Concrete CMS Craft CMS Craft CMS Contentful Contentful Docusaurus Docusaurus Strapi Strapi Joomla Joomla Kentico Kentico Drupal Drupal Magento Magento Blogger Blogger Bitrix Bitrix TYPO3 TYPO3 PrestaShop PrestaShop OpenCart OpenCart Ghost Ghost Hugo Hugo Statamic Statamic Umbraco Umbraco Volusion Volusion Moodle Moodle SilverStripe SilverStripe Grav Grav October CMS October CMS ProcessWire ProcessWire Sanity Sanity ExpressionEngine ExpressionEngine Sylius Sylius Backdrop CMS Backdrop CMS MODX MODX Bagisto Bagisto PayloadCMS PayloadCMS e107 e107 CrafterCMS CrafterCMS Kirby Kirby MedusaCMS MedusaCMS DatoCMS DatoCMS GoDaddy GoDaddy Framer Framer Bubble Bubble Carrd Carrd Jimdo Jimdo Strikingly Strikingly Kajabi Kajabi Teachable Teachable Thinkific Thinkific ClickFunnels ClickFunnels Hostinger Hostinger Unbounce Unbounce Leadpages Leadpages Systeme.io Systeme.io Instapage Instapage

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:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Note: The code above is just an example. You must copy your own unique embed code from your Dashboard as it contains your personal widget ID.

Step 2: Add Code Using Page Component (Recommended)

The recommended method is to add the chatbot code to your AEM page component's head section for site-wide installation:

  1. Log in to your AEM Author instance
  2. Navigate to CRXDE Lite (typically at http://your-aem-instance:4502/crx/de)
  3. Locate your page component template (usually under /apps/your-project/components/page)
  4. Find or create the head.html or headerlibs.html file
  5. Add your Asyntai embed code to this file
  6. Click "Save All" in the top menu
  7. Replicate the changes to your publish instance

Tip: Placing the code in the head.html file ensures the chatbot appears on all pages using that template. This is the cleanest approach for site-wide installation.

Alternative Method 1: Client Libraries (ClientLibs)

For a more structured approach, you can use AEM's Client Library system:

  1. Create a new client library folder under /apps/your-project/clientlibs
  2. Set the cq:clientLibraryFolder node type
  3. Create a js.txt file listing your JavaScript files
  4. Add your Asyntai embed code to a JavaScript file in this folder
  5. Include the client library in your page component using:
<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientlib.js @ categories='your-category-name'}" />

Note: This method is recommended for projects with existing ClientLib structure and provides better organization for larger implementations.

Alternative Method 2: Tag Management (Adobe Launch)

If you're using Adobe Launch (formerly DTM) or another tag manager:

  1. Log in to Adobe Experience Platform Launch
  2. Navigate to your property
  3. Go to Rules and create a new rule
  4. Set the event to "Page Bottom" or "DOM Ready"
  5. Add an action: Custom Code
  6. Paste your Asyntai embed code
  7. Save and publish the library

Tip: Using Adobe Launch is the Adobe-recommended approach for adding third-party scripts. It provides better control, testing capabilities, and doesn't require code deployments.

Alternative Method 3: Experience Fragment

For flexible, author-friendly implementation:

  1. Navigate to Experience Fragments in AEM
  2. Create a new Experience Fragment
  3. Add a Text component or HTML component
  4. Switch to HTML source mode
  5. Paste your Asyntai embed code
  6. Include this Experience Fragment in your page template footer

Important: Ensure you have proper AEM permissions to modify templates and components. For AEM as a Cloud Service, changes may need to go through your CI/CD pipeline.

Step 3: Verify Installation

After deploying your changes, clear your browser cache and visit your website. You should see the chat widget button in the bottom right corner. Click it to ensure it opens and functions correctly.

Not seeing the widget? Check your browser console (F12) for JavaScript errors. Verify the code was properly deployed to your publish instance. For AEM as a Cloud Service, ensure your changes went through the deployment pipeline successfully.