<Waitlist /> component
In Waitlist mode, users can register their interest in your app by joining a waitlist. This mode is ideal for apps in early development stages or those wanting to generate interest before launch. Learn more about additional features available in Waitlist mode.
The <Waitlist /> component renders a form that allows users to join for early access to your app.
Enable Waitlist mode
Before using the <Waitlist /> component, you must enable Waitlist mode in the Clerk Dashboard:
- In the Clerk Dashboard, navigate to the Restrictions page.
- Under the Sign-up modes section, enable Waitlist.
Properties
All props are optional.
- Name
appearance- Type
Appearance | undefined- Description
Optional object to style your components. Will only affect Clerk components and not Account Portal pages.
- Name
afterJoinWaitlistUrl- Type
string- Description
Full URL or path to navigate to after joining the waitlist.
- Name
signInUrl- Type
string- Description
Full URL or path to the sign in page. Use this property to provide the target of the 'Sign In' link that's rendered. It's recommended to use the environment variable instead.
The following example includes a basic implementation of the <Waitlist /> component. You can use this as a starting point for your own implementation.
import { Waitlist } from '@clerk/nextjs'
export default function WaitlistPage() {
return <Waitlist />
}import { Waitlist } from '@clerk/clerk-react'
export default function WaitlistPage() {
return <Waitlist />
}Usage with JavaScript
The following methods available on an instance of the Clerk class are used to render and control the <Waitlist /> component:
The following examples assume that you followed the quickstart to add Clerk to your JavaScript app.
mount
Render the <Waitlist /> component to an HTML <div> element.
function mountWaitlist(node: HTMLDivElement, props?: WaitlistProps): void- Name
node- Type
HTMLDivElement- Description
The
<div>element used to render in the<Waitlist />component
- Name
props?- Type
WaitlistProps- Description
The properties to pass to the
<Waitlist />component
import { Clerk } from '@clerk/clerk-js'
// Initialize Clerk with your Clerk Publishable Key
const clerk = new Clerk('YOUR_PUBLISHABLE_KEY')
await clerk.load()
document.getElementById('app').innerHTML = `
<div id="waitlist"></div>
`
const waitlistDiv = document.getElementById('waitlist')
clerk.mountWaitlist(waitlistDiv)unmount
Unmount and run cleanup on an existing <Waitlist /> component instance.
function unmountWaitlist(node: HTMLDivElement): void- Name
node- Type
HTMLDivElement- Description
The container
<div>element with a rendered<Waitlist />component instance
import { Clerk } from '@clerk/clerk-js'
// Initialize Clerk with your Clerk Publishable Key
const clerk = new Clerk('YOUR_PUBLISHABLE_KEY')
await clerk.load()
document.getElementById('app').innerHTML = `
<div id="waitlist"></div>
`
const waitlistDiv = document.getElementById('waitlist')
clerk.mountWaitlist(waitlistDiv)
// ...
clerk.unmountWaitlist(waitlistDiv)openWaitlist()
Opens the <Waitlist /> component as an overlay at the root of your HTML body element.
function openWaitlist(props?: WaitlistProps): void- Name
props?- Type
WaitlistProps- Description
The properties to pass to the
<Waitlist />component
import { Clerk } from '@clerk/clerk-js'
// Initialize Clerk with your Clerk Publishable Key
const clerk = new Clerk('YOUR_PUBLISHABLE_KEY')
await clerk.load()
document.getElementById('app').innerHTML = `
<div id="waitlist"></div>
`
const waitlistDiv = document.getElementById('waitlist')
clerk.openWaitlist(waitlistDiv)closeWaitlist()
Closes the waitlist overlay.
function closeWaitlist(): voidimport { Clerk } from '@clerk/clerk-js'
// Initialize Clerk with your Clerk Publishable Key
const clerk = new Clerk('YOUR_PUBLISHABLE_KEY')
await clerk.load()
document.getElementById('app').innerHTML = `
<div id="waitlist"></div>
`
const waitlistDiv = document.getElementById('waitlist')
clerk.openWaitlist(waitlistDiv)
// ...
clerk.closeWaitlist(waitlistDiv)Customization
To learn about how to customize Clerk components, see the customization guide.
Feedback
Last updated on