Embed the NotaryCentral Booking Calendar

Embed the NotaryCentral booking calendar on your website. Customers choose services and appointments on your page, open secure hosted checkout in the full browser window when payment is required, and return to your website for confirmation.

Stripe-hosted Checkout must open outside the calendar iframe. Stripe also advises against placing its Embedded Checkout component inside another iframe. See Stripe's embedded checkout guidance.

Step 1: Configure Settings

Before embedding the booking portal on your website, you must approve your parent website's domain in your NotaryCentral settings. This is a critical security step that configures the Content Security Policy (CSP) and allows your site to frame the calendar without browser blocks.

Getting started in the app

In app.notarycentral.org:

Open in app: https://app.notarycentral.org/search/settings/embed-customer-experience

1. Open the NotaryCentral app on your desktop or mobile device.
2. Tap or click on the Menu.
3. Search for Embedded customer experience settings.
4. If you are navigating directly, the page path is /search/settings/embed-customer-experience.
5. Scroll down to the Booking/calendar experience section.

What each field means

Enable embed: Toggle this switch to ON to allow NotaryCentral calendar flows to be loaded inside an iframe.

Booking embedder page URL: Enter the exact page URL where your embedded calendar iframe will live. Use the full HTTPS page URL in production, for example:

https://yourdomain.com/book

For local development, this may be:

http://localhost:5175/

Do not add query strings or trailing fragments in this settings field.

Booking allowed origin: Enter only the origin of your 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:5175

This should match the origin of the page that hosts the iframe.

Important: All URLs must include the http:// or https:// protocol. Do not add credentials or trailing fragments in these settings fields.

Select Save to apply your booking/calendar embedding settings.

Step 2: Add the booking embed to your website

In WordPress, add a Custom HTML block to the published booking page. Replace both occurrences of YOUR-SUBDOMAIN with your NotaryCentral calendar subdomain. Use one copy per page.

<iframe
  id="nc-booking"
  data-calendar-url="https://YOUR-SUBDOMAIN.cal.notarycentral.org/"
  title="Book a NotaryCentral appointment"
  style="width:100%;height:800px;min-height:650px;border:0"
  allow="camera; microphone; geolocation"
></iframe>
<script
  defer
  src="https://YOUR-SUBDOMAIN.cal.notarycentral.org/booking-embed.js"
></script>

The NotaryCentral script initializes the calendar with embed=1 and the host page's parentOrigin. It checks the origin and iframe source of incoming messages, resizes the calendar, and opens approved Stripe or Square checkout URLs in the full browser window. It does not collect card details or initiate a charge.

The parent script must run on your WordPress page. WordPress permissions, hosting plans, and security plugins can strip script tags. Inspect the published page after saving. If scripts are removed, have your site administrator enqueue the same script through your theme or a site plugin. A plain iframe still offers a Continue to Secure Payment link, but automatic payment navigation requires the parent script.

If you use a Content Security Policy, permit your calendar origin in script-src and frame-src. The iframe allow="payment" permission does not make Stripe-hosted Checkout embeddable and does not replace the payment handoff.

Step 3: Verify the complete booking flow

Use a test environment and Stripe test mode before enabling the flow for customers:

1. Open the published booking page and confirm services and times load.
2. Submit one test booking requiring payment. The full browser window should navigate to Stripe Checkout.
3. Complete a test payment and verify the browser returns to the configured booking embedder page with the confirmation inside the calendar.
4. Verify the booking's payment status in NotaryCentral. Reaching a return page alone is not proof of payment.
5. Test a plain iframe or unavailable parent script: checkout must remain available through Continue to Secure Payment, without loading inside the iframe or creating a second booking.

Payment handoff for custom integrations

If you build your own host integration instead of loading booking-embed.js:

• Add embed=1 and an explicit parentOrigin to the calendar URL.
• Listen for notarycentral.calendar.paymentStarted with source: 'notarycentral' and payload.paymentUrl.
• Verify event.origin matches your calendar origin and event.source matches your iframe's contentWindow. Validate the payment URL against approved HTTPS processor hosts.
• Navigate the host page to the validated checkout URL. An optional notarycentral.calendar.paymentStarted.ack message acknowledges receipt, not successful navigation.
• On return, forward the validated nc_path confirmation route to the same calendar. Preserve its nested session_id query parameter.

The supplied bridge supports checkout.stripe.com, buy.stripe.com, square.link, connect.squareup.com, and connect.squareupsandbox.com. Custom payment domains need an explicit bridge update; do not broadly accept arbitrary redirect destinations.

Troubleshooting

Open these pages in Notary Central

• https://app.notarycentral.org/search/settings/embed-customer-experience
• https://app.notarycentral.org/search/settings/scheduling/domain
• https://app.notarycentral.org/search/settings/scheduling/online-payment

More Business Suite guides

Return to Business Suite for related feature guides and setup resources.