Tired of bots spamming your AI Chatbot and wasting your message limit? While the widget doesn’t have a built-in feature for this, our devs came up with a simple and effective solution — adding a Honeypot to filter out bot submissions 
How it works?
The Honeypot solution adds an invisible input field that real users never see. Bots, however, tend to fill in every field they find.
If this hidden field is filled out, the message is automatically blocked and won’t be sent 
How to set it up ?
Add the custom script
Go to the Settings tab in the widget editor, find the Custom JS section, and add the following script:
const CHAT_PORTAL_SELECTOR = ".es-portal-root[class*='eapps-ai-chatbot']";
const HONEYPOT_CLASS = 'es-honeypot';
const HONEYPOT_NAME = 'message';
const waitForElement = (selector, interval = 250) => {
return new Promise((resolve) => {
const timer = setInterval(() => {
const element =
util.findElement(selector) ?? document.body.querySelector(selector);
if (element) {
clearInterval(timer);
resolve(element);
}
}, interval);
});
};
const createHoneyPotField = (sourceField) => {
const fieldClone = sourceField.cloneNode(true);
const input = fieldClone.querySelector('input');
const placeholder = fieldClone.querySelector(
'[class*="TextControlBasePlaceholder-sc"]'
);
if (!input) {
return null;
}
fieldClone.classList.add(HONEYPOT_CLASS);
fieldClone.setAttribute('aria-hidden', 'true');
input.type = 'text';
input.value = '';
input.name = HONEYPOT_NAME;
input.id = HONEYPOT_NAME;
input.placeholder = HONEYPOT_NAME;
input.tabIndex = -1;
input.autocomplete = 'off';
input.setAttribute('aria-hidden', 'true');
if (placeholder) {
placeholder.textContent = 'Message';
}
return fieldClone;
};
const insertHoneyPot = (form) => {
const submitButton = form.querySelector('[type="submit"]');
const sourceField = form.querySelector('.es-form-field-shortText');
if (!submitButton || !sourceField) {
return;
}
const existingHoneyPot = form.querySelector(`.${HONEYPOT_CLASS}`);
if (existingHoneyPot) {
return;
}
const honeyPotField = createHoneyPotField(sourceField);
if (!honeyPotField) {
return;
}
form.insertBefore(honeyPotField, submitButton);
};
const handleFormSubmit = (e) => {
const form = e.target;
if (!(form instanceof HTMLFormElement)) {
return;
}
const honeyPotInput = form.querySelector(`.${HONEYPOT_CLASS} input`);
if (honeyPotInput?.value?.trim()) {
e.preventDefault();
e.stopPropagation();
console.warn('Spam blocked by honeypot');
}
};
const patchedForms = new WeakSet();
const observePortal = (portal) => {
const observer = new MutationObserver(() => {
const form = portal.querySelector('form');
if (!form || patchedForms.has(form)) {
return;
}
insertHoneyPot(form);
form.addEventListener('submit', handleFormSubmit, true);
patchedForms.add(form);
});
observer.observe(portal, {
childList: true,
subtree: true,
});
};
const initHoneyPot = async () => {
const portal = await waitForElement(CHAT_PORTAL_SELECTOR);
observePortal(portal);
};
initHoneyPot();
Note: Custom JS only works on the live site after the widget is installed —it won’t run inside the widget editor or preview.
Add the CSS code
Then, open the Custom CSS section, paste the code below and publish changes:
.es-honeypot {
position: absolute !important;
left: -9999px !important;
top: 0 !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
overflow: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
That’s it! Your AI Chatbot is now protected from bot spam and unnecessary message usage.
Guys, was this solution helpful for you? We’d love to hear your thoughts — feel free to share them in the comments
