1. INSTALL
npm install @bot-shield/web-component
2. IMPORT & INITIALIZE
import BotShield from '@bot-shield/web-component';
const bot-shield = new BotShield({
apiUrl: 'https://api.yoursite.com',
autoVerify: false,
trackBehavior: true,
continuousTracking: true,
debug: false
});
await bot-shield.init();
3. VERIFY ACTIONS
// Before critical action
const isAllowed = await bot-shield
.verifyAction('form_submit');
if (isAllowed) {
// Proceed with action
submitForm();
} else {
// Block bot activity
showError();
}
4. GET SESSION TOKEN
const token = bot-shield.getSessionToken();
// Include in API requests
fetch('/api/endpoint', {
headers: {
'X-Session-Token': token
}
});
1. INCLUDE SCRIPT
<!-- From CDN -->
<script src="https://cdn.jsdelivr.net/npm/@bot-shield/web-component@latest/dist/index.umd.js"></script>
<!-- Or local file -->
<script src="/path/to/bot-shield.js"></script>
2. INITIALIZE IN SCRIPT
<script>
// Wait for page load
document.addEventListener('DOMContentLoaded', async function() {
// Initialize BotShield
const bot-shield = new window.BotShield({
apiUrl: 'https://api.yoursite.com',
autoVerify: false,
trackBehavior: true,
continuousTracking: true
});
await bot-shield.init();
console.log('BotShield initialized');
});
</script>
3. PROTECT FORM SUBMISSION
<form id="myForm" onsubmit="handleSubmit(event)">
<input type="email" name="email" required>
<button type="submit">Submit</button>
</form>
<script>
async function handleSubmit(event) {
event.preventDefault();
const isAllowed = await window.BotShield
.verifyAction('form_submit');
if (isAllowed) {
event.target.submit();
} else {
alert('Bot detected!');
}
}
</script>
4. PROTECT BUTTON CLICKS
<button onclick="handleClick()">
Download File
</button>
<script>
async function handleClick() {
const isAllowed = await window.BotShield
.verifyAction('download');
if (isAllowed) {
window.location.href = '/download/file.pdf';
} else {
alert('Verification failed');
}
}
</script>
1. INCLUDE SCRIPT
<!-- From CDN -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@bot-shield/web-component@latest/dist/index.esm.js"></script>
<!-- Or local file -->
<script type="module" src="/path/to/bot-shield.js"></script>
2. ADD COMPONENT TO HTML
<!-- Basic usage -->
<bot-shield
api-url="https://api.yoursite.com"
track-behavior="true"
continuous-tracking="true">
</bot-shield>
<!-- With status display -->
<bot-shield
api-url="https://api.yoursite.com"
track-behavior="true"
show-status>
</bot-shield>
3. LISTEN TO EVENTS
<script>
const shield = document.querySelector('bot-shield');
// Wait for ready
shield.addEventListener('bot-shield:ready', (e) => {
console.log('BotShield ready!', e.detail);
});
// Handle errors
shield.addEventListener('bot-shield:error', (e) => {
console.error('BotShield error:', e.detail.error);
});
</script>
4. CALL METHODS
<button onclick="handleProtectedAction()">
Protected Action
</button>
<script>
async function handleProtectedAction() {
const shield = document.querySelector('bot-shield');
// Verify action
const allowed = await shield.verifyAction('button_click');
if (allowed) {
alert('Action allowed!');
} else {
alert('Bot detected!');
}
}
</script>
5. AVAILABLE ATTRIBUTES
api-url - API endpoint URL
auto-verify - Auto-verify on init (true/false)
track-behavior - Enable behavioral tracking (true/false)
track-duration - Initial tracking duration (milliseconds)
continuous-tracking - Keep tracking (true/false)
debug - Enable debug logs (true/false)
show-status - Display visual status badge
6. AVAILABLE METHODS
await shield.verify() - Verify current request
await shield.verifyAction(action) - Verify specific action
shield.getSessionToken() - Get session token
shield.getLastVerification() - Get last result
shield.isReady() - Check if initialized
1. INSTALL
npm install @bot-shield/web-component react
2. WRAP APP WITH PROVIDER
import { BotShieldProvider } from '@bot-shield/web-component/react';
function App() {
return (
<BotShieldProvider
config={{
apiUrl: 'https://api.yoursite.com',
trackBehavior: true,
continuousTracking: true
}}
onReady={() => console.log('Ready!')}
onError={(err) => console.error(err)}>
<YourApp />
</BotShieldProvider>
);
}
3. USE HOOK IN COMPONENTS
import { useBotShield } from '@bot-shield/web-component/react';
function CheckoutButton() {
const { verifyAction, isReady } = useBotShield();
const handleClick = async () => {
const allowed = await verifyAction('checkout');
if (allowed) {
processPayment();
} else {
alert('Bot detected!');
}
};
return (
<button onClick={handleClick} disabled={!isReady}>
Checkout
</button>
);
}
4. PROTECT FORMS
function ContactForm() {
const { verifyAction } = useBotShield();
const [submitting, setSubmitting] = useState(false);
const handleSubmit = async (e) => {
e.preventDefault();
setSubmitting(true);
const allowed = await verifyAction('form_submit');
if (allowed) {
await submitForm(formData);
} else {
alert('Bot detected!');
}
setSubmitting(false);
};
return (
<form onSubmit={handleSubmit}>
{/* form fields */}
<button type="submit" disabled={submitting}>
Submit
</button>
</form>
);
}
5. STATUS BADGE COMPONENT
import { BotShieldStatus } from '@bot-shield/web-component/react';
function Header() {
return (
<header>
<h1>My App</h1>
<BotShieldStatus />
</header>
);
}
6. HOC FOR PROTECTED COMPONENTS
import { withBotShield } from '@bot-shield/web-component/react';
// Original component
function AdminPanel() {
return <div>Admin Dashboard</div>;
}
// Protected version
const ProtectedAdmin = withBotShield(AdminPanel, {
action: 'admin_access',
autoVerify: true,
blockedComponent: () => (
<div>Access Denied</div>
)
});
// Usage
<ProtectedAdmin />