MRS Service Finder — Embed in DMVEz Customer Portal

The URL

Embed this URL in an iframe. The finder is already chrome-free (no header / no footer), transparent background, and configured to skip lead capture and pre-fill from URL parameters.

1. URL parameters (all optional)

Pass whatever DMVEz already knows about the customer. The finder will pre-fill the relevant fields and tag the GHL contact for clean attribution.

2. Iframe snippet

Drop this anywhere in the DMVEz portal. Replace the USER_* placeholders with the values you have on the customer at render time.

Copy<iframe
  id="mrs-finder"
  src="https://quiz.mtregistrationservices.com/find-mrs-embed?email=USER_EMAIL&first_name=USER_FIRST&last_name=USER_LAST&phone=USER_PHONE&dmvez_customer_id=USER_ID"
  style="width:100%; border:0; min-height:600px; display:block;"
  allow="payment *; clipboard-read; clipboard-write"
  referrerpolicy="origin"
  title="Add a Montana registration">
</iframe>

3. PostMessage listener (required)

The iframe posts two events to the parent window. Wire this listener once on the portal page so the iframe grows with content and so checkout escapes the iframe cleanly.

Copy<script>
window.addEventListener('message', function (e) {
  // Only trust messages from our finder origin.
  if (e.origin !== 'https://quiz.mtregistrationservices.com') return;
  var data = e.data || {};

  // (1) Auto-resize the iframe to fit content — fires on every step change.
  if (data.type === 'finder-resize' && typeof data.height === 'number') {
    var f = document.getElementById('mrs-finder');
    if (f) f.style.height = (data.height + 40) + 'px';
  }

  // (2) Customer finished the funnel — send the DMVEz portal top window to
  // DMVEz checkout. Don't nest a checkout iframe inside this iframe — Stripe
  // 3DS popups break in nested iframes.
  if (data.type === 'finder-navigate' && data.url) {
    window.location.href = data.url;
  }
});
</script>

4. End-to-end example (React)

If the DMVEz portal is React-based, this is the same thing wrapped as a component. customer is whatever shape your portal already has.

Copyimport { useEffect, useRef } from 'react';

const FINDER_ORIGIN = 'https://quiz.mtregistrationservices.com';

export function MrsFinderEmbed({ customer }) {
  const ref = useRef(null);

  useEffect(() => {
    function onMessage(e) {
      if (e.origin !== FINDER_ORIGIN) return;
      const data = e.data || {};
      if (data.type === 'finder-resize' && typeof data.height === 'number' && ref.current) {
        ref.current.style.height = (data.height + 40) + 'px';
      }
      if (data.type === 'finder-navigate' && data.url) {
        window.location.href = data.url;
      }
    }
    window.addEventListener('message', onMessage);
    return () => window.removeEventListener('message', onMessage);
  }, []);

  const params = new URLSearchParams({
    email:             customer.email      || '',
    first_name:        customer.firstName  || '',
    last_name:         customer.lastName   || '',
    phone:             customer.phone      || '',
    dmvez_customer_id: customer.id         || '',
  });

  return (
    <iframe
      ref={ref}
      src={`${FINDER_ORIGIN}/find-mrs-embed?${params.toString()}`}
      style={{ width: '100%', border: 0, minHeight: 600, display: 'block' }}
      allow="payment *; clipboard-read; clipboard-write"
      referrerPolicy="origin"
      title="Add a Montana registration"
    />
  );
}

5. What happens when the customer hits checkout

1. Customer completes the finder steps inside the iframe.
2. Finder creates a pending order via DMVEz API (server-side, no client work).
3. Finder posts { type: 'finder-navigate', url: '<DMVEz checkout URL>' } to the parent (DMVEz portal).
4. Your listener navigates the top window to that URL — the iframe and the portal page are replaced by DMVEz checkout.
5. Stripe payment runs in full viewport (no nested iframes, 3DS popups work).
6. After payment, DMVEz handles the post-checkout redirect per its own config.

6. Browser security notes

• CORS: Not relevant — the iframe is its own document, not a fetch. No headers needed on the DMVEz side.
• X-Frame-Options / CSP: The /find-mrs-embed endpoint intentionally sends no X-Frame-Options header, so any origin can iframe it. If DMVEz wants to lock it down later, request a frame-ancestors CSP allowlist from Tim.
• Cookies: The finder uses localStorage (not cookies) for session state. Safari 17+ partitions storage per top-level site, which is fine — each DMVEz user gets their own finder session.
• Origin check: Always verify e.origin === 'https://quiz.mtregistrationservices.com' in your message handler. The snippets above already do.

7. Verification checklist

Run these once in a DMVEz portal staging environment before going live.

• Iframe loads at /find-mrs-embed with no header or footer visible.
• Background is transparent — DMVEz portal chrome shows through.
• First screen is "Choose your vehicle type" — not a path picker or email form.
• With ?email=test@example.com, the email field is pre-filled at the order step.
• Iframe height grows as you advance through steps (no internal scrollbar).
• Completing a test order sends the parent window to DMVEz checkout (not a nested iframe).
• Test purchase shows up in GHL with the source=dmvez_portal tag.

Who to contact

Engineering reference: src/quiz-platform/widget/standalone-finder-mrs-embed.html · route src/quiz-platform/server.js#/find-mrs-embed · commit b096cf75