Chat Overlay Integration

Learn how to embed the plug-and-play chat overlay button on your website.

The AskonAI Chat Widget is a lightweight, performant, plug-and-play JavaScript library that allows you or your clients to embed a support chat overlay button on any website.

It is completely framework-independent, uses pure vanilla JavaScript, and matches the sleek design of the AskonAI platform.

🚀 Quick Start

To add the chat widget to any website, insert the following script tag before the closing </body> tag:

<script 
  src="https://askon.ai/widget.js" 
  data-url="https://askon.ai/support"
  data-title="AskonAI Support"
  data-primary-color="#4F46E5"
  data-secondary-color="#FFFFFF"
  data-position="bottom-right"
></script>

⚙️ Configuration Options

The widget can be fully customized by passing custom data-* attributes directly on the <script> tag:

Attribute	Type	Default	Description
`data-url`	String	Required	The support chat URL to load inside the iframe (e.g. `https://askon.ai/support`).
`data-title`	String	`"AskonAI Support"`	Accessibility title for the `<iframe>` (improves SEO & Screen Reader compatibility).
`data-primary-color`	String	`"#4F46E5"`	Hex color for the button background (matches your brand's primary theme).
`data-secondary-color`	String	`"#FFFFFF"`	Hex color for the stroke of the icon inside the button.
`data-position`	String	`"bottom-right"`	Position on the screen: `"bottom-right"` or `"bottom-left"`.
`data-padding`	String	`"24px"`	Spacing offset from the screen edges (e.g. `"30px"` or `"2rem"`). Unitless values default to pixels (`"24"` -> `"24px"`).

🛠️ Chat Interface Customization (Query Parameters)

You can customize the behavior and look of the chat interface loaded inside the iframe by appending query parameters to the data-url value:

Parameter	Allowed Values	Description
`catalog`	`false`	Hides the catalog button (`Store` icon) in the chat header, disabling access to product/link catalogs.
`brand`	`false`	White-labels the interface: hides the "Share this magic link" component, copy action, and brand sign-up invitation panel. It also changes the modal title directly to "Page Settings".
`theme`	`light` \| `dark` \| `system`	Forces a specific theme mode (e.g., `theme=light` or `theme=dark`) for the session, and automatically removes the manual theme switcher/mode toggle from the settings menu.

Example with Query Parameters:

<script 
  src="https://askon.ai/widget.js" 
  data-url="https://askon.ai/support?catalog=false&brand=false&theme=dark"
  data-title="AskonAI Support"
  data-primary-color="#4F46E5"
  data-secondary-color="#FFFFFF"
  data-position="bottom-right"
  data-padding="24px"
></script>

✨ Features & Optimizations

Lazy Loading: The widget will not load the iframe contents or execute requests until the user clicks the button for the first time. This ensures zero performance impact on the host website's page speed.
Premium Loading State: A clean loading indicator spinner is displayed inside the chat panel while the support content is loading. Once the iframe content is fully loaded, the spinner fades out smoothly.
Responsive Layout: Automatically adjusts sizes for mobile, tablet, and desktop viewports:
- Desktop: 400px width.
- Tablet: 500px / 75vw width.
- Mobile: Full width (with padding) and fits perfectly below the header area.
Isolated Styles: Styles are scoped via custom CSS class prefixes (.askon-chat-*) to prevent style bleeding or conflicts with the host website.

🚀 Quick Start

To add the chat widget to any website, insert the following script tag before the closing </body> tag:

⚙️ Configuration Options

The widget can be fully customized by passing custom data-* attributes directly on the <script> tag:

Attribute

Type

Default

Description

data-url

String

Required

The support chat URL to load inside the iframe (e.g. https://askon.ai/support).

data-title

String

"AskonAI Support"

Accessibility title for the <iframe> (improves SEO & Screen Reader compatibility).

data-primary-color

String

"#4F46E5"

Hex color for the button background (matches your brand's primary theme).

data-secondary-color

String

"#FFFFFF"

Hex color for the stroke of the icon inside the button.

data-position

String

"bottom-right"

Position on the screen: "bottom-right" or "bottom-left".

data-padding

String

"24px"

Spacing offset from the screen edges (e.g. "30px" or "2rem"). Unitless values default to pixels ("24" -> "24px").

🛠️ Chat Interface Customization (Query Parameters)

You can customize the behavior and look of the chat interface loaded inside the iframe by appending query parameters to the data-url value:

Parameter

Allowed Values

Description

catalog

false

Hides the catalog button (Store icon) in the chat header, disabling access to product/link catalogs.

brand

false

White-labels the interface: hides the "Share this magic link" component, copy action, and brand sign-up invitation panel. It also changes the modal title directly to "Page Settings".

theme

light | dark | system

Forces a specific theme mode (e.g., theme=light or theme=dark) for the session, and automatically removes the manual theme switcher/mode toggle from the settings menu.

Example with Query Parameters:

✨ Features & Optimizations

Lazy Loading: The widget will not load the iframe contents or execute requests until the user clicks the button for the first time. This ensures zero performance impact on the host website's page speed.

Premium Loading State: A clean loading indicator spinner is displayed inside the chat panel while the support content is loading. Once the iframe content is fully loaded, the spinner fades out smoothly.

Responsive Layout: Automatically adjusts sizes for mobile, tablet, and desktop viewports:

Desktop: 400px width.
Tablet: 500px / 75vw width.
Mobile: Full width (with padding) and fits perfectly below the header area.

Isolated Styles: Styles are scoped via custom CSS class prefixes (.askon-chat-*) to prevent style bleeding or conflicts with the host website.