Back to Dashboard

Documentation

Learn how to use Asyntai

Getting Started
Installation Knowledge Base Test Your AI Customization
Features
Knowledge Gaps Product Cards User Context Live Monitoring Human Takeover Escalation AI Notifications Daily Report Real-Time Data Feed Team Members Include Images Image Vision Localization Enable Thinking
Analytics
Chat Analytics

How to Add Asyntai AI Chatbot to Any Website

Universal guide for HTML, custom sites, and static generators

Get Embed Code
Platform:
HTML HTML/Custom WordPress WordPress Shopify Shopify WooCommerce WooCommerce Wix Wix Squarespace Squarespace Webflow Webflow Joomla Joomla Drupal Drupal Magento Magento Blogger Blogger Bitrix Bitrix TYPO3 TYPO3 PrestaShop PrestaShop OpenCart OpenCart Ghost Ghost Umbraco Umbraco Moodle 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:

<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 to Your HTML File

The simplest way to add the chatbot is to paste the embed code directly into your HTML file:

  1. Open your HTML file in a text editor
  2. Find the closing </body> tag
  3. Paste your Asyntai embed code just before the </body> tag
  4. Save the file
<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <!-- Your website content -->

  <!-- Asyntai Chatbot - Add before closing body tag -->
  <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</body>
</html>

Tip: Adding the script before the closing </body> tag ensures it loads after your page content, which is optimal for performance and won't slow down your page.

For Multi-Page Websites

If your website has multiple HTML pages, you have several options:

Option A: Add to Each Page

Add the embed code to each HTML file where you want the chatbot to appear.

Option B: Use a Common Footer Include

If you're using server-side includes (SSI), PHP includes, or similar:

  1. Create a footer.html (or footer.php) file
  2. Add the Asyntai embed code to this file
  3. Include this footer file in all your pages:
    <!-- For PHP -->
    <?php include 'footer.php'; ?>

    <!-- For SSI -->
    <!--#include virtual="/footer.html" -->

Option C: JavaScript Dynamic Loading

Create a single JavaScript file that loads the chatbot on all pages:

  1. Create a file called asyntai-loader.js:
    (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);
    })();
  2. Replace YOUR_WIDGET_ID with your actual widget ID
  3. Include this script in all your pages:
    <script src="/js/asyntai-loader.js"></script>

For Static Site Generators

If you're using a static site generator, add the embed code to your base layout or template:

Jekyll

Add to _includes/footer.html or _layouts/default.html

Hugo

Add to layouts/partials/footer.html or layouts/_default/baseof.html

Gatsby

Add to gatsby-browser.js or use gatsby-ssr.js

Next.js

Add to pages/_document.js or use the next/script component

Nuxt.js

Add to nuxt.config.js under head.script

Eleventy (11ty)

Add to your base layout in _includes/

Astro

Add to src/layouts/Layout.astro before </body>

VuePress

Add to .vuepress/config.js under head

For React / Vue / Angular Apps

For single-page applications (SPAs), you can add the script to your index.html or load it dynamically:

React (index.html method)

<!-- In public/index.html, before </body> -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

React (useEffect method)

// In your App.js or a component
useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://asyntai.com/static/js/chat-widget.js';
  script.async = true;
  script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
  document.body.appendChild(script);
  return () => document.body.removeChild(script);
}, []);

Vue (in main.js or App.vue)

// In mounted() or onMounted()
const script = document.createElement('script');
script.src = 'https://asyntai.com/static/js/chat-widget.js';
script.async = true;
script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
document.body.appendChild(script);

Angular (in index.html)

<!-- In src/index.html, before </body> -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Step 3: Verify Installation

After adding the code, open 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.

Not seeing the widget? Check that the script is properly placed before the </body> tag. Make sure there are no JavaScript errors in your browser's console (press F12 to open developer tools). Try clearing your browser cache or viewing in an incognito window.

Important: The chatbot requires your website to be served over HTTP or HTTPS (not opened directly as a file). If you're testing locally, use a local development server.