Live Chat Loader: keep live chat fast without the performance hit

Most chat tools ship as a heavy “always-on” script: they load early, allocate memory, run network calls, and compete with your page for main-thread time.

That tradeoff is real. On modern websites, every extra script can drag down Core Web Vitals, delay interactivity, and introduce small UX annoyances (jank, delayed clicks, extra CPU on mobile).

Live Chat Loader is built to remove that tax.

It gives you a lightweight launcher first and only loads the full Messenger SDK when the page is idle or the user is ready to chat.

What is Live Chat Loader?

Live Chat Loader is a loading mode for OXVO Messenger:

• Shows a lightweight launcher immediately

• Defers loading the full Messenger SDK until:

  • the browser becomes idle, or

  • the user interacts with the launcher

In practice: your site feels snappier, and your users still see chat as available.

Default: liveChatLoader is off (false) by default.

Why this matters (and why we built it)

Live chat is valuable but the default implementation across many tools creates a hidden “integration tax”:

• extra JS downloaded on every page

• initialization work during the critical rendering window

• early backend/API calls (even if the user never opens chat)

• a small but measurable hit to startup responsiveness especially on mobile

Live Chat Loader is designed to keep chat present while minimizing upfront cost:

• Lower impact on initial load

• Less competition for the main thread

• Smoother UX during the most important part of your page load

• No noticeable “swap” the placeholder transitions into the full Messenger seamlessly when needed

Enable it (React)

Turn it on by passing liveChatLoader={true} to your provider:

<OxvoMessengerProvider
  baseUrl="https://your-oxvo-domain"
  websiteToken="your-website-token"
  liveChatLoader={true}
/>

<OxvoMessengerProvider
  baseUrl="https://your-oxvo-domain"
  websiteToken="your-website-token"
  liveChatLoader={true}
/>

<OxvoMessengerProvider
  baseUrl="https://your-oxvo-domain"
  websiteToken="your-website-token"
  liveChatLoader={true}
/>

That’s it.

• A lightweight launcher renders first

• Full SDK load happens later (idle) or immediately on interaction

Customize appearance (optional)

liveChatLoader also accepts a configuration object so you can match your site’s UI exactly.

Example:

<OxvoMessengerProvider
  baseUrl="https://your-oxvo-domain"
  websiteToken="your-website-token"
  settings={{
    position: 'left',
    theme: 'dark',
    widgetStyle: 'flat',
  }}
  liveChatLoader={{
    enabled: true,
    appearance: {
      position: 'right',
      horizontalSpacing: 24,
      verticalSpacing: 24,
      messengerColor: '#2d6bff',
      type: 'expanded_bubble',
      launcherTitle: 'Support',
    },
  }}
/>

<OxvoMessengerProvider
  baseUrl="https://your-oxvo-domain"
  websiteToken="your-website-token"
  settings={{
    position: 'left',
    theme: 'dark',
    widgetStyle: 'flat',
  }}
  liveChatLoader={{
    enabled: true,
    appearance: {
      position: 'right',
      horizontalSpacing: 24,
      verticalSpacing: 24,
      messengerColor: '#2d6bff',
      type: 'expanded_bubble',
      launcherTitle: 'Support',
    },
  }}
/>

<OxvoMessengerProvider
  baseUrl="https://your-oxvo-domain"
  websiteToken="your-website-token"
  settings={{
    position: 'left',
    theme: 'dark',
    widgetStyle: 'flat',
  }}
  liveChatLoader={{
    enabled: true,
    appearance: {
      position: 'right',
      horizontalSpacing: 24,
      verticalSpacing: 24,
      messengerColor: '#2d6bff',
      type: 'expanded_bubble',
      launcherTitle: 'Support',
    },
  }}
/>

Appearance + override precedence

Live Chat Loader follows a clear override order so teams can reason about the final UI:

1. defaults

2. settings passed to init

3. liveChatLoader.appearance (highest priority)

Important note about widgetStyle

widgetStyle is inherited from Messenger settings and is not overridable via liveChatLoader.appearance.

If you want widgetStyle: 'flat', set it in settings, not inside liveChatLoader.

When should you enable Live Chat Loader?

Live Chat Loader is ideal when you want chat available, but don’t want it to slow down the page for everyone.

Common scenarios:

• Marketing pages (home, pricing, landing pages)

• Docs / help center pages where most visitors won’t open chat

• High-traffic pages where performance is a product feature

• Mobile-heavy audiences

• Apps where support is important but not always used

If your product requires chat to be fully ready instantly at page load (for example, a dedicated support portal with “chat-first” workflows), you might keep loader mode off in those routes.

A production rollout checklist

If you’re enabling this on a high-traffic site, here’s a safe rollout pattern:

1. Enable in staging and confirm:

   • launcher renders correctly

   • clicking it loads and opens Messenger cleanly

   • theme/position match your design system

2. Measure before/after using Lighthouse or WebPageTest:

   • startup performance (LCP/INP)

   • JS execution time

   • total requests at startup

3. Roll out to one surface first (e.g., homepage only)

4. Expand across marketing + docs, then evaluate in-product routes

Summary

Live Chat Loader is a simple switch that makes a big difference:

• Keep chat visible

• Delay the heavy work

• Protect page performance

• Deliver a smoother experience

If you’ve ever felt chat widgets slow down pages, this is the “best of both worlds” mode: support stays close, while your site stays fast.