Web Chat Widget

QCall AI provides a customizable chat widget that you can embed on your website to engage visitors in real-time AI-powered conversations. The widget connects directly to your configured assistant, providing instant responses to visitor queries. The chat widget supports two display modes:

Mode	Description
Floating	Displays as a floating chat bubble in the corner of the page. Visitors click to open the chat window.
Embedded	Embeds directly into a specific container on your page. The chat is always visible within the defined area.

How to Configure

Navigate to Assistant Settings under Call Platforms
Scroll to the Widget Configuration section
Enable the widget and configure the following settings:

Setting	Description	Options
Enabled	Turn the widget on/off	`true` / `false`
Mode	Display mode	`floating` / `embedded`
Position	Widget position (floating mode only)	`bottom-right` / `bottom-left`
UI Style	Widget appearance style	`default` / `minimal`
API Key	API key for authentication	Auto-generated
Container ID	DOM container ID (embedded mode)	Any valid HTML ID

Add the following script to your website’s HTML:

Floating Mode

<script>
  (function(w, d, s, o) {
    var js = d.createElement(s);
    js.src = 'https://widget.qcall.ai/widget.js';
    js.setAttribute('data-api-key', 'YOUR_API_KEY');
    js.setAttribute('data-mode', 'floating');
    js.setAttribute('data-position', 'bottom-right');
    d.head.appendChild(js);
  })(window, document, 'script');
</script>

Embedded Mode

<div id="qcall-chat-container" style="width: 400px; height: 600px;"></div>

<script>
  (function(w, d, s, o) {
    var js = d.createElement(s);
    js.src = 'https://widget.qcall.ai/widget.js';
    js.setAttribute('data-api-key', 'YOUR_API_KEY');
    js.setAttribute('data-mode', 'embedded');
    js.setAttribute('data-container-id', 'qcall-chat-container');
    d.head.appendChild(js);
  })(window, document, 'script');
</script>

API Configuration (via API)

You can also configure the widget programmatically when creating or updating an assistant:

{
  "widget_config": {
    "enabled": true,
    "mode": "floating",
    "api_key": "your-api-key",
    "uiStyle": "default",
    "position": "bottom-right",
    "containerId": null
  }
}

Customization Options

Colors: The widget inherits your assistant’s primary color (#7C53FC by default)
Welcome Message: Configure the initial greeting in your assistant’s start speech
Language: The widget supports all languages configured for your assistant

Best Practices

Use floating mode for general website engagement
Use embedded mode for dedicated support or contact pages
Test the widget on different screen sizes before going live
Configure a welcoming start speech for chat interactions

Get Started

QCall Ai Enterprise

Contacts Management CRM

Call Platforms

Customization

Apps

Glossary

Legal

Web Chat Widget

Widget Modes

How to Configure

Step 1: Enable Widget in Assistant Settings

Step 2: Add Widget Code to Your Website

Floating Mode

Embedded Mode

API Configuration (via API)

Customization Options

Best Practices

​Web Chat Widget

​Widget Modes

​How to Configure

​Step 1: Enable Widget in Assistant Settings

​Step 2: Add Widget Code to Your Website

​Floating Mode

​Embedded Mode

​API Configuration (via API)

​Customization Options

​Best Practices

Web Chat Widget

Widget Modes

How to Configure

Step 1: Enable Widget in Assistant Settings

Step 2: Add Widget Code to Your Website

Floating Mode

Embedded Mode

API Configuration (via API)

Customization Options

Best Practices