Email Template Preview

Preview and test email verification templates with different configurations.

Template Configuration
Configure template data and preview options
Template Info

Verify your NxtRound account

Responsive
Dark Mode
Accessible
Multi-Client
Template Preview
Live preview of the selected email template

Subject: Verify your NxtRound account

Verify your NxtRound account
Firebase Console Template
Copy this HTML template to your Firebase Console → Authentication → Templates

Setup Instructions:

  1. Go to Firebase Console → Authentication → Templates
  2. Select "Email address verification"
  3. Copy the HTML template below and paste it into the template editor
  4. Set the subject line and sender information
  5. Save and test the template

Firebase Template HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Verify your NxtRound account</title>
    <!--[if mso]>
    <noscript>
        <xml>
            <o:OfficeDocumentSettings>
                <o:PixelsPerInch>96</o:PixelsPerInch>
            </o:OfficeDocumentSettings>
        </xml>
    </noscript>
    <![endif]-->
    <style>
        
    /* Reset styles */
    body, table, td, p, a, li, blockquote {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }
    
    table, td {
        mso-table-lspace: 0pt;
        mso-table-rspace: 0pt;
    }
    
    img {
        -ms-interpolation-mode: bicubic;
        border: 0;
        outline: none;
        text-decoration: none;
    }
    
    /* Base styles */
    body {
        margin: 0 !important;
        padding: 0 !important;
        background-color: #f9fafb;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-size: 16px;
        line-height: 1.6;
        color: #374151;
    }
    
    .email-wrapper {
        width: 100% !important;
        background-color: #f9fafb;
        padding: 24px 0;
    }
    
    .email-container {
        max-width: 600px;
        margin: 0 auto;
        background-color: #ffffff;
        border-radius: 12px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }
    
    .email-header {
        background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
        color: white;
    }
    
    .email-content {
        padding: 32px 24px;
    }
    
    .email-footer {
        background-color: #f9fafb;
    }
    
    /* Typography */
    h1, h2, h3, h4, h5, h6 {
        margin: 0 0 16px 0;
        font-weight: 600;
        line-height: 1.3;
        color: #374151;
    }
    
    h1 { font-size: 28px; }
    h2 { font-size: 24px; }
    h3 { font-size: 20px; }
    h4 { font-size: 18px; }
    
    p {
        margin: 0 0 16px 0;
        line-height: 1.6;
    }
    
    a {
        color: #2563eb;
        text-decoration: none;
    }
    
    a:hover {
        text-decoration: underline;
    }
    
    /* Responsive design */
    @media only screen and (max-width: 640px) {
        .email-wrapper {
            padding: 16px !important;
        }
        
        .email-container {
            border-radius: 8px !important;
        }
        
        .email-content {
            padding: 24px 20px !important;
        }
        
        h1 { font-size: 24px !important; }
        h2 { font-size: 20px !important; }
        h3 { font-size: 18px !important; }
        
        .cta-button {
            width: 100% !important;
            text-align: center !important;
        }
        
        .cta-button a {
            display: block !important;
            width: 100% !important;
            box-sizing: border-box !important;
        }
    }
    
    /* Dark mode support */
    @media (prefers-color-scheme: dark) {
        .email-container {
            background-color: #1f2937 !important;
        }
        
        .email-content {
            color: #f9fafb !important;
        }
        
        h1, h2, h3, h4, h5, h6 {
            color: #f9fafb !important;
        }
    }
  
    </style>
