---
doc_version: "1.0.0"
last_updated: "2026-07-14T15:00:57.718Z"
title: "How the Chat Widget Loads"
description: "Understand how the ChatbotIQ widget loads on your website: lightweight, non-blocking, and fully isolated from your page styles."
keywords: [widget loading, embed script, performance, ChatbotIQ]
---

When you add the ChatbotIQ embed code to your website, the widget loads in the background without affecting your page's performance.

---

## Performance impact

The widget is designed to have minimal impact on your page:

- **Async loading** - the script downloads in parallel with your page content. It doesn't block rendering.
- **Small initial payload** - the embed code itself is tiny (< 1KB).
- **Mounts on script load** - once `embedded.js` runs it fetches the bot config, creates the Shadow DOM, and mounts the React UI right away, so the launcher button appears immediately. Only the chat panel's content stays hidden until a visitor opens it.
- **No jQuery or framework dependencies** - the widget is self-contained.

---

## Style isolation

The widget uses browser-native isolation to prevent conflicts with your website:

- **Your page's CSS doesn't affect the widget.** Even if your site uses aggressive global styles, the widget renders correctly.
- **The widget's CSS doesn't affect your page.** No style leaks in either direction.
- **No ID or class conflicts.** The widget's internal elements are fully encapsulated.

This means the widget looks and works the same on every website, regardless of your page's styles or scripts.

---

## API calls work immediately

You can call the widget API (e.g., `chatbotiq('open')`) at any point, even before the widget finishes loading. Calls are queued and executed once the widget is ready. No need to worry about timing.

---

## Related

- [Embed the Widget](/how-to/embed-the-widget/) - how to add the widget to your site
- [JavaScript Widget API](/reference/javascript-api/) - programmatic control reference
- [Control the Widget with JavaScript](/how-to/control-widget-with-javascript/) - practical examples

## Sitemap

Full documentation index: [sitemap.md](/sitemap.md) and [llms.txt](/llms.txt).