authepy.
No-Code Website Integrations

Email OTP Verification for Webflow, Wix & Framer

Stop fake users and bots from ruining your email list or accessing your hidden content. You don't need to hire a developer. Just copy and paste our visual widget code to verify real human emails in under 3 seconds.

See How Easy It Is ↓

Enterprise Security, Simplified for You.

Just because you aren't writing backend code doesn't mean you should compromise on security. When you paste the Authepy HTML widget onto your site, you instantly get the exact same protective shields used by enterprise tech companies.

Bot & Spam Blockers

Our widget automatically detects automated bots trying to flood your site with fake signups, blocking them before they even hit your dashboard.

Never Lands in Spam

Standard plugins often send verification emails that land in the user's spam folder. Authepy uses dedicated VIP email lanes to guarantee inbox delivery in 3 seconds.

Domain-Locked Safety

Your widget is cryptographically locked to your website's domain name. Even if someone steals your code, it will refuse to run on any other website.

The "Hold Your Hand" Setup Guide

Follow these exact steps. You do not need to write a single line of backend code.

1

Generate a Restricted Key

Because frontend website code is visible to everyone, we need to create a special "Restricted Key" that is locked to your specific website address. This prevents anyone from stealing it.

  • Log in to your Authepy Dashboard.
  • Click on API Keys in the left navigation menu.
  • Scroll down to the Restricted Domain Keys section and click + Create Restricted Key.
  • Under Allowed Domains, type your exact website URL (e.g., www.mysite.com).
  • Click Generate, and Copy the key (it will start with rk_live_...). Keep this copied!
2

Place the Widget on your Page

Open the actual page where you want the email verification box to appear (like your login page or gated content portal).

  • In Webflow, add an "Embed" element. In Wix, add an "HTML iframe" block.
  • Paste the HTML/JS code below into that block.
  • Crucial: Replace YOUR_RESTRICTED_KEY_HERE in the code with the rk_live_... key you copied in Step 1.
<div id="authepy-widget" style="font-family: sans-serif; max-width: 320px; padding: 20px; border: 1px solid #ccc; border-radius: 8px;">
  <div id="ath-step-1">
    <h3>Secure Login</h3>
    <input type="email" id="ath-email" placeholder="name@company.com" style="width: 100%; padding: 10px; margin-bottom: 10px;" />
    <button onclick="authepySendOTP()" style="width: 100%; padding: 10px; background: #000; color: #fff;">Continue with Email</button>
    <p id="ath-error-1" style="color: red; font-size: 12px; margin-top: 8px;"></p>
  </div>
  
  <div id="ath-step-2" style="display: none;">
    <p>Enter the 6-digit code sent to your email.</p>
    <input type="text" id="ath-code" placeholder="000000" maxlength="6" style="width: 100%; padding: 10px; margin-bottom: 10px; text-align: center; letter-spacing: 5px;" />
    <button onclick="authepyVerifyOTP()" style="width: 100%; padding: 10px; background: #28a745; color: #fff;">Verify Code</button>
    <p id="ath-error-2" style="color: red; font-size: 12px; margin-top: 8px;"></p>
  </div>
</div>

<script>
  const AUTHEPY_API = 'https://api.authepy.com/api';
  const AUTHEPY_KEY = 'YOUR_RESTRICTED_KEY_HERE'; // PASTE KEY HERE
  let authepyRequestId = '';

  async function authepySendOTP() {
    const email = document.getElementById('ath-email').value;
    const err = document.getElementById('ath-error-1');
    if(!email) return;

    try {
      const res = await fetch(`${AUTHEPY_API}/otp/request`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${AUTHEPY_KEY}` },
        body: JSON.stringify({ email })
      });
      const data = await res.json();
      
      if (data.success) {
        authepyRequestId = data.requestId;
        document.getElementById('ath-step-1').style.display = 'none';
        document.getElementById('ath-step-2').style.display = 'block';
      } else {
        err.innerText = data.error;
      }
    } catch (e) { err.innerText = 'Network connection failed.'; }
  }

  async function authepyVerifyOTP() {
    const code = document.getElementById('ath-code').value;
    const err = document.getElementById('ath-error-2');
    if(!code || code.length < 5) return;

    try {
      const res = await fetch(`${AUTHEPY_API}/otp/verify`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${AUTHEPY_KEY}` },
        body: JSON.stringify({ requestId: authepyRequestId, userGuess: code })
      });
      const data = await res.json();
      
      if (data.success) {
        document.getElementById('authepy-widget').innerHTML = '<h3 style="color: green; text-align: center;">Verified Successfully</h3>';
        // Add your redirect logic here: window.location.href = '/dashboard';
      } else {
        err.innerText = data.error;
      }
    } catch (e) { err.innerText = 'Network connection failed.'; }
  }
</script>

That's it! Publish your site, and the verification form will work automatically.

Ready to secure your site?

Join hundreds of non-technical founders protecting their websites with Authepy. It's free to start, and takes less than 5 minutes to set up.

Create Your Free Account