Quickstart

Create a publishable key

In Ringee, open Integrations → Custom Integrations, open or create an integration, then under Settings → Dialer SDK · Publishable keys:

add your exact origin, for example https://crm.example.com;
click Generate publishable key;
copy the pk_live_… value.

Full walkthrough: Publishable keys.

Add the SDK to your page

<script src="https://unpkg.com/@ringee/dialer-sdk"></script>
<script>
  const ringee = Ringee.mount({
    key: "pk_live_xxxxx",
    locale: "en",
    side: "right",
  });
</script>

npm install @ringee/dialer-sdk

import { createFloating } from "@ringee/dialer-sdk/ui";

const ringee = createFloating({
  key: "pk_live_xxxxx",
  agentEmail: currentUser.email, // prefills the form only
  locale: "en",
});

Ringee.mount(options) is an alias for Ringee.createFloating(options).

Sign the agent in

Open the launcher. The agent enters their email, Ringee sends a one-time code, and they verify it. agentEmail only prefills the field — Ringee always requires proof of access to that mailbox.Once verified, the panel is ready to dial.

Place a call

Either type a number in the keypad, or trigger it from your own UI:

ringee.startCall({
  to: "+13055550142",
  name: "Morgan Reed",
  externalContactId: "crm-contact-294",
});

startCall() can be called before initialization finishes — the SDK queues the request and places it once the dialer reaches ready. If the agent is not signed in, the OTP flow appears first.

Pin a version in production

The unpinned CDN URL always serves the latest release. Pin it so a host deployment never picks up an unexpected version:

<script src="https://unpkg.com/@ringee/dialer-sdk@0.1.1/dist/ringee.global.js"></script>

Attach the current contact

If your app already knows who is on screen, tell the SDK:

ringee.setContact({
  name: "Morgan Reed",
  number: "+13055550142",
  externalContactId: "crm-contact-294",
});

See CRM contacts.

Point at a self-hosted backend

apiUrl is the API origin without /api:

createFloating({
  key: "pk_live_xxxxx",
  apiUrl: "https://ringee-api.example.com",
});

For local development:

createFloating({
  key: "pk_live_xxxxx",
  apiUrl: "http://localhost:3000",
  debug: true,
});

apiUrl and your frontend origin are different values. The frontend origin — for example http://localhost:4200 — is what must be in the publishable key’s allowed origins.

Try the playgrounds

The repository ships three:

Path	What it does
`apps/sdk-playground/live`	Real Floating, Bar and Headless modes against a real backend — OTP, WebRTC and real calls
`apps/sdk-playground/vanilla-headless`	Minimal framework-free headless example
`apps/sdk-playground/ui-gallery`	Visual states driven by a simulated dialer, no network or WebRTC

node apps/sdk-playground/live/build.mjs --serve   # http://localhost:5173

Add http://localhost:5173 to your allowed origins first, and generate the publishable key after that.

Next steps

Floating

Launcher and panel

Bar

Inline dialer

Headless

Build your own UI

Get Started

Integration Modes

Guides

Reference

Operations

Pin a version in production

Attach the current contact

Point at a self-hosted backend

Try the playgrounds

Next steps

Floating

Bar

Headless

​Pin a version in production

​Attach the current contact

​Point at a self-hosted backend

​Try the playgrounds

​Next steps

Floating

Bar

Headless

Pin a version in production

Attach the current contact

Point at a self-hosted backend

Try the playgrounds

Next steps