How to Add Asyntai AI Chatbot to Hugo

Step-by-step guide for Hugo static site generator

Platform:

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 to Theme Partial (Recommended)

The best way to add the chatbot to all pages of your Hugo site is by creating a partial:

Navigate to your Hugo project's layouts/partials/ directory
Create a new file called asyntai-widget.html
Paste your Asyntai embed code into this file:

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

Open your theme's baseof.html file (usually in layouts/_default/baseof.html)
Add the partial before the closing </body> tag:

    {{ partial "asyntai-widget.html" . }}
  </body>
</html>

Save the file and rebuild your Hugo site

Tip: Using partials is the Hugo-recommended way to include reusable components. This method ensures the chatbot appears on every page that uses the baseof.html template, which is typically all pages on your site.

Alternative Method 1: Add to Head Partial

If your theme has a head partial, you can add the code there:

Locate your theme's head partial (usually layouts/partials/head.html)
If it doesn't exist, create layouts/partials/head.html in your project root
Add your Asyntai embed code to this file:

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

Make sure your baseof.html includes this partial in the <head> section:

<head>
  {{ partial "head.html" . }}
</head>

Note: If your theme already has a head.html partial with existing content, simply append your Asyntai code to it. Don't replace the existing content.

Alternative Method 2: Static Folder with Custom JavaScript

For a more modular approach using Hugo's static folder:

Navigate to your Hugo project's static/js/ directory
Create the directory if it doesn't exist
Create a new file called asyntai-loader.js
Add the following code to load the widget:

// static/js/asyntai-loader.js
(function() {
  var script = document.createElement('script');
  script.src = 'https://asyntai.com/static/js/chat-widget.js';
  script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
  script.async = true;
  document.head.appendChild(script);
})();

Reference this file in your baseof.html or footer partial before </body>:

<script src="{{ "js/asyntai-loader.js" | relURL }}"></script>
</body>

Tip: Files in the static/ directory are copied as-is to the root of your published site. The relURL function generates the correct relative path for your deployment.

Alternative Method 3: Hugo Configuration (config.toml/yaml)

For some Hugo themes that support custom scripts via configuration:

# config.toml
[params]
  customJS = ["https://asyntai.com/static/js/chat-widget.js"]

# Or in config.yaml
params:
  customJS:
    - https://asyntai.com/static/js/chat-widget.js

Note: This method only works if your theme supports the customJS parameter. Check your theme's documentation. You may also need to add the data-asyntai-id attribute through theme customization.

Alternative Method 4: Front Matter (Page-Specific)

To add the chatbot to specific pages only:

Add a custom parameter to your page's front matter:

---
title: "My Page"
asyntaiWidget: true
---

In your baseof.html or partial, add conditional logic:

{{ if .Params.asyntaiWidget }}
  <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
{{ end }}

Tip: This approach gives you granular control over which pages include the chatbot. It's useful for documentation sites where you only want the widget on certain sections.

Alternative Method 5: Override Theme Layouts

To override your theme's layout without modifying theme files:

Copy the theme's baseof.html from themes/your-theme/layouts/_default/
Paste it into your project's layouts/_default/baseof.html
Add your Asyntai embed code before the closing </body> tag
Save and rebuild your site

Important: When you override theme files, you won't automatically receive updates to those files when the theme is updated. This method gives you full control but requires more maintenance. Consider using partials instead for easier theme updates.

Step 3: Build and Deploy

After adding the code, build your Hugo site:

# Build the site
hugo

# Or build with specific environment
hugo --environment production

# For development preview
hugo server

The generated site will be in the public/ directory
Deploy this directory to your hosting platform (Netlify, Vercel, GitHub Pages, etc.)

Tip: During development, use hugo server to preview your site locally at http://localhost:1313. The chatbot should appear in the bottom right corner on all pages.

Step 4: Verify Installation

After deploying your Hugo site, open it in a new browser tab. 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? Make sure you've rebuilt your site with the hugo command after making changes. Check that you replaced YOUR_WIDGET_ID with your actual widget ID from the dashboard. Clear your browser cache or view in incognito mode. If using a CDN, you may need to invalidate the cache. Open the browser console (F12) to check for any JavaScript errors.

Documentation