---
title: "Embed an AI agent on your website"
description: "Turn on public access, choose an answer mode, customize the chat widget's appearance, complete the network settings, then download the JavaScript file to embed the chat window in a page"
canonical_url: "https://docs.ardge.com/en/knowledge/argent/embed-on-website"
---
# Embed an AI agent on your website

> Turn on public access, choose an answer mode, customize the chat widget's appearance, complete the network settings, then download the JavaScript file to embed the chat window in a page

## Overview

With public access turned on, you can embed an AI agent on your website as a chat widget, so visitors can chat with the agent without signing in.

To embed it, you load a JavaScript file (called argent-widget.js in the interface) on your website's page. You download this file from ARGENT. It already contains the appearance and text settings saved at the time you download it, plus the URL it needs to connect back to the ARGENT service.

This article covers the full flow: turning on public access, choosing an answer mode, setting the widget's appearance, then completing the network settings, downloading the file and pasting in the embed code.

## What you'll learn

- Turn on public access for a single agent and decide the answer mode for visitors' questions
- Customize the chat widget's title, text, colors and icons
- Set the ARGENT API Host and the allowlist of origins that may embed the widget
- Download the chat widget's JavaScript file and embed the chat window in a page

**Estimated time: about 20 minutes** (not counting port forwarding setup on your router or firewall)

## Applies to

- ARGENT 1.0.1 and later

## Before you begin

