Integration / React integration

React integration

Attach it safely with a component pattern.

Recommended pattern

Call init only once on mount (the SDK is a singleton).
Handle user changes by dispatching the lillo:userLoggedIn event, and logout with lilloSDK.logout().

The console's Button install > React tab provides a ready-to-copy LilloChat component — init once, and handle user changes via events/logout.

Recommended pattern — useEffect

useEffect(() => {
  if (!window.LilloSDK) return;
  window.lilloSDK = window.LilloSDK.init({ host, chatAppUrl, clientKey });
}, []);

useEffect(() => {
  if (user) {
    window.dispatchEvent(
      new CustomEvent('lillo:userLoggedIn', { detail: user })
    );
  } else {
    window.lilloSDK?.logout();
  }
}, [user]);