Back to Dashboard

Documentation

Learn how to use Asyntai

Getting Started
Installation Knowledge Base Test Your AI Manage Websites Customization AI Instructions Tips
Features
Website Crawl Knowledge Gaps Product Cards User Context Live Monitoring Human Takeover Escalation AI Notifications Daily Report Real-Time Data Feed Team Members Single Sign-On Include Images Image Vision Translation Widget Localization Leads Support Tickets Bookings Exclude Pages Smarter Model Enable Thinking Reply Suggestions Follow-up Messages Transcript Download
Analytics
Chat Analytics Chat Logs
Integrations
REST API Instagram Messenger WhatsApp Zapier Email Mobile Apps
Other
Add to Home Screen

How to Add Asyntai AI Chatbot to HubSpot

Step-by-step guide for HubSpot CMS 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 Craft CMS Craft CMS Contentful Contentful Strapi Strapi Joomla Joomla Drupal Drupal Magento Magento Blogger Blogger Bitrix Bitrix TYPO3 TYPO3 PrestaShop PrestaShop OpenCart OpenCart Ghost Ghost Statamic Statamic 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: Using Site Settings (Recommended)

The easiest way to add the chatbot to all pages on your HubSpot website:

  1. Log in to your HubSpot account
  2. Click the settings icon (gear) in the main navigation bar
  3. In the left sidebar, navigate to Website > Pages
  4. Scroll down to the "Site footer HTML" section
  5. Paste your Asyntai embed code in the text area
  6. Click "Save" at the bottom of the page

Tip: Adding the script to the Site footer HTML ensures it loads on all pages after the main content, which is the recommended placement for chat widgets.

Alternative: Page-Specific Installation

If you only want the chatbot on specific pages:

  1. Go to Marketing > Website > Website Pages (or Landing Pages)
  2. Click on the page you want to edit
  3. In the page editor, click Settings at the top
  4. Scroll down to "Advanced options"
  5. Find the "Footer HTML" section
  6. Paste your Asyntai embed code
  7. Click "Apply changes" and publish your page

Note: Page-specific code will only load on that particular page. Use this method if you want the chatbot on select pages rather than your entire site.

Alternative: Using Design Manager

For more control, you can add a JavaScript file through the Design Manager:

  1. Go to Marketing > Files and Templates > Design Tools
  2. In the left sidebar, click File > New file
  3. Select "JavaScript" from the dropdown
  4. Name your file (e.g., asyntai-chatbot.js)
  5. Add the following code:
    (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);
    })();
  6. Replace YOUR_WIDGET_ID with your actual widget ID
  7. Click "Publish changes"
  8. Include this file in your template using require_js or link it in your site settings

Alternative: Using Custom Modules

Create a reusable module for the chatbot:

  1. Go to Marketing > Files and Templates > Design Tools
  2. Click File > New file > Module
  3. Name it "Asyntai Chatbot"
  4. In the module.html file, paste your embed code
  5. Publish the module
  6. Add the module to your template's footer section, or drag it onto individual pages

Tip: Using a custom module allows you to easily add or remove the chatbot from specific templates or pages through the drag-and-drop editor.

Step 3: Verify Installation

After saving your changes, visit your HubSpot 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? Make sure you clicked "Save" or "Publish" after adding the code. HubSpot caches pages, so try viewing your site in an incognito window or clearing your browser cache. If you added the code to a specific page, make sure that page is published.

HubSpot CMS Hub Required: Adding custom JavaScript requires HubSpot CMS Hub (Starter, Professional, or Enterprise). If you're using the free HubSpot CMS tools, you may have limited options for adding custom scripts.