How to Add Asyntai AI Chatbot to Moodle

Platform:

Moodle

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 Additional HTML (Recommended)

Moodle has a built-in feature to add custom HTML/JavaScript to all pages:

1. Log in to your Moodle site as an administrator
2. Go to Site administration
3. Navigate to Appearance → Additional HTML
4. Scroll down to the "Before BODY is closed" section
5. Paste your Asyntai embed code in the text area
6. Click "Save changes"

Alternative: Using Theme Settings

Many Moodle themes (including Boost and its variants) have their own settings for adding custom JavaScript:

1. Go to Site administration → Appearance → Themes
2. Click on Theme settings for your active theme (e.g., Boost)
3. Look for "Raw SCSS", "Additional HTML", or "Custom JavaScript" section
4. If there's a JavaScript field, paste your Asyntai embed code there
5. Click "Save changes"
6. Purge the caches: Site administration → Development → Purge caches

Alternative: Creating a Local Plugin

For more control, you can create a simple local plugin:

1. Create the folder structure: local/asyntaichatbot/ in your Moodle installation
2. Create version.php:
   <?php
defined('MOODLE_INTERNAL') || die();
$plugin->component = 'local_asyntaichatbot';
$plugin->version = 2024010100;
$plugin->requires = 2022041900;
3. Create lib.php:
   <?php
defined('MOODLE_INTERNAL') || die();

function local_asyntaichatbot_before_footer() {
  global $PAGE;
  $PAGE->requires->js_call_amd('local_asyntaichatbot/loader', 'init');
}
4. Create folder amd/src/ and file loader.js:
   define([], function() {
  return {
    init: function() {
      var script = document.createElement('script');
      script.async = true;
      script.src = 'https://asyntai.com/static/js/chat-widget.js';
      script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
      document.body.appendChild(script);
    }
  };
});
5. Replace YOUR_WIDGET_ID with your actual widget ID
6. Go to Site administration → Notifications to install the plugin
7. Purge caches after installation

Alternative: Edit Theme Footer Template

You can also edit your theme's footer template directly:

1. Navigate to your theme folder: theme/YOUR_THEME/
2. Find the layout files (e.g., layout/columns2.php or templates/columns2.mustache)
3. Find the closing </body> tag or the footer section
4. Add your Asyntai embed code just before </body>
5. Save the file
6. Purge Moodle caches

Step 3: Verify Installation

After saving your changes and purging the caches, visit your Moodle site 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.