Yorlet React

@yorlet/react wraps @yorlet/js so you can drop a qualification form into a React tree. The form still iframes the hosted page — you never put a secret key in the browser.

Install

npm install @yorlet/react @yorlet/js

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

Use a publishable key (pk_…) with the form token. Do not put a secret key or restricted key in the website. The publishable key only unlocks the hosted form for your account — it cannot create enquiries on its own.

Embed a qualification form

Copy the form token from a qualification configuration — it is shown in the Form token column and on the configuration’s details page. It is not the configuration object id (lqc_…).

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

export function Enquire() {
  return (
    <YorletProvider publishableKey="pk_...">
      <QualificationForm
        token="qct_..."
        email="[email protected]"
        onReady={() => {
          console.log('Form is ready');
        }}
        onComplete={(event) => {
          if (event.redirectUrl) {
            window.location.assign(event.redirectUrl);
          }
        }}
      />
    </YorletProvider>
  );
}

Unmounting the component removes the iframe. You do not need to call unmount() yourself.

`QualificationForm` props

Prop	Type	Description
`token`	string	Hosted form token. Must start with `qct_`
`email`	string	Optional email passed through to the form
`unit`	string	Optional unit id (`unit_…`) for the listing this form is on
`publishableKey`	string	Account publishable key. Required when used without `YorletProvider`
`origin`	string	Only needed when testing. Hosted-app origin. Overrides `YorletProvider` when both are set
`onReady`	function	Called when the hosted form has painted
`onResize`	function	Called with the iframe height in pixels whenever the form resizes
`onComplete`	function	Called when the lead submits. Receives `{ redirectUrl }` when the configuration is set to redirect after completion

Any other props are passed through to the container div.

`YorletProvider`

Wrap a tree of forms that share the same publishable key. The provider is optional if you pass publishableKey on QualificationForm.

<YorletProvider publishableKey="pk_...">
  <QualificationForm token="qct_..." />
</YorletProvider>

useYorlet() returns the client created by the nearest provider.

Testing against a local hosted app

You do not need origin in production. YorletProvider and QualificationForm already load the form from the production hosted app. Pass origin only when you are testing against a local frontend-app:

<YorletProvider publishableKey="pk_test_..." origin="http://localhost:3000">
  <QualificationForm token="qct_..." />
</YorletProvider>

What happens after submit

The lead’s answers are stored on an enquiry in your pipeline. If the same person submits the same form again within seven days, Yorlet updates that enquiry instead of creating another. Pass unit on a listing page so the enquiry records that property. Further submits from the same person add more properties to the same enquiry. You do not need to call the Enquiries API from the page. If you want to send them somewhere else after they finish, handle onComplete — the iframe will not navigate the parent page itself. For a full walkthrough, see Embed a qualification form.

Developer tools

Essentials

Integrations

Platforms

Install

Embed a qualification form

`QualificationForm` props

`YorletProvider`

Testing against a local hosted app

What happens after submit

​Install

​Embed a qualification form

​QualificationForm props

​YorletProvider

​Testing against a local hosted app

​What happens after submit

Install

Embed a qualification form

`QualificationForm` props

`YorletProvider`

Testing against a local hosted app

What happens after submit