🧩 GIF CAPTCHA

Integration Wizard

Generate Integration Code

Pick your framework, configure settings, and get ready-to-paste code for both client and server sides.

1 Choose Your Backend

2 Choose Your Frontend

3 Configure

4 Your Integration Code

Integration Checklist

    \n\n' + '' }; }, svelte: function(c) { return { file: 'GifCaptcha.svelte', lang: 'Svelte', code: '\n\n' + '{#if challenge}\n
    \n' + '

    {challenge.prompt}

    \n' + '
    \n' + ' {#each challenge.gifs as gif, i}\n' + '
    toggle(i)}>\n' + ' {`Option\n' + '
    \n' + ' {/each}\n' + '
    \n' + '
    {timeLeft}s remaining
    \n' + ' \n' + ' {#if status}

    {status}

    {/if}\n' + '
    \n{:else}\n
    Loading CAPTCHA...
    \n{/if}\n\n' + '' }; } } }; var activeTabs = []; function generate() { var c = cfg(); var backendGen = generators.backend[state.backend]; var frontendGen = generators.frontend[state.frontend]; var files = []; if (backendGen) files.push({ type: 'server', data: backendGen(c) }); if (frontendGen) files.push({ type: 'client', data: frontendGen(c) }); // Build tabs var tabsEl = document.getElementById('outputTabs'); var codeEl = document.getElementById('codeOutput'); tabsEl.innerHTML = ''; codeEl.innerHTML = ''; files.forEach(function(f, i) { var tab = document.createElement('button'); tab.className = 'tab-btn' + (i === 0 ? ' active' : ''); tab.textContent = (f.type === 'server' ? '🖥 ' : '🌐 ') + f.data.file; tab.onclick = function() { showTab(i); }; tabsEl.appendChild(tab); var block = document.createElement('div'); block.className = 'code-block'; block.id = 'code-tab-' + i; block.style.display = i === 0 ? 'block' : 'none'; block.innerHTML = '
    ' + sanitize(f.data.lang) + ' — ' + sanitize(f.data.file) + '' + '
    ' + '
    '; codeEl.appendChild(block); // Set code as textContent to avoid HTML issues document.getElementById('code-body-' + i).textContent = f.data.code; }); // Checklist var checks = [ 'Install gif-captcha: npm i gif-captcha (or equivalent)', 'Set up GIF asset directory with categorized images', 'Configure ' + state.backend + ' routes for /api/captcha/*', 'Add the ' + state.frontend + ' widget to your form page', 'Replace in-memory store with Redis/database for production', 'Add rate limiting to prevent brute-force attempts', 'Set CORS headers if frontend and backend are on different origins', 'Test with actual GIF assets before deploying' ]; var cl = document.getElementById('checklist'); cl.innerHTML = checks.map(function(t) { return '
  • ' + t + '
    • '; }).join(''); } function showTab(idx) { document.querySelectorAll('.tab-btn').forEach(function(b, i) { b.classList.toggle('active', i === idx); }); document.querySelectorAll('.code-block').forEach(function(b, i) { b.style.display = i === idx ? 'block' : 'none'; }); } function copyCode(idx) { var body = document.getElementById('code-body-' + idx); navigator.clipboard.writeText(body.textContent).then(function() { var btn = body.parentElement.querySelector('.copy-btn'); btn.textContent = 'Copied!'; setTimeout(function() { btn.textContent = 'Copy'; }, 1500); }); } // Initial render generate();