</head>
<body>
    <div class="email-wrapper">
        <div class="email-container">
            <!-- Header -->
            <div class="email-header">
                
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td align="center" style="padding: 32px 24px;">
                
                    <img src="https://nxtround.com/logo.png" alt="NxtRound" 
                         style="height: 40px; width: auto; display: block;" />
                
            </td>
        </tr>
    </table>
  
            </div>
            
            <!-- Content -->
            <div class="email-content">
                
    <div style="text-align: center; margin-bottom: 32px;">
        <h1 style="color: #2563eb; font-size: 32px; margin-bottom: 8px;">
            Welcome to NxtRound! 🎉
        </h1>
        <p style="font-size: 18px; color: #6b7280; margin: 0;">
            You're one step away from acing your interviews
        </p>
    </div>
    
    <div style="margin: 32px 0;">
        <h2 style="color: #374151; font-size: 24px; margin-bottom: 16px;">
            Verify Your Email Address
        </h2>
        <p style="font-size: 16px; line-height: 1.6; margin-bottom: 24px;">
            Hi %DISPLAY_NAME%,<br><br>
            Thanks for signing up for NxtRound! To complete your account setup and start 
            accessing our interview preparation tools, please verify your email address by clicking the button below.
        </p>
        
        <div style="text-align: center; margin: 32px 0;">
            
    <table cellpadding="0" cellspacing="0" border="0" style="margin: 24px auto;">
        <tr>
            <td style="border-radius: 8px; background-color: #2563eb;">
                <a href="%LINK%" 
                   style="display: inline-block; padding: 16px 32px; color: #ffffff; 
                          text-decoration: none; font-weight: 600; font-size: 16px; 
                          border-radius: 8px; line-height: 1;">
                    Verify Email Address
                </a>
            </td>
        </tr>
    </table>
  
        </div>
        
        
    <div style="margin: 24px 0; padding: 16px; background-color: #f9fafb; 
                border-radius: 8px; border: 1px solid #e5e7eb;">
        <p style="margin: 0 0 8px 0; color: #374151; font-size: 14px; font-weight: 600;">
            If the button above doesn't work, copy and paste this link into your browser:
        </p>
        <p style="margin: 0; word-break: break-all; font-family: Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 
                  font-size: 13px; color: #2563eb;">
            <a href="%LINK%" style="color: #2563eb; text-decoration: none;">
                %LINK%
            </a>
        </p>
    </div>
  
        
        <div style="margin: 24px 0; padding: 16px; background-color: #f9fafb; 
                    border-radius: 8px; border-left: 4px solid #d97706;">
            <p style="margin: 0; font-size: 14px; color: #374151;">
                <strong>⚠️ Important:</strong> This verification link will expire in 24 hours for security reasons. 
                If you didn't sign up for NxtRound, you can safely ignore this email.
            </p>
        </div>
    </div>
    
    <div style="margin: 32px 0;">
        <h3 style="color: #374151; font-size: 20px; margin-bottom: 16px;">
            What's Next?
        </h3>
        <div style="display: flex; flex-direction: column; gap: 12px;">
            <div style="display: flex; align-items: flex-start; gap: 12px;">
                <span style="color: #2563eb; font-size: 18px; font-weight: bold;">1.</span>
                <p style="margin: 0; font-size: 14px; line-height: 1.5;">
                    Complete your profile setup and tell us about your interview goals
                </p>
            </div>
            <div style="display: flex; align-items: flex-start; gap: 12px;">
                <span style="color: #2563eb; font-size: 18px; font-weight: bold;">2.</span>
                <p style="margin: 0; font-size: 14px; line-height: 1.5;">
                    Take a practice interview to assess your current skill level
                </p>
            </div>
            <div style="display: flex; align-items: flex-start; gap: 12px;">
                <span style="color: #2563eb; font-size: 18px; font-weight: bold;">3.</span>
                <p style="margin: 0; font-size: 14px; line-height: 1.5;">
                    Start practicing with AI-powered mock interviews tailored to your target roles
                </p>
            </div>
        </div>
    </div>
    
    
    <div style="margin: 32px 0; padding: 24px; background-color: #f9fafb; 
                border-radius: 8px; border-left: 4px solid #2563eb;">
        <h3 style="margin: 0 0 16px 0; color: #374151; font-size: 18px; font-weight: 600;">
            Troubleshooting
        </h3>
        <ul style="margin: 0; padding-left: 20px; color: #374151; font-size: 14px; line-height: 1.6;">
            <li style="margin-bottom: 8px;">Check your spam/junk folder if you don't see this email</li>
            <li style="margin-bottom: 8px;">Make sure you're clicking the link from the same device/browser where you signed up</li>
            <li style="margin-bottom: 8px;">Verification links expire in 24 hours for security</li>
            <li style="margin-bottom: 8px;">Try disabling browser extensions that might block the link</li>
            <li style="margin-bottom: 0;">
                Still having trouble? Contact us at 
                <a href="mailto:support@nxtround.com" style="color: #2563eb; text-decoration: none;">
                    support@nxtround.com
                </a>
            </li>
        </ul>
    </div>
  
  
            </div>
            
            <!-- Footer -->
            <div class="email-footer">
                
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td style="padding: 32px 24px; text-align: center; border-top: 1px solid #e5e7eb;">
                <p style="margin: 0 0 16px 0; color: #6b7280; font-size: 14px; line-height: 1.5;">
                    © 2026 NxtRound. All rights reserved.
                </p>
                <p style="margin: 0 0 16px 0; color: #6b7280; font-size: 14px; line-height: 1.5;">
                    This email was sent to <strong>%EMAIL%</strong> because you signed up for NxtRound.
                </p>
                <p style="margin: 0; color: #6b7280; font-size: 12px; line-height: 1.4;">
                    Need help? Contact us at 
                    <a href="mailto:support@nxtround.com" style="color: #2563eb; text-decoration: none;">
                        support@nxtround.com
                    </a>
                </p>
                
            </td>
        </tr>
    </table>
  
            </div>
        </div>
    </div>
</body>
</html>