Embed the NotaryCentral Customer Experience

NotaryCentral can support an embedded signer experience so customers open your website while the secure NotaryCentral customer flow runs inside an iframe.

What embedding does

Embedding lets you send signers to a page on your own website instead of sending them directly to the NotaryCentral app domain. Your page hosts an iframe, and NotaryCentral loads the correct customer step inside it, such as:

• Identity verification
• Payment or prerequisite checks
• Signing-room entry
• Witness flow
• Signing complete or expired-link pages

Before you start

You need:

• Access to your NotaryCentral account settings.
• A secure page on your website where the iframe will live.
• An HTTPS website URL, such as https://yourdomain.com/notary-signing.
• Permission to edit your website’s HTML, CMS embed block, or developer template.
• A browser and hosting setup that allows camera and microphone access inside iframes.

Step 1: Create a page on your website

Create a dedicated page for signer sessions. Example URLs:

• https://yourdomain.com/signing
• https://yourdomain.com/notarycentral
• https://yourdomain.com/remote-notary-session

Keep this page simple. It should include:

• A clear heading, such as “Join your signing session.”
• A short explanation that the secure session is powered by NotaryCentral.
• The NotaryCentral iframe.
• A fallback message with support contact information.

Step 2: Add the iframe container

Use the sample React/Vite embed app as the reference implementation: NotaryCentral embedded experience sample code. The sample page reads nc_path from the signer-visible URL, uses VITE_IFRAME_BASE_URL as the base URL for the NotaryCentral app, and loads the resulting URL in a full-screen iframe.

The important parts of the sample are:

const setIframeSrcFromNcPath = () => {
  const searchParams = new URLSearchParams(window.location.search)
  const ncPath = searchParams.get('nc_path')

  if (!ncPath) {
    setHasPath(false)
    return
  }

  setHasPath(true)
  const baseUrl = (import.meta.env.VITE_IFRAME_BASE_URL || 'http://localhost:8081').replace(/\/+$/, '')
  const formattedPath = ncPath.startsWith('/') ? ncPath : `/${ncPath}`
  const url = `${baseUrl}${formattedPath}`

  setIframeUrl(url)
  setLoaded(false)
}

useEffect(() => {
  setIframeSrcFromNcPath()

  // Stripe Checkout returns to this parent/embed page with nc_path in the
  // top-level URL. Re-read nc_path on history changes so the iframe is moved
  // to the decoded NotaryCentral confirmation route instead of staying on the
  // pre-payment calendar step.
  window.addEventListener('popstate', setIframeSrcFromNcPath)
  return () => window.removeEventListener('popstate', setIframeSrcFromNcPath)
}, [])

<iframe
  key={iframeUrl}
  src={iframeUrl}
  className={`signing-iframe ${loaded ? 'loaded' : ''}`}
  onLoad={() => setLoaded(true)}
  allow="camera; microphone; display-capture; geolocation; clipboard-read; clipboard-write; fullscreen"
  title="Notary Central Signing Room"
/>

In this setup:

• nc_path comes from NotaryCentral's redirect to your embed page.
• URLSearchParams reads the query string and returns the customer route value.
• VITE_IFRAME_BASE_URL is the NotaryCentral app base URL used for the iframe. In local development, the sample defaults this to http://localhost:8081.
• The sample removes trailing slashes from the base URL, ensures the customer route starts with a slash, combines them, and assigns the combined value to the iframe src.
• If nc_path is missing, the sample shows a secure portal empty state telling the signer to use their unique session link instead of loading an iframe.
• When Stripe returns to your customer-owned embed page after payment, the top-level URL contains nc_path for the calendar confirmation route. The parent page should decode/read nc_path with URLSearchParams and immediately set the iframe src to that NotaryCentral route.

For local development, the iframe base URL may be http://localhost:8081 and your embed page may be http://localhost:5173.

How the redirect URL works

When a signer opens a NotaryCentral invitation link, NotaryCentral sends the signer to the embed page configured in your account. The configured page receives nc_embed=1, and the encoded customer route is passed as nc_path. The sample embed page reads nc_path, combines it with VITE_IFRAME_BASE_URL, and loads that combined URL inside the iframe.

For example:

Original route:
/customer/signing-room/9c3b7145-4b42-4386-82fe-ce735b022d4e/ef22265d-b100-4833-a506-c84a843d0ac5

Embed page:
http://localhost:5173/

Signer-visible URL:
http://localhost:5173/?nc_embed=1&nc_path=%2Fcustomer%2Fsigning-room%2F9c3b7145-4b42-4386-82fe-ce735b022d4e%2Fef22265d-b100-4833-a506-c84a843d0ac5

