> ## Documentation Index
> Fetch the complete documentation index at: https://docs.yorlet.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Embed a qualification form

> Add a Yorlet qualification form to your website without putting a secret key in the browser.

export const APIBadge = () => {
  return <div style={{
    display: 'inline-block',
    backgroundColor: 'rgb(var(--primary-light))',
    color: '#ffffff',
    padding: '1px 4px',
    borderRadius: '.375rem',
    borderColor: 'rgb(var(--gray-200))',
    borderWidth: '1px',
    position: 'relative',
    top: '-2px',
    marginLeft: '4px',
    fontSize: '11px',
    fontWeight: 700,
    letterSpacing: '0.05em',
    lineHeight: '11px'
  }}>
      API
    </div>;
};

This guide shows you how to embed a qualification configuration on your own website using [@yorlet/js](/development/libraries/yorletjs) or [@yorlet/react](/development/libraries/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](/development/integrations/leads/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](/leads/qualification-configurations) with a hosted form URL.
* A [publishable key](/development/api-keys) from your account.

<Warning>
  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.
</Warning>

## Get the form token

To find the token, follow these steps:

1. Open [Qualification configurations](https://dashboard.yorlet.com/leads/qualification-configurations).
2. 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.

<Tabs>
  <Tab title="JavaScript">
    ```html theme={"theme":"dracula"}
    <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:

    ```html theme={"theme":"dracula"}
    <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>
    ```
  </Tab>

  <Tab title="React">
    ```tsx theme={"theme":"dracula"}
    import { QualificationForm, YorletProvider } from '@yorlet/react';

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

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`.

```js theme={"theme":"dracula"}
yorlet.qualification.mount('#enquire', {
  token: 'qct_...',
  email: 'jane@example.com',
  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 <a href="/api/leads/leads-enquiries/object" target="_blank">enquiry<APIBadge /></a> 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](/development/libraries/yorletjs) — install options and the full `mount` API
* [Yorlet React](/development/libraries/react) — `YorletProvider` and `QualificationForm`
* [Create an enquiry](/development/integrations/leads/create-an-enquiry) — server-side capture when you already have the answers
* [Qualification configurations](/leads/qualification-configurations) — the questions the form asks