iFrame CTA Integration

Overview

Ownly supports widget action triggering via HTML5 postMessage, allowing seamless cross-origin communication between an embedded iFrame and the parent web page.

This feature enables clients to reserve, save, build directly from third-party platforms or partner portals where Ownly is embedded.

Prerequisites

Before using this integration:

The Ownly widget must be embedded on the parent page.
The iFrame must send valid postMessage events.
The parent window must listen for postMessage events.
Only trusted iFrame sources should be allowed to interact.
Ensure all required data fields are passed correctly.

How It Works

The iFrame sends a structured postMessage to the parent page.
The parent page verifies the origin and data structure.
The parent triggers the appropriate Ownly widget action based on the message type.

This provides a secure, modular way for third-party platforms to interact with Ownly widgets.

Example

Send a message from within an embedded iFrame:

function ownlyReserveHome() {
  const message = {
    type: "ownly-reserve-home",
    data: {
      "listing-external-id": "quickPossession9",
      "listing-description": "Turnkey quick possession home.",
      "listing-address": "Test address",
      "listing-community-id": "LpewPE7J",
      "listing-community-name": "Belmont",
      "listing-model-id": "b2rpZDey",
      "listing-model-name": "Manhattan",
      "listing-price": "412000",
      "listing-size": "2406",
      "listing-beds": "4",
      "listing-baths": "3",
      "listing-image": "https://ownly.amazonaws.com/models/328/cfd5b1fd.png",
      "listing-url": ""
    }
  };

  window.top.postMessage(message, "*"); // Replace * with a trusted domain in production
}

Data Overview

The data object contains all required listing information. This should match what Ownly expects when displaying or reserving a home.

Data Attribute Reference

The data object passed in the postMessage must include the following fields:

Field Name	Description	Required
`listing-external-id`	Unique external ID for the listing	true
`listing-description`	Short description of the home	true
`listing-address`	Full address of the listing	true
`listing-community-id`	Internal ID of the community	true
`listing-community-name`	Display name of the community	true
`listing-model-id`	Internal ID of the home model	true
`listing-model-name`	Name of the model	true
`listing-price`	Price of the home	true
`listing-size`	Square footage of the home	true
`listing-beds`	Number of bedrooms	true
`listing-baths`	Number of bathrooms	true
`listing-image`	URL of the home's display image	true
`listing-url`	(Optional) Link to listing or page	false

These fields are used consistently across:

Single Family Homes
Multi-Family Homes
Quick Possession Homes

Event Types

The type field in your message determines the Ownly widget action triggered:

`type` Value	Action Triggered
`ownly-reserve-home`	Opens reservation flow for a specified listing
`ownly-save-home`	Saves the home to the user’s favourites
`ownly-build-home`	Starts the build-and-price experience
`ownly-get-verified`	Begins the ID or eligibility verification process

Each action expects the data object to be passed correctly and completely.

Overview​

Prerequisites​

How It Works​

Example​

Data Overview​

Data Attribute Reference​

Event Types​