Embedding CMAsnap with the Embed API

The CMAsnap Embed API lets you embed the CMAsnap CMA report creation tool directly into your website using an <iframe>. This is ideal for platforms looking to streamline CMA report creation for their users without navigating away from their current workflow.

Getting Started

To embed CMAsnap, insert the following iframe code into your page:

<iframe
  id="cmasnap-iframe"
  src="https://app.cmasnap.com/new?embed=true"
  scrolling="no"
  style="width: 1px; min-width: 100%; border: 0; overflow: hidden; height: 500px">
</iframe>

Optional Query Parameters

You can add the following optional query parameters to the iframe URL:

• address – A URL-encoded address to search or prefill the wizard.
• mlsId – An MLS listing ID to find and load a report directly.

If a report is found using one of these values, it will load in the iframe. Otherwise, the search wizard opens with the value prefilled.

Example:

<iframe
  id="cmasnap-iframe"
  src="https://app.cmasnap.com/new?embed=true&address=123%20Main%20St"
  scrolling="no"
  style="width: 1px; min-width: 100%; border: 0; overflow: hidden; height: 500px">
</iframe>

Load the Embed Script

The embed script will help resize the iframe to prevent nested scrolling. You can load it and initialize it like so.

<script src="https://app.cmasnap.com/static/js/embed.js"></script>

<script>
  const cmasnapInt = setInterval(() => {
    if (typeof CMAsnap !== 'undefined') {
      new CMAsnap('#cmasnap-iframe');
      clearInterval(cmasnapInt);
    }
  }, 1000);
</script>

Full Example

<iframe
  id="cmasnap-iframe"
  src="https://app.cmasnap.com/new?embed=true&mlsId=ABCD1234"
  scrolling="no"
  style="width: 1px; min-width: 100%; border: 0; overflow: hidden; height: 500px">
</iframe>

<script src="https://app.cmasnap.com/static/js/embed.js"></script>

<script>
  const cmasnapInt = setInterval(() => {
    if (typeof CMAsnap !== 'undefined') {
      new CMAsnap('#cmasnap-iframe');
      clearInterval(cmasnapInt);
    }
  }, 1000);
</script>