Crawler Widget - Copy this React, Tailwind Component to your project
<!DOCTYPE html> <html> <head> <title>Crawler Prevention Widget</title> <style> /* Add your CSS styles here */ .crawler-prevention-widget { position: fixed; bottom: 20px; right: 20px; background-color: #000; color: #fff; padding: 10px 20px; border-radius: 5px; text-align: center; } .crawler-prevention-widget h2 { font-size: 16px; margin: 0; } .crawler-prevention-widget p { font-size: 14px; margin: 5px 0; } .crawler-prevention-widget button { background-color: #fff; color: #000; border: none; padding: 5px 10px; border-radius: 3px; cursor: default; } </style> </head> <body> <div class="crawler-prevention-widget"> <h2>Crawler Prevention Widget</h2> <p>This website is protected from cross-site tracking by pre-approved search engines.</p> <button>Learn More</button> </div> <script> // Add your JavaScript code here document.addEventListener('DOMContentLoaded', function() { var referrer = document.referrer; var blockedPlatforms = ['pinterest.com', 'facebook.com', 'tiktok.com', 'instagram.com']; var button = document.querySelector('.crawler-prevention-widget button'); for (var i = 0; i < blockedPlatforms.length; i++) { if (referrer.includes(blockedPlatforms[i])) { window.location.href = 'company.site'; break; } } // Disable the button button.disabled = true; }); </script> </body> </html>