iframe src:
http://localhost:8081/customer/signing-room/9c3b7145-4b42-4386-82fe-ce735b022d4e/ef22265d-b100-4833-a506-c84a843d0ac5

Step 3: Configure NotaryCentral

Getting started in the app

In NotaryCentral:

1. Log in to the web app.
2. Open Menu.
3. Use the Menu search to look up Embedded customer experience.
4. Open Embedded customer experience. If you are navigating directly, the page path is /search/settings/embed-customer-experience.
5. Review the fields, turn on embedding when your page is ready, and save your settings.

What each field means

The Embedded customer experience page includes these fields:

• Enable embed: Turn this on when you are ready for signer invitation links to redirect to your embedded page. Leave it off while you are still building or testing the page outside of live signer invitations.

• Embed URL: Enter the parent/embed page URL on your website. This is the page where you deploy your embed app, such as the sample React/Vite app from Step 2. Use the full HTTPS page URL in production, for example:

  https://yourdomain.com/signing
  

  For local development, this may be a local page such as:

  http://localhost:5173/
  

  Do not enter iframe code in this field. Do not enter the iframe src value. Do not enter a NotaryCentral /customer/... URL. Also avoid query strings and fragments; NotaryCentral will add nc_embed=1 and nc_path when redirecting a signer.

• Allowed origin (optional): Enter only the origin of the parent page if you want to explicitly allow a parent website origin. The origin is the scheme, host, and optional port, with no path, query string, or fragment. For example:

  https://yourdomain.com
  

  For local development, this may be:

  http://localhost:5173
  

  This should match the origin of the page that hosts the iframe. Do not put the NotaryCentral app origin here unless your parent/embed page is actually hosted on that origin.

Step 4: Share signer links as usual

After embedding is enabled, continue sending signer invitation links from NotaryCentral as usual.

NotaryCentral will still generate secure invitation links. When the signer opens the link, NotaryCentral determines the correct customer step and routes the signer to your embedded page.

Step 5: Test the signer flow

Before sending live customers through the embedded experience:

1. Create a test RON signing.
2. Add yourself as a signer with an email address you can access.
3. Send the signer invitation.
4. Open the invitation link in a private/incognito browser window.
5. Confirm that your website opens.
6. Confirm that the NotaryCentral customer flow loads inside the iframe.
7. Run the system check.
8. Confirm camera and microphone permissions work.
9. Continue through identity verification or prerequisite screens.
10. Confirm the signer can enter the signing room.

Required iframe permissions

For the best experience, the iframe should allow:

allow="camera; microphone; fullscreen; clipboard-write; payment"

Camera and microphone access are required for RON sessions. Payment permission may be required if your flow collects payment before entry.

Website requirements

Your website should:

• Use HTTPS.
• Avoid blocking third-party iframes.
• Avoid restrictive iframe sandbox settings.
• Allow enough vertical space for the signing-room UI.
• Work on desktop, tablet, and mobile screen sizes.
• Include a fallback support message outside the iframe.

If you use an iframe sandbox

If your website builder adds a sandbox attribute, make sure it does not block the NotaryCentral experience. You may need permissions such as:

sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-downloads allow-camera allow-microphone"

Some website builders do not expose sandbox controls. If camera or microphone access fails, contact your website provider or use a dedicated page where iframe permissions can be configured.

Recommended page copy

We recommend not including any copy above or below the iframe. The sample app handles edge cases and provides fallback messaging.

Troubleshooting

The iframe does not load

Check that:

• Your embedded URL is saved correctly in NotaryCentral.
• Your website page is published.
• The page uses HTTPS.
• Browser extensions are not blocking iframes.

Camera or microphone does not work

Check that:

• The iframe has allow="camera; microphone".
• The browser has granted camera and microphone permissions.
• The signer is not using a browser that blocks media access in embedded frames.
• The signer is not inside another embedded browser, such as an email app preview.

The signer sees the wrong page

Use the original NotaryCentral invitation link. Do not manually copy internal iframe URLs. The invitation link tells NotaryCentral which signer, signing room, and prerequisite step to load.

Payment does not open correctly

Some payment flows may need a top-level browser redirect. If payment is required before the session, complete payment before entering the iframe or follow the payment instructions shown by NotaryCentral.

Best practices

• Use a dedicated embed page instead of embedding the flow on a busy marketing page.
• Keep the page free of popups or chat widgets that could cover the signing room.
• Test on Chrome, Safari, iOS, and Android.
• Send test invitations before enabling the flow for all signers.
• Keep your normal NotaryCentral invitation workflow unchanged.