- You have created and verified this agent — see [Create your first AI agent](https://docs.ardge.com/en/knowledge/argent/first-ai-agent)
- You have permission to configure your router or firewall and can add port forwarding rules
- You have permission to upload to your website's static assets directory and to edit the page's HTML

## Step 1: Turn on public access

1. Go to the **AI Agent** page and click the target agent's card
2. Switch to the **Embedded Widget** tab
3. Turn on the **Public Access** switch

Once it's on, three sections appear below: **Answer Mode**, **Chat Widget Appearance** and **Embedded Chat Window**. The **Embedded Chat Window** section shows this agent's **Agent ID**.

<warning>

**Before you publish, confirm the knowledge sources are fit to be public:**

Public access lets any visitor ask this agent questions. Answers don't show the files themselves, but the files' contents can appear in the answers.

</warning>

![The Embedded Widget tab with public access off](https://docs.ardge.com/screenshots/knowledge/en/argent/embed-on-website/step-1-1.webp)

![Answer Mode and Chat Widget Appearance after turning on public access](https://docs.ardge.com/screenshots/knowledge/en/argent/embed-on-website/step-1-2.webp)

## Step 2: Choose an answer mode

In the **Answer Mode** section, choose how the agent answers visitors' questions. The default is **Deep thinking**. Visitors can't change it themselves.

<table>
<thead>
  <tr>
    <th>
      Mode
    </th>
    
    <th>
      How it answers
    </th>
    
    <th>
      Use it for
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        Quick reply
      </strong>
    </td>
    
    <td>
      Retrieves directly and gives a concise answer
    </td>
    
    <td>
      Single questions and everyday lookups
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Deep thinking
      </strong>
    </td>
    
    <td>
      Reasons over several rounds and cross-checks across databases before answering
    </td>
    
    <td>
      Complex questions that need to search a large number of files
    </td>
  </tr>
</tbody>
</table>

## Step 3: Set the chat widget's appearance

In the **Chat Widget Appearance** section, adjust the settings as follows. A live preview on the right updates as you go, and you can switch between **Desktop** and **Mobile** views. When you're done, click **Save** in that section.

<table>
<thead>
  <tr>
    <th>
      Field
    </th>
    
    <th>
      Value
    </th>
    
    <th>
      Rules and notes
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        Chat Window Title
      </strong>
    </td>
    
    <td>
      The text in the title bar at the top of the chat window
    </td>
    
    <td>
      Optional. Up to 32 characters
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Chat Launcher Text
      </strong>
    </td>
    
    <td>
      The prompt text shown next to the launcher button
    </td>
    
    <td>
      Optional. Up to 32 characters
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Color Settings
      </strong>
    </td>
    
    <td>
      Choose <strong>
        Simple
      </strong>
      
       to apply a single <strong>
        Theme Color
      </strong>
      
       to every element, or <strong>
        Advanced
      </strong>
      
       to customize each one
    </td>
    
    <td>
      Enter a color code directly or use the color picker
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Launcher Button Icon
      </strong>
    </td>
    
    <td>
      The icon of the chat launcher at the bottom right
    </td>
    
    <td>
      Optional. Without an upload, the default chat icon is used. A square PNG with a transparent background is recommended
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Support Avatar Icon
      </strong>
    </td>
    
    <td>
      The support side's avatar in the chat
    </td>
    
    <td>
      Optional. Without an upload, the default bot icon is used
    </td>
  </tr>
</tbody>
</table>

With **Advanced**, you can set the colors of five elements separately: **Window Bar**, **Launcher Button**, **Chat Bubble**, **Send Button** and **Support Avatar**.

When the save succeeds, the page shows **Saved / Chat widget settings have been updated.**

![Chat Window Title and Chat Launcher Text filled in, with the live preview on the right](https://docs.ardge.com/screenshots/knowledge/en/argent/embed-on-website/step-3-1.webp)

![The Simple theme color and the icon upload fields](https://docs.ardge.com/screenshots/knowledge/en/argent/embed-on-website/step-3-2.webp)

![The five element colors in Advanced mode](https://docs.ardge.com/screenshots/knowledge/en/argent/embed-on-website/step-3-3.webp)

![The chat widget settings saved message](https://docs.ardge.com/screenshots/knowledge/en/argent/embed-on-website/step-3-4.webp)

## Step 4: Complete the network settings

In the **Network Settings** step of the **Embedded Chat Window** section, first set up a port forwarding rule on your router or firewall so the ARGENT service can be reached from outside networks. Then fill in the following two fields and click **Save**.

<table>
<thead>
  <tr>
    <th>
      Field
    </th>
    
    <th>
      Value
    </th>
    
    <th>
      Rules and notes
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        ARGENT API Host
      </strong>
    </td>
    
    <td>
      The URL where the ARGENT service is deployed, such as <code>
        https://argent.example.com
      </code>
    </td>
    
    <td>
      Required. Pre-filled with the URL you're using to open ARGENT. Visitors must be able to reach this URL from outside networks — if they can't, change it to the public URL. The chat widget uses it to connect to the backend service
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Allowed Origins
      </strong>
    </td>
    
    <td>
      The origins that may load this chat widget, such as <code>
        https://www.example.com
      </code>
    </td>
    
    <td>
      Required, at least one. Enter the full URL. Click <strong>
        Add Origin
      </strong>
      
       to add another row
    </td>
  </tr>
</tbody>
</table>

![Network Settings under Embedded Chat Window](https://docs.ardge.com/screenshots/knowledge/en/argent/embed-on-website/step-4-1.webp)

![Network Settings filled in and saved](https://docs.ardge.com/screenshots/knowledge/en/argent/embed-on-website/step-4-2.webp)

<warning>

**You can only download once both fields are filled in:**

Until they are, the **Download** button in the next step can't be clicked, and the page shows **Add at least one allowed origin before downloading the widget.**

</warning>

## Step 5: Download and upload the JavaScript file

1. In the **Upload JavaScript File** step, click **Download** to get the chat widget's JavaScript file. The file name follows the format `argent-widget-v<version>-<first 8 characters of the Agent ID>.js`, such as `argent-widget-v1.0.0-eda52162.js`
2. Upload the file to your website's static assets directory

<warning>

**After changing the appearance or text, download and upload again:**

The downloaded file contains the appearance and text settings that were saved at the time you downloaded it. If you change these settings in ARGENT later, the chat widget on your website doesn't update on its own — download the file again and replace the one on your website.

</warning>

## Step 6: Paste in the embed code

1. In the **Widget JS File Location** field of the **Embed Chat Window Code** step, enter the location where you stored the file from Step 5, such as `https://www.example.com/assets`
2. Click the copy icon on the code block. The page shows **Copied / Embed code has been copied to clipboard.**
3. Paste the code into the page where the chat window should appear

The page generates the URL and Agent ID in the code from what you entered, in this format:

```html
<!-- ARGENT Chat Widget v1.0.0 (agent id: <Agent ID>) -->
<script
  src="https://www.example.com/assets/argent-widget-v1.0.0-<first 8 characters of the Agent ID>.js"
  async
></script>
```

Once that's done, a chat launcher button appears at the bottom right of the page. Click it to open the chat window.

![The embed code with Widget JS File Location filled in](https://docs.ardge.com/screenshots/knowledge/en/argent/embed-on-website/step-6-1.webp)

![The embed code copied message](https://docs.ardge.com/screenshots/knowledge/en/argent/embed-on-website/step-6-2.webp)

## Troubleshooting

<table>
<thead>
  <tr>
    <th>
      Message
    </th>
    
    <th>
      Likely cause
    </th>
    
    <th>
      What to do
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        Failed to fetch the widget engine file. Please try again later.
      </code>
    </td>
    
    <td>
      The download request didn't get the file
    </td>
    
    <td>
      Click <strong>
        Download
      </strong>
      
       again later
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        Failed to save chat widget settings. Please try again later.
      </code>
    </td>
    
    <td>
      The save request for the appearance or network settings didn't go through
    </td>
    
    <td>
      Click <strong>
        Save
      </strong>
      
       again later
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        Add at least one allowed origin before downloading the widget.
      </code>
    </td>
    
    <td>
      <strong>
        Allowed Origins
      </strong>
      
       is empty
    </td>
    
    <td>
      Go back to Step 4, click <strong>
        Add Origin
      </strong>
      
       and enter the full URL
    </td>
  </tr>
</tbody>
</table>

## Related articles

- [Create your first AI agent](https://docs.ardge.com/en/knowledge/argent/first-ai-agent)
- [View ARGENT usage and chat history](https://docs.ardge.com/en/knowledge/argent/usage-analytics)


## Sitemap

See the full [sitemap](https://docs.ardge.com/sitemap.md) for all pages.