Web SDK

const oi = new OneInbox("oi_pk_live_…");
await oi.start("agt_…", { variables: { customer_name: "Sama" } });

// Your server calls POST /v1/calls/web and returns these two values
const { participant_token, server_url } = await yourBackend.startCall(agentId);

const oi = new OneInbox("unused");
await oi.start({ token: participant_token, serverUrl: server_url });

# Vanilla JavaScript / any framework
npm install @oneinbox/web-sdk livekit-client

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

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

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

// React to what happens during the call
oi.on("call-start",  ()  => showCallUI());
oi.on("call-end",    ()  => showIdleUI());
oi.on("transcript",  (t) => appendTranscript(t.role, t.text));  // live captions
oi.on("error",       (e) => showError(e.message));

// Start the call — pass the visitor's name so the agent greets them
await oi.start("agt_…", { variables: { customer_name: "Sama" } });

// During the call
oi.setMuted(true);   // mute the visitor's mic
oi.setMuted(false);  // unmute

await oi.stop();     // hang up

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

// Wrap your app once at the top level
function App() {
  return (
    <OneInboxProvider publishableKey="oi_pk_live_…">
      <CallWidget agentId="agt_…" />
    </OneInboxProvider>
  );
}

// Use the hook anywhere inside the provider
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>
  );
}