Documentation

Log in Sign up
Waitlister logo
Waitlister

Features

Thank-You Page Customization

Custom thank-you page example

The thank-you page is the screen users see after successfully joining your waitlist. This is a critical moment in the user journey — your potential customer has just taken action and is highly engaged. Waitlister lets you customize this success page to maximize impact and encourage referrals.

Advanced thank-you page features are available on the Launch plan and higher.

Benefits of a Custom Thank-You Page

A well-designed thank-you page can significantly improve your waitlist's performance.

  1. Reinforce brand identity: Continue your brand experience with consistent styling and messaging
  2. Encourage referrals: Motivate new sign-ups to share your waitlist with friends
  3. Gamify the experience: Showcase points and leaderboards to drive engagement
  4. Set expectations: Clearly communicate what happens next
  5. Boost engagement: Add social links and tasks to connect with users on other platforms
  6. Celebrate the moment: Create a positive, memorable experience that builds excitement

User Experience Design

Expandable Sections

The thank-you page features an organized layout with expandable content sections.

  • Referral Section: Share links and social buttons in a collapsible card
  • Social Tasks: Follow your social media accounts to earn points
  • Leaderboard: See top referrers and competitive rankings
  • Social Links: Quick access to your company's social profiles
  • Stats Overview: Position, points, and referral count at a glance

Mobile Optimization

  • Responsive design across all screen sizes
  • Touch-friendly buttons and interactions
  • Optimized loading performance
  • Smooth transitions and animations

Accessing the Thank-You Page Editor

To customize your thank-you page:

  1. Navigate to your waitlist dashboard
  2. On the "Overview" page, click the highlighted value below "THANK-YOU PAGE"
  3. Use the sidebar to edit different sections of the page
  4. Preview changes in real-time

Thank-you page editor

Customization Sections

The thank-you page editor is organized into focused sections.

Style Settings

Control the visual appearance of your thank-you page.

  • Show logo: Toggle your product logo display at the top
  • Background color: Set custom background colors with color picker
  • Typography:
    • Choose separate fonts for titles and body text
    • Support for Google Fonts and system fonts
  • Show confetti: Enable celebratory confetti animation on page load

Content Settings

Customize the main messaging and navigation.

  • Title: Set the main headline (e.g., "You're on the list!")
  • Description: Add explanatory text below the title
  • Show return button: Toggle navigation back to your site
    • Button text automatically adjusts based on origin
    • "Return to YOUR-PRODUCT-NAME" or "Return to Waitlister"

Stats Section

Display user status and progress information.

  • Toggle entire section: Show or hide all stats elements
  • Show position: Display user's current waitlist position
  • Show points: Display user's current point total
  • Show referral count: Display successful referrals made

Referral Section

Encourage sharing with customizable referral tools.

  • Toggle entire section: Enable or disable referral features
  • Title & Description: Custom messaging for the referral section
  • Show share link: Display user's unique referral link with copy button
  • Share platforms: Select social sharing buttons to display:
    • X (Twitter)
    • Facebook
    • Instagram
    • LinkedIn
    • WhatsApp
    • Telegram
    • Email

Social Follow Tasks

Users can earn points by following your social media accounts.

  • Toggle social tasks: Enable point-earning social follows
  • Title & Description: Custom messaging for social tasks section
  • Platform Configuration: Set up accounts for:
    • Facebook: Enter your Facebook page name
    • X (Twitter): Enter your X username
    • Instagram: Enter your Instagram username
    • LinkedIn: Enter your company name
  • Point Integration: Works with your referral program's social task points
  • One-Click Actions: Users click "Follow" and get redirected to your profiles
  • Completion Tracking: Visual feedback shows completed tasks

Note: Points are awarded when users click the follow buttons, not by verifying actual follows.

Leaderboard

Create competition with user rankings.

  • Toggle leaderboard: Show or hide competitive rankings
  • Title & Description: Custom messaging for the leaderboard section
  • Top users count: Choose how many top users to display (3-20)
  • Real-time updates: Live position updates as users earn points

Display your company's social media profiles.

  • Toggle entire section: Show or hide social links
  • Section label: Custom text (e.g., "Follow us")
  • Platform links: Add usernames for:
    • Facebook
    • X (Twitter)
    • Instagram
    • LinkedIn
    • Discord

Custom CSS

Full control over styling with custom CSS.

  • CSS Variables: Override any color on the page using --ty-* variables — no !important needed
  • Custom styling: Add any CSS to match your exact brand
  • Variable reference: Click "Available CSS variables" in the editor for the full list

CSS Variables Reference

Set any of these on .waitlist-thank-you-page to override default colors:

