Embed a qualification form

This guide shows you how to embed a qualification configuration on your own website using @yorlet/js or @yorlet/react. The SDK iframes the hosted form, so the lead fills in their details on your listing page and a new enquiry appears in your pipeline. If you would rather collect answers on your own server, use Create an enquiry with a secret key.

Prerequisites

Before you embed a form, ensure you have:

The Leads product enabled on your account.
A qualification configuration with a hosted form URL.
A publishable key from your account.

Do not put a secret key in your website, a mobile app, or a public repository. The embed needs a publishable key (pk_…) and the hosted form token (qct_…). The publishable key only unlocks the form for your account. It cannot create enquiries on its own.

Get the form token

To find the token, follow these steps:

Open Qualification configurations.
Copy the value from the Form token column, or open the configuration and copy Form token from the details page.

The token starts with qct_. The configuration object id (lqc_…) will not work. You can also right-click a row and choose Copy form token.

Add the form to a page

Install the SDK and mount the form.

JavaScript
React

<div id="enquire"></div>

<script type="module">
  import { Yorlet } from '@yorlet/js';

  const yorlet = Yorlet.init({
    publishableKey: 'pk_...',
  });

  yorlet.qualification.mount('#enquire', {
    token: 'qct_...',
    onComplete: () => {
      console.log('Enquiry submitted');
    },
  });
</script>

Or load the browser bundle:

<div id="enquire"></div>
<script src="https://unpkg.com/@yorlet/js/dist/yorlet.js"></script>
<script>
  const yorlet = Yorlet.init({ publishableKey: 'pk_...' });
  yorlet.qualification.mount('#enquire', { token: 'qct_...' });
</script>

import { QualificationForm, YorletProvider } from '@yorlet/react';

export function Enquire() {
  return (
    <YorletProvider publishableKey="pk_...">
      <QualificationForm
        token="qct_..."
        onComplete={() => {
          console.log('Enquiry submitted');
        }}
      />
    </YorletProvider>
  );
}

The iframe grows with the form. You do not need to set a height.

Prefill and completion

Pass email to send a known address through to the form as prefilled_email. Pass unit with the listing’s unit id so the enquiry records that property. When the lead submits, onComplete fires. If the configuration is set to redirect after completion, the event includes redirectUrl — navigate the parent page yourself. The iframe will not change window.top.

yorlet.qualification.mount('#enquire', {
  token: 'qct_...',
  email: '[email protected]',
  unit: 'unit_...',
  onComplete: ({ redirectUrl }) => {
    if (redirectUrl) {
      window.location.assign(redirectUrl);
    }
  },
});

Call unmount() on the handle if you need to take the form off the page.

What you get in Yorlet

A successful submit creates an enquiry against that configuration, with the lead’s contact details and answers. If the same person submits the same form again within seven days, Yorlet updates that enquiry instead of creating another. When those submits include different unit values, Yorlet adds each property to the same enquiry. Yorlet scores the answers in the background, the same as a hosted form opened in a new tab. You do not need leads.enquiries.write on a browser key — the hosted page uses a key scoped to that one configuration. To restrict which websites can embed the form, set Allowed websites on the configuration. Leave it blank to allow any website. If a form token is leaked, open the configuration, use the overflow menu (•••), and choose Roll form token. Hosted URLs and embed snippets must then be updated.

Next steps

Yorlet.js reference — install options and the full mount API
Yorlet React — YorletProvider and QualificationForm
Create an enquiry — server-side capture when you already have the answers
Qualification configurations — the questions the form asks

Developer tools

Essentials

Integrations

Platforms

Prerequisites

Get the form token

Add the form to a page

Prefill and completion

What you get in Yorlet

Next steps

​Prerequisites

​Get the form token

​Add the form to a page

​Prefill and completion

​What you get in Yorlet

​Next steps

Prerequisites

Get the form token

Add the form to a page

Prefill and completion

What you get in Yorlet

Next steps