WebRTC

npm install @revring/webrtc-sdk

yarn add @revring/webrtc-sdk

import { RevRingWebRtcClient } from "@revring/webrtc-sdk";

// Initialize the SDK client
const client = new RevRingWebRtcClient();

// Phone number assigned to your agent (end users never see this)
const AGENT_NUMBER = "+12025551234";

// Start a call when end user clicks your button
async function startCall() {
  try {
    const call = await client.startCall({
      to: AGENT_NUMBER
    });

    // Listen for call events
    call.on("accept", () => {
      console.log("Call connected");
    });

    call.on("disconnect", () => {
      console.log("Call ended");
    });

    call.on("error", (error) => {
      console.error("Call error:", error);
    });

  } catch (error) {
    console.error("Failed to start call:", error);
  }
}

// Hang up the call
function hangUp() {
  client.hangupAll();
}

// Clean up when done
function cleanup() {
  client.destroy();
}

const client = new RevRingWebRtcClient({
  // Optional: custom API base URL (defaults to production)
  apiBaseUrl: "https://api.revring.ai"
});

const call = await client.startCall({
  // Required: phone number assigned to your agent (E.164 format)
  to: "+12025551234",
  
  // Optional: Twilio SDK log level
  twilioLogLevel: "error" // "trace" | "debug" | "info" | "warn" | "error" | "silent"
});

call.on("accept", () => {
  // Call successfully connected
});

call.on("disconnect", () => {
  // Call ended (by either party)
});

call.on("cancel", () => {
  // Call was cancelled before connecting
});

call.on("reject", () => {
  // Call was rejected (agent busy, offline, etc.)
});

call.on("error", (error) => {
  // Error occurred during call
  console.error(error);
});

import { RevRingWebRtcClient } from "@revring/webrtc-sdk";

const AGENT_NUMBER = "+12025551234";

class CallWidget {
  private client: RevRingWebRtcClient;
  private activeCall: any = null;
  private isConnected = false;

  constructor() {
    this.client = new RevRingWebRtcClient();
  }

  async startCall() {
    try {
      const call = await this.client.startCall({
        to: AGENT_NUMBER
      });

      this.activeCall = call;

      call.on("accept", () => {
        this.isConnected = true;
        this.updateUI("Connected");
      });

      call.on("disconnect", () => {
        this.isConnected = false;
        this.activeCall = null;
        this.updateUI("Call ended");
      });

      call.on("error", (error) => {
        console.error("Call error:", error);
        this.updateUI("Call failed");
      });

      this.updateUI("Connecting...");

    } catch (error) {
      console.error("Failed to start call:", error);
      this.updateUI("Failed to connect");
    }
  }

  hangup() {
    if (this.activeCall) {
      this.activeCall.disconnect();
      this.activeCall = null;
      this.isConnected = false;
    }
  }

  destroy() {
    this.hangup();
    this.client.destroy();
  }

  private updateUI(status: string) {
    // Update your UI elements here
    console.log(status);
  }
}

// Initialize
const widget = new CallWidget();

// Clean up on page unload
window.addEventListener("beforeunload", () => {
  widget.destroy();
});

// ✅ Good - triggered by end user click
button.addEventListener("click", async () => {
  await client.startCall({ to: AGENT_NUMBER });
});

// ❌ Bad - automatic call on page load
window.addEventListener("load", async () => {
  await client.startCall({ to: AGENT_NUMBER });
});

try {
  const call = await client.startCall({ to: AGENT_NUMBER });
} catch (error) {
  if (error.message.includes("Permission")) {
    alert("Please allow microphone access to make calls");
  } else {
    alert("Failed to start call. Please try again.");
  }
}

// React example
useEffect(() => {
  const client = new RevRingWebRtcClient();
  
  return () => {
    client.destroy();
  };
}, []);

<iframe 
  src="https://your-widget.pages.dev" 
  width="400" 
  height="600"
  allow="microphone"
  style="border: none;"
></iframe>