The chatbot widget defocuses everytime I send a message. I have to manually click back into the textbox area and type my message to respond to the AI.
Is there a fix to that? it makes a bad user experience
Annoying one, I’ve seen the same thing on embedded chat widgets before.
Short answer first: there’s no setting for this. The documented widget attributes cover the public keys, agent IDs, colours, popup timing and auto-open, and none of them control focus behaviour. So it isn’t something you’ve misconfigured. See the widget docs for the full attribute list.
Two quick things that will narrow it down:
- Send with the Enter key instead of clicking the send button. If Enter keeps focus and the button loses it, the button is stealing focus on click. That’s a useful detail for the Retell team.
- Open DevTools and check whether the message textbox sits inside an iframe or directly in your page DOM. That decides whether you can patch it yourself.
If the input is in your page DOM, you can probably refocus it after each send with a small script on your page. I haven’t tested that against this widget, so treat it as worth a try rather than a fix. If it’s inside an iframe served from Retell, you can’t reach it from outside and it needs a fix on their side.
Post your browser and device, plus whether Enter behaves any differently, and support will have something concrete to work with.
Russell
amplifyautomation.ai
Hello @jessekstrachan1
Could you please share a quick Loom video demonstrating the issue?
Also, could you send the Chat Widget link? This will help us investigate the issue more effectively.
Best Regards.
The widget doesn’t return focus to the textarea after a reply, so it stops responding to typing until you click back in. Fixed it with this — wrap the code below in a tag (removed here so the forum doesn’t strip it) and add it as its own tag right after your Retell widget tag:
(function () {
function findShadowRoot() {
var root = document.getElementById(‘retell-widget-root’);
var host = root && root.firstElementChild;
return host && host.shadowRoot;
}
function focusTextarea(shadowRoot) {
var textarea = shadowRoot.querySelector(‘textarea’);
if (!textarea || textarea.disabled) return;
var active = document.activeElement;
var activeIsInsideWidget = active && active.getRootNode && active.getRootNode() === shadowRoot;
var activeIsWidgetHost = active === shadowRoot.host;
if (active === document.body || activeIsInsideWidget || activeIsWidgetHost) {
textarea.focus();
}
}
var pollForRoot = setInterval(function () {
var shadowRoot = findShadowRoot();
if (!shadowRoot) return;
clearInterval(pollForRoot);
var observer = new MutationObserver(function () {
setTimeout(function () { focusTextarea(shadowRoot); }, 150);
});
observer.observe(shadowRoot, { childList: true, subtree: true });
}, 300);
})();
The widget’s shadow root is open, so this reaches in, watches for re-renders, and refocuses the textarea — only when focus is somewhere safe, so it won’t steal it from elsewhere on the page. The 150ms delay matters: Retell’s own widget shifts focus right after rendering, so focusing immediately just gets overridden a moment later.
Plain JS, no dependencies, nothing site-specific — should drop into any page running the widget.