.waitlist-thank-you-page {
  /* Card */
  --ty-card-bg: #ffffff;
  --ty-card-border: #e5e7eb;
  --ty-text-color: #000000;
  --ty-text-secondary: #4b5563;
  --ty-text-muted: #6b7280;

  /* Logo placeholder */
  --ty-logo-placeholder-bg: #ddd6fe;
  --ty-logo-placeholder-color: #7c3aed;

  /* Email connection box */
  --ty-highlight-bg: #ede9fe;
  --ty-highlight-border: #ddd6fe;
  --ty-highlight-icon: #6d28d9;

  /* Sections */
  --ty-section-bg: #ffffff;
  --ty-section-border: #e5e7eb;
  --ty-section-header-bg: #f9fafb;
  --ty-section-header-hover: #f3f4f6;

  /* Section icons */
  --ty-referral-icon-bg: #f3e8ff;
  --ty-referral-icon-color: #9333ea;
  --ty-social-icon-bg: #dcfce7;
  --ty-social-icon-color: #16a34a;
  --ty-leaderboard-icon-bg: #fef9c3;
  --ty-leaderboard-icon-color: #ca8a04;
  --ty-links-icon-bg: #e0e7ff;
  --ty-links-icon-color: #4f46e5;

  /* Points & badges */
  --ty-badge-bg: #dcfce7;
  --ty-badge-border: #bbf7d0;
  --ty-badge-text: #16a34a;
  --ty-points-color: #22c55e;

  /* Return button */
  --ty-button-bg: #8b5cf6;
  --ty-button-text: #ffffff;

  /* Share buttons */
  --ty-share-x-bg: #000000;
  --ty-share-facebook-bg: #1877F2;
  --ty-share-instagram-bg: #C13584;
  --ty-share-threads-bg: #000000;
  --ty-share-linkedin-bg: #0a66c2;
  --ty-share-whatsapp-bg: #25D366;
  --ty-share-telegram-bg: #24A1DE;
  --ty-share-email-bg: #8b5cf6;
  --ty-share-text: #ffffff;

  /* Social platform icon colors */
  --ty-platform-facebook: #1877F2;
  --ty-platform-x: #000000;
  --ty-platform-instagram: #c13584;
  --ty-platform-tiktok: #ff0050;
  --ty-platform-linkedin: #0a66c2;
  --ty-platform-discord: #7289da;
  --ty-platform-threads: #000000;
}

Example: Minimal Dark Theme

.waitlist-page-bg {
  background-color: #0f0f0f !important;
}

.waitlist-thank-you-page {
  --ty-card-bg: #1a1a1a;
  --ty-card-border: #333333;
  --ty-text-color: #e0e0e0;
  --ty-text-secondary: #a0a0a0;
  --ty-text-muted: #707070;
  --ty-highlight-bg: #2a2a2a;
  --ty-highlight-border: #333333;
  --ty-highlight-icon: #e0e0e0;
  --ty-section-header-bg: #222222;
  --ty-section-border: #333333;
  --ty-button-bg: #e0e0e0;
  --ty-button-text: #0f0f0f;
}

Example: Soft Brand Colors

.waitlist-thank-you-page {
  --ty-card-bg: #FFFFFF;
  --ty-card-border: #E5E5EA;
  --ty-text-color: #1C1C1E;
  --ty-highlight-bg: #F2F2F7;
  --ty-highlight-border: #E5E5EA;
  --ty-highlight-icon: #1C1C1E;
  --ty-section-header-bg: #F2F2F7;
  --ty-referral-icon-bg: #F2F2F7;
  --ty-referral-icon-color: #1C1C1E;
  --ty-button-bg: #1C1C1E;
  --ty-button-text: #FFFFFF;
}

Note: For gradient backgrounds on icon containers or the highlight box, CSS variables won't work — use the standard Tailwind class selectors (e.g., .bg-violet-100, .bg-purple-100) with !important instead. Existing Custom CSS that targets these classes will continue to work.

Integrating with the Referral Program

The thank-you page works seamlessly with your points-based referral system.

Point Sources

Users can earn points through multiple activities displayed on the thank-you page.

  1. Signup points: Automatically awarded when joining
  2. Referral points: Earned when friends sign up using their link
  3. Social task points: Earned by following your social media accounts

Engagement Features

  • Live point tracking: Users see their current total and can track progress
  • Leaderboard competition: See top referrers and points needed to advance
  • Multiple engagement paths: Referrals, social follows, and other custom actions
  • Transparent system: Clear point values show users exactly what actions are worth

Examples

SaaS Product with Early Access

Title: "You're on the waitlist! 🚀"
Description: "We'll email you when it's your turn. Earn points to move up faster!"
Enable: Stats, referral section, social tasks, leaderboard
Social Tasks: "Follow us for updates and earn +5 points each"

Consumer App Launch

Title: "Welcome to the inner circle!"
Description: "Every action gets you closer to launch day access."
Enable: Confetti, all sections, custom CSS for brand colors
Social Tasks: Focus on Instagram and TikTok for younger audience

Limited Release Product

Title: "You're in the running!"
Description: "Only the top 100 subscribers get first access. Start sharing!"
Enable: Leaderboard, referral section, position display
Social Tasks: LinkedIn focus for B2B audience

Help and Support

Need assistance with your thank-you page? We're here to help:

Get started for free

Start collecting sign ups for your product launch in minutes — no coding required.

Get started