EchoPMDevelopers

Website embed

Embed available units on your marketing site with a copy-paste iframe or the React SDK.

Show live available units (and optional apply) on your own website while EchoPM stays the source of truth for listings, screening, and leases.

Marketing: Bring your own website · npm: @echopm/react

Choose a path#

PathBest forSetup
IframeWordPress, Squarespace, Webflow, static HTMLCopy snippet from Manager — no npm
React SDK (@echopm/react)Next.js / React marketing sitesInstall package + publishable key

Both use the same publishable embed key (Property → Listing → Website embed). These are safe to put in HTML — unlike REST/MCP secrets. Restrict them with allowed domains in production.

Older embed keys that start with ecpm_embed_pk_ still work; create a new key when you rotate.

1. Create a publishable key#

  1. Sign in to Manager
  2. Open the property → Settings → Listing
  3. Under Website embed, create a key
  4. Set allowed domains (e.g. myproperty.com, *.myproperty.com)
  5. Copy the key once — it is only shown at creation

The property must be searchable and have available units for embeds to show inventory.

2a. Iframe (fastest)#

Paste the snippet from Manager, or use:

<iframe
  src="https://www.echopm.app/embed/units?propertyId=PROPERTY_ID&key=YOUR_EMBED_KEY"
  title="Available units"
  style="width:100%;min-height:560px;border:0;border-radius:12px;"
  loading="lazy"
></iframe>

Optional: apply=0 hides apply controls.

Preview / playground (after you have a key):
https://www.echopm.app/embed/demo?propertyId=…&key=…

2b. React SDK#

By default, UnitList / PropertyPage* iframe the same production listing UI as the EchoPM property page (Apply/Schedule run inside the iframe with EchoPM sign-in). Use mode="client" only when you need a custom layout against the embed API.

Install

npm install @echopm/react
# or
pnpm add @echopm/react

Peer dependencies: react and react-dom (18+). Import styles when using mode="client" or building blocks:

import "@echopm/react/styles.css";

Minimal example

import { EchoPMProvider, UnitList } from "@echopm/react";

export function AvailableUnits() {
  return (
    <EchoPMProvider publishableKey={process.env.NEXT_PUBLIC_ECHOPM_EMBED_KEY!}>
      <UnitList propertyId="YOUR_PROPERTY_ID" showApply />
    </EchoPMProvider>
  );
}

apiBaseUrl defaults to https://www.echopm.app. Only set it for local/staging EchoPM.

Useful exports

ExportPurpose
EchoPMProviderKey, API origin, analytics
UnitListProduction OpenUnits via iframe (default)
PropertyPageSimple / PropertyPageFullProduction listing layouts via iframe
PropertyCard / PropertyListSearch-result cards and lists
SearchWidgetOrg-scoped property search
UnitCard / LeadForm / CTAsBuilding blocks (mode="client" — import styles)
PoweredByAttribution

See React SDK for hosted pages, search cards, mode="client", and theme.

Security notes#

  • Use publishable embed keys in browsers — never REST/MCP machine secrets

  • Always set allowed domains for production keys

  • Apply still signs in on EchoPM; applicants return to your embed URL after auth

Next#