---
title: "Installing the Widget on Your Website"
description: "Before installing the widget, make sure you: Have access to your site's HTML code, Have the AI Assistant enabled in your panel"
url: https://sistrack.com/en/docs/ai-assistant/instalacion-widget/
category: ai-assistant
section: docs
updated: 2026-01-18
---


*Markdown version for agents. This page on the web: https://sistrack.com/en/docs/ai-assistant/instalacion-widget/*


# Installing the Widget on Your Website


## 📋 Prerequisites

Before installing the widget, make sure you:

1. ✅ Have access to your site's HTML code
2. ✅ Have the AI Assistant enabled in your panel
3. ✅ Know your Sistrack domain (e.g., `yourcompany.sistrack.com`)

## 🚀 Quick Install

### Step 1: Get the Code

The install code is:

```html
<script src="https://YOURDOMAIN.sistrack.com/ai-assistant/widget.js" async></script>
```

**Replace** `YOURDOMAIN` with your Sistrack subdomain.

### Step 2: Add It to Your Site

Copy the code and paste it **right before the `</body>` tag** on your website.

```html
<!DOCTYPE html>
<html>
<head>
    <title>My Site</title>
</head>
<body>
    <!-- Your content here -->

    <!-- AI Assistant widget (add here) -->
    <script src="https://yourcompany.sistrack.com/ai-assistant/widget.js" async></script>
</body>
</html>
```

### Step 3: Verify

1. Visit your website
2. Look for the chat button in the bottom corner
3. Click it and send a test message

## 📦 Installation by Platform

### WordPress

**Option A: Custom code plugin**

1. Install the "Insert Headers and Footers" plugin
2. Go to **Settings** → **Insert Headers and Footers**
3. In the **Scripts in Footer** section, paste:
   ```html
   <script src="https://yourcompany.sistrack.com/ai-assistant/widget.js" async></script>
   ```
4. Save your changes

**Option B: Edit the theme directly**

1. Go to **Appearance** → **Theme Editor**
2. Select `footer.php`
3. Add the code before `</body>`
4. Save

> ⚠️ **Note**: If you use a child theme, edit the child theme's `footer.php`.

### Shopify

1. Go to **Online Store** → **Themes**
2. Click **Actions** → **Edit code**
3. Find `theme.liquid`
4. Locate the `</body>` tag
5. Add the code right before it
6. Save

### WooCommerce

Same as WordPress (see above).

### Wix

1. Go to **Settings** → **Advanced** → **Custom Code**
2. Click **+ Add Custom Code**
3. Paste the code
4. Under "Place Code in", select **Body - end**
5. Under "Add Code to Pages", select **All pages**
6. Save

### Squarespace

1. Go to **Settings** → **Advanced** → **Code Injection**
2. In the **Footer** section, paste the code
3. Save

### Static HTML

Add it directly to each page before `</body>`:

```html
<script src="https://yourcompany.sistrack.com/ai-assistant/widget.js" async></script>
```

## ⚙️ Advanced Options

### Loading on Specific Pages

If you only want the widget on certain pages:

```html
<script>
  // Only load on product or contact pages
  if (window.location.pathname.includes('/products') ||
      window.location.pathname.includes('/contact')) {
    var script = document.createElement('script');
    script.src = 'https://yourcompany.sistrack.com/ai-assistant/widget.js';
    script.async = true;
    document.body.appendChild(script);
  }
</script>
```

### Delaying the Load

To improve performance, load it after the site is ready:

```html
<script>
  window.addEventListener('load', function() {
    setTimeout(function() {
      var script = document.createElement('script');
      script.src = 'https://yourcompany.sistrack.com/ai-assistant/widget.js';
      script.async = true;
      document.body.appendChild(script);
    }, 2000); // Wait 2 seconds after loading
  });
</script>
```

## 🔍 Verifying the Installation

### Checklist

| Step | Done? |
|------|--------------|
| Code added to site | ☐ |
| Widget visible in the corner | ☐ |
| Clicking opens the chat | ☐ |
| I can send a message | ☐ |
| I get a reply from the assistant | ☐ |

### Verification Tools

**Browser Console**:
1. Open your site
2. Press `F12` or `Ctrl+Shift+I`
3. Go to the **Console** tab
4. Look for "AI Assistant" messages

If you see errors, check:
- The domain in the script is correct
- No blockers are active
- The assistant is enabled

## 🚨 Troubleshooting

### The widget doesn't appear

**Possible causes**:

| Cause | Solution |
|-------|----------|
| Code in the wrong place | Check it's before `</body>` |
| Wrong domain | Check the script's URL |
| Assistant disabled | Enable it in the panel |
| Ad blocker | Temporarily disable it to test |
| JavaScript error | Check the browser console |

### Widget appears but doesn't work

**Possible causes**:

| Cause | Solution |
|-------|----------|
| No API connection | Check your internet connection |
| Limit reached | Check monthly usage |
| Configuration error | Contact support |

### Widget looks off

**Possible causes**:

| Cause | Solution |
|-------|----------|
| Conflicting CSS | Use the inspector to identify it |
| Wrong position | Change it in the configuration |
| Responsive issues | Test at different screen sizes |

## 📱 Compatibility

### Supported Browsers

| Browser | Minimum Version |
|-----------|----------------|
| Chrome | 80+ |
| Firefox | 75+ |
| Safari | 13+ |
| Edge | 80+ |
| Opera | 67+ |

### Devices

- ✅ Desktop (Windows, Mac, Linux)
- ✅ Tablet (iOS, Android)
- ✅ Mobile (iOS, Android)

## 🔒 Security

- ✅ The widget only communicates with your Sistrack domain
- ✅ All communication is over HTTPS
- ✅ No sensitive data is stored in the browser
- ✅ Complies with GDPR and privacy regulations

## 📞 Support

If you have trouble with the installation:

1. Review this full guide
2. Check the technical documentation
3. Contact support with:
   - Your site's URL
   - A screenshot of the error
   - Browser and version used