Validate your SaaS idea while building an audience

The fastest way to validate market demand for a SaaS? A waitlist.

When used correctly, a waitlist isn't just a sign-up form - it's a powerful market research tool. By allowing potential users to signal their interest by registering their email, you create a valuable mechanism to validate your concept before investing significant time and resources.

Integrating your list with a communication tool such as a newsletter platform opens a direct channel with future customers to share product updates, solicit feedback, and build up anticipation for your launch.

In this article, you’ll learn how to use the Clerk drop-in waitlist component and integrate it with Loops.

What is Clerk?

Clerk is a user management platform designed to get authentication integrated into your application as quickly and easily as possible. This includes drop-in UI components for common user management requirements such as sign-in/sign-up pages, social sign on providers, and user profiles.

One such is the Waitlist component that renders a form where potential customers can enter their email addresses:

Upon entering their email address, it will be available in the Clerk dashboard under the Waitlist tab where you can quickly invite interested users to join your platform with a single click.

Clerk offers webhooks as a way to integrate with external systems. When email addresses are captured, Clerk offers a webhook event that can be used to inform another system that someone has entered their email into the waitlist.

The other system simply needs an HTTP endpoint designed to parse the webhook event data.

Loops offers an integration with Clerk by providing a webhook receiver endpoint that will automatically parse the event data and add the email address to your audience. It can also receive events when a user updates their info so that your list always contains the latest information about your users.

This integration combines the simplicity of Clerk's drop-in waitlist component with the flexibility of Loops's audience management.

How to follow along

While the process described above is the same regardless of the chosen framework, the remainder of this article will use Next.js. You may use your own Next.js application with Clerk, bootstrap one using our quickstart guide, or clone the article-1 branch from the repository for Kozi, an open-source project & knowledge management tool.

You’ll also need a domain name and a production Clerk instance configured with the appropriate DNS records. If you do not already and would still like to follow along, refer to our guide on deploying your application to production before reading on.

Why do I need a production Clerk instance?

When you first set up a Clerk application, we automatically create a development instance for you to quickly start integrating Clerk with your application. These development instances have a more relaxed security posture to make local development easier, such as not requiring HTTPS connections and using shared OAuth credentials for single sign-on providers across the Clerk platform.

Production instances are more secure and do not have the same security exceptions, but require several DNS records so that Clerk can handle authentication on your domain. This approach avoids cross-domain authentication which could increase the risk of a cross-site scripting attack.

Adding the waitlist component

When added to a page, the <Waitlist /> component renders a form that matches the style of our other drop-in components. The following code snippet shows what would be required to add it to the /waitlist path of a Next.js application, along with a few Tailwind classes to center the form on the page:

import { Waitlist } from '@clerk/nextjs'



function WaitlistPage() {

  return (

    <div className="flex h-screen items-center justify-center">

      <Waitlist />

    </div>

  )

}



export default WaitlistPage

Integrating with Loops

Over in Loops, navigate to your team settings, expand the Integrations node, and select Clerk. You can then enable the integration which will then show an Endpoint URL which Clerk can communicate with.

Copy this URL as you’ll need it in the next step.

Head back to the Clerk dashboard for your application and navigate to Configure, then select Webhooks from the left sidebar. Click Add Endpoint.

Paste in the URL from Loops into the Endpoint URL field. In the Subscribe to events section, type in “waitlist” and check both options. You can also check user.created and user.updated as they are supported in Loops, but aren’t necessary for this guide. Once done, scroll to the bottom and click Create.

After creating the endpoint, locate the Signing Secret in the lower right of the field. Click the eye icon to show the secret and copy the value.

Back in Loops, paste the signing secret into the Signing Secret field, toggle on the events you selected in Clerk, and click Save at the bottom of the form.

And thats it! Going forward, anyone who enters their email address into your waitlist form will automatically be added to your mailing list in Loops.

Conclusion

By integrating the Clerk <Waitlist /> component with Loops, you can create a powerful feedback loop with your potential customers as the development of your application progresses.

While this article used Next.js to demonstrate how the waitlist component renders on a page, this component is available to many of our SDKs, including React, Vue.js, Astro, and others.