Integration Guide

The Snappt Embedded SDK lets you launch the Snappt applicant verification flow directly inside your application as a modal overlay. No redirects, no popups, just a seamless iframe experience.

Prerequisites

Before integrating, you will need the following from your Snappt account team:

Your Client ID is bound to an API key that controls which companies and properties you can access. Snappt validates every SDK request against this configuration. If your key is scoped to a single property, only that property can be used.

Domain Allowlisting

Your Client ID is configured with a list of allowed domains. The SDK will only load on pages served from those domains. Snappt validates the request's Origin or Referer header against your allowlist.

Allowed domains support:

• Exact origins, for example https://apply.yourcompany.com
• Wildcard subdomains, for example *.yourcompany.com (matches https://apply.yourcompany.com, https://staging.yourcompany.com, and so on)

Contact your Snappt account team to configure your allowed domains.

1. Add the Script

Add the following <script> tag anywhere in your HTML page. This loads the Snappt SDK and makes the global Snappt object available. No other dependencies are required.

<script src="https://enterprise-api.snappt.com/embedded/v1.0.0.js?iframe=true&clientId=YOUR_CLIENT_ID"></script>

The script will not load if the clientId is missing, inactive, or if the page's origin is not in your allowed domains list. Check the browser console for errors if the SDK fails to initialize.

2. Open the Verification Flow

Call Snappt.portal.show() to launch the applicant verification flow in a modal overlay. You must provide companyShortId and propertyShortId to identify the property.

var instance = Snappt.portal.show({
  companyShortId: 'YOUR_COMPANY_ID',
  propertyShortId: 'YOUR_PROPERTY_ID',
});

Pre-filling Applicant Data (Optional)

You can pass applicant information so they don't have to re-enter it:

var instance = Snappt.portal.show({
  companyShortId: 'YOUR_COMPANY_ID',
  propertyShortId: 'YOUR_PROPERTY_ID',
  email: '[email protected]',
  firstName: 'Jane',
  lastName: 'Doe',
  phone: '5551234567',
});

Correlating With Your System (Recommended)

To link Snappt's applicant back to a record in your own system, typically when consuming webhooks, pass an externalId. Snappt stores it on the applicant and echoes it back on every outbound webhook payload, so you do not need to maintain a separate mapping. You can also attach arbitrary structured context via externalMetadata, for example unit number, lead source, or internal flags.

Snappt.portal.show({
  companyShortId: 'YOUR_COMPANY_ID',
  propertyShortId: 'YOUR_PROPERTY_ID',
  email: '[email protected]',
  externalId: 'YOUR-INTERNAL-APP-ID-12345',
  externalMetadata: {
    unitNumber: '101A',
    leadSource: 'Website',
  },
});

Available Options

3. Listen for Completion and Close Events

The show() call returns an instance object. Use addEventListener('close', callback) to be notified when the modal closes. Your callback receives an event object with a type field indicating what happened:

instance.addEventListener('close', function (event) {
  if (event.type === 'application-complete') {
    // The applicant finished the flow.
    showConfirmation();
  } else {
    // The applicant closed the modal without completing.
    showResumePrompt();
  }
});

You do not need to poll for results. Once the applicant completes the flow, Snappt automatically returns a completion status to your PMS to unblock application submission, and delivers the result to your configured webhooks.

Receiving Results Server-Side (Webhooks)

The browser-side close event tells you only whether the applicant finished. It does not carry applicant data. To receive results and link them back to your own records, configure a Snappt webhook. Every webhook payload includes:

Pass externalId when you launch the modal, then key off it in your webhook handler.

4. Programmatic Control

You can control the modal directly through the instance:

instance.hide();  // Close the modal
instance.show();  // Re-open the modal

You can also remove event listeners:

function onClose(event) {
  console.log('Modal closed:', event.type);
}

instance.addEventListener('close', onClose);

// Later, if you no longer need the listener:
instance.removeEventListener('close', onClose);

Full Example

<button id="apply-btn">Start Application</button>

<script src="https://enterprise-api.snappt.com/embedded/v1.0.0.js?iframe=true&clientId=YOUR_CLIENT_ID"></script>

<script>
  document.getElementById('apply-btn').addEventListener('click', function () {
    var instance = Snappt.portal.show({
      companyShortId: 'YOUR_COMPANY_ID',
      propertyShortId: 'YOUR_PROPERTY_ID',
      email: '[email protected]',
      firstName: 'Jane',
      lastName: 'Doe',
      phone: '5551234567',
      externalId: 'YOUR-INTERNAL-APP-ID-12345',
      externalMetadata: { unitNumber: '101A', leadSource: 'Website' },
    });

    instance.addEventListener('close', function (event) {
      if (event.type === 'application-complete') {
        alert('Thank you! Your verification is complete.');
      } else {
        alert('You can resume your application at any time.');
      }
    });
  });
</script>

Error Handling

If the SDK cannot generate an applicant link (for example, invalid property, disabled property, or access denied), an error message will be displayed inside the modal. Common errors:

Troubleshooting