連携 / React連携

React連携

コンポーネントパターンで安全に組み込みます。

推奨パターン

initはマウント時に1回だけ呼び出します(SDKはシングルトン)。
ユーザー変更は lillo:userLoggedIn イベントのディスパッチで、ログアウトは lilloSDK.logout() で処理します。

コンソールのボタン設置 > Reactタブで、コピーして使える LilloChat コンポーネントを提供します — initは1回、ユーザー変更はイベント/ログアウトで処理します。

推奨パターン — 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]);