Web SDK

# Vanilla JavaScript / 任意のフレームワーク
npm install @oneinbox/web-sdk

# React
npm install @oneinbox/web-sdk-react @oneinbox/web-sdk react

import { OneInbox } from "@oneinbox/web-sdk";

const oi = new OneInbox("oi_pk_live_…");

// 通話中に起きることに反応する
oi.on("call-start",  ()  => showCallUI());
oi.on("call-end",    ()  => showIdleUI());
oi.on("transcript",  (t) => appendTranscript(t.role, t.text));  // ライブキャプション
oi.on("error",       (e) => showError(e.message));

// 通話を開始 — 訪問者の名前を渡してエージェントに挨拶させる
await oi.start("agt_…", { variables: { customer_name: "Sama" } });

// 通話中
oi.setMuted(true);   // 訪問者のマイクをミュート
oi.setMuted(false);  // ミュート解除

await oi.stop();     // ハングアップ

import { OneInboxProvider, useOneInbox } from "@oneinbox/web-sdk-react";

// アプリの最上位で一度ラップする
function App() {
  return (
    <OneInboxProvider publishableKey="oi_pk_live_…">
      <CallWidget agentId="agt_…" />
    </OneInboxProvider>
  );
}

// プロバイダー内のどこでもフックを使用
function CallWidget({ agentId }) {
  const { start, stop, status, transcripts, isAgentSpeaking, isMuted, setMuted } = useOneInbox();
  const active = status === "active";

  return (
    <div>
      <button onClick={() => (active ? stop() : start(agentId))}>
        {active ? "Hang up" : "Talk to us"}
      </button>

      {active && (
        <button onClick={() => setMuted(!isMuted)}>
          {isMuted ? "Unmute" : "Mute"}
        </button>
      )}

      <p>{isAgentSpeaking ? "Agent is speaking…" : status}</p>

      {transcripts.map((t, i) => (
        <p key={i}><b>{t.role}:</b> {t.text}</p>
      ))}
    </div>
  );
}