Skip to content

Architecture

Integration pattern

Your frontend renders SDK components. Those components talk to your backend, not to Opendoor. Your backend uses the server SDK to forward requests to the Opendoor API.

Browser (React / Vue)
  → client-js-core → your backend → server SDK (Node or Ruby) → Opendoor API

The API key stays on your server. The browser SDK only knows about your backend’s URL.

Packages

server-js-core (Node) or opendoor-partner-sdk-server-ruby (Ruby) — server-side client for your backend. Wraps the Opendoor Partnerships API (GraphQL for offers, REST for address autocomplete). You set up proxy routes like POST /api/opendoor/v1/offer/create, POST /api/opendoor/v1/offer/pricing, or POST /api/opendoor/v1/offer/products-pricing, and the SDK handles the rest. The two server SDKs are designed for parity (same BFF routes and JSON bodies); pick the stack that fits your backend.

client-js-core — Browser HTTP client. Makes typed fetch calls to your backend at /api/opendoor/v1/*. No framework dependency — works with React, Vue, or anything else. Also defines the OpendoorAppearance theming contract shared across all UI packages.

client-react — React components: AddressEntry, AddressMap, AddressUnitConfirmation, QualificationQuestions, DtcOnboardingFlow. Wrapped in an OpendoorProvider context. Themed via the appearance prop.

client-vue — Vue 3 components: AddressEntry, AddressMap, AddressUnitConfirmation, DtcOnboardingFlow. These render identically to their React counterparts — partners switching frameworks get the same UI without re-implementing anything. Uses provide/inject and @kebab-case emits instead of React Context and callback props.

Telemetry

SDK components send anonymous usage events to Opendoor (page views, button clicks, field identifiers, address data on selection). This powers conversion funnel reporting.

Not collected: personal info, answer values, API keys, cookies. Telemetry uses an anonymous localStorage identifier on your domain.

Your own analytics

Use lifecycle callbacks to pipe events to your analytics:

  • onReady / @ready — component mounted
  • onAddressSelect / @address-select — address chosen
  • onPageChange / @page-change — page navigation
  • onSubmit / @submit — questionnaire completed

See the component guides for the full callback reference.