chat - AIDA Docs

Customizable Web Chat Widget

Features

Collapse and expand animation.
Fullscreen button and animation.
Waiting chat respond animation.
Customize color, title, font family, first message, and position.
Custom icon for chat bubble (PNG, SVG, etc).
Voice recognition with improved stability for Brave browser and other Chromium-based browsers.
Toggle microphone functionality with click to start/stop listening.
Text-to-speech synthesis with customizable voice and rate.
Customizable input placeholder text.
Option to show an initial user message.
API key authentication support.
File upload functionality with size limit control.
Custom POST request with support for additional parameters.
Auto generate user UUID or use a custom one for tracking conversations.
Error message on exception.
100% pure vanilla Javascript.
Support for both array and single object API responses.

how-to

Existing website

Minimal as,

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

<script src="./chat.js"></script>
<script>
    ChatWidget.init(
            'https://example.com', // URL - API endpoint
            '#1076EE', // color
            'Chat with Us', // title
            '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen', // font_family
            'Hi, my name is bot!', // first_message
            'SpecialInitPayLoadDoNotTouch', // init_payload
            '1000', // z_index
            'left', // position - 'left' or 'right'
            null, // x - horizontal position in pixels (optional)
            null, // y - vertical position in pixels (optional)
            'es-CL', // speech_lang
            'Google US English', // speech_voice
            1.2, // speech_rate
            10, // max_file_size_mb
            'your_api_key', // api_key
            true, // disable_file_upload
            'https://example.com/icon.png', // icon_url
            "Type your message in here...", // placeholder_text
            "", // initial_message
            null, // chat_user_uuid
            null // additional_params
    );
</script>
</body>

</html>

Parameters

window.ChatWidget = {
    init: function (
        url,
        color = "#0056FF",
        title = "Conversation",
        font_family = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif",
        first_message = "Hello, my name is bot!",
        init_payload = 'SpecialInitPayLoadDoNotTouch',
        z_index = '1000',
        position = 'right', // 'left' o 'right'
        x = null,
        y = null,
        speech_lang = (navigator.language || 'en-US'),
        speech_voice = '',
        speech_rate = 1,
        max_file_size_mb = 20,
        api_key = '',
        disable_file_upload = false,
        icon_url = null,
        placeholder_text = "Type your message in here...",
        initial_message = "",
        chat_user_uuid = null,
        additional_params = null
    ) {
        createChatWidget(url, color, title, font_family, first_message, init_payload, z_index, position, x, y, speech_lang, speech_voice, speech_rate, max_file_size_mb, api_key, disable_file_upload, icon_url, placeholder_text, initial_message, chat_user_uuid, additional_params);
    }
};

Parameter Details

Parameter	Type	Default	Description
url	String	required	API endpoint URL
color	String	"#0056FF"	Primary color for chat elements
title	String	"Conversation"	Chat widget title
font_family	String	System fonts	Font family for all text
first_message	String	"Hello, my name is bot!"	First message shown when chat loads
init_payload	String	'SpecialInitPayLoadDoNotTouch'	Initial payload sent to API
z_index	String	'1000'	CSS z-index for widget
position	String	'right'	Widget position ('left' or 'right')
x	Number	null	Horizontal position in pixels (overrides position parameter)
y	Number	null	Vertical position in pixels (custom positioning from top)
speech_lang	String	Browser language	Language for speech recognition (e.g., 'es-CL', 'en-US')
speech_voice	String	''	Preferred voice name for text-to-speech
speech_rate	Number	1	Speech rate (0.5 to 2)
max_file_size_mb	Number	20	Maximum file size for uploads in MB
api_key	String	''	API key for authentication
disable_file_upload	Boolean	false	Disable file upload functionality
icon_url	String	null	URL to custom chat icon image (PNG, SVG)
placeholder_text	String	"Type your message in here..."	Placeholder text for input field
initial_message	String	""	Initial message shown as if sent by the user
chat_user_uuid	String	null	Custom UUID for the user (if not provided, a random UUID will be generated and stored in session storage)
additional_params	Object	null	Additional parameters to be passed in the API request (must not exceed 2048 characters)

What kind of parameters we use for POST request?

const jsonData = {
    sender: userUUID,
    message: text
};

// If additional_params is provided, they will be merged with the base request
if (additionalParams) {
    Object.assign(jsonData, additionalParams);
}

fetch(url, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${apiKey}` // If API key is provided
    },
    body: JSON.stringify(jsonData)
})

API Response Format

The widget supports two API response formats:

1. Array of objects (original format):

[
  {
    "text": "Hello, how can I help you today?"
  },
  {
    "text": "Feel free to ask me any questions."
  }
]

2. Single object (new format):

{
  "text": "Hello, how can I help you today?"
}

Minification with Terser

To compress and obfuscate the code for production use, you can use Terser:

Installation

npm install -g terser

Minification Command

terser chat.js -o chat.min.js --compress --mangle

aida-chat-widget 💬

Features

how-to

Existing website

Parameters

Parameter Details

What kind of parameters we use for POST request?

API Response Format

1. Array of objects (original format):

2. Single object (new format):

Minification with Terser

Installation

Minification Command