Skip to content
ChatbotIQ

How the Chat Widget Loads

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

Performance impact

Section titled “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

Section titled “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

Section titled “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.

Section titled “Related”