Hi @temovision,
There’s no built-in setting for this, but a tiny CSS snippet does the trick nicely alongside the existing delay. You can add it via Code Engine or Appearance > Customize > Additional CSS, whichever you prefer:
/* Auto-hide the chatbot icon text 10 seconds after it appears */
.mwai-icon-text-container {
animation: mwai-icon-text-autohide 0.5s ease forwards;
animation-delay: 10s;
}
@keyframes mwai-icon-text-autohide {
to { opacity: 0; visibility: hidden; }
}
A few notes: the countdown starts when the text appears, so if you’re using the “Icon Text Delay” setting too, they combine naturally (e.g. a 5s delay + this snippet = text shows at 5s, hides at 15s). Change animation-delay: 10s to taste, and the 0.5s controls the fade duration. The visibility: hidden part makes sure the invisible text never blocks clicks, so the chat icon stays fully clickable. The text will reappear on the next page load, same as it does today! 😊
Hope that helps!
Jordy.
Thanks alot. Implemented and working!
The X button that is meant to close the hint does not go away on MOBILE after the countdown. Kindly assist
fix:
.mwai-icon-text-container {
animation: mwai-icon-text-autohide 0.5s ease forwards;
animation-delay: 15s;
}
@keyframes mwai-icon-text-autohide {
to {
opacity: 0;
visibility: hidden;
display: none;
}
}
the code above unfortunately removes avatar on mobile
Glad the first snippet worked! 😊
The trouble on mobile is that the small X close button is forced visible there (on desktop it only shows on hover), and it sits inside the text bubble. When you hide the bubble, the X has its own visibility rule that overrides the inherited one, so it stays. And the display: none you tried was catching the avatar because the avatar is a separate element next to the text.
Replace your snippet with this single block. It hides the text and the X together after the delay, and leaves the avatar alone:
/* Auto-hide the chatbot icon text and its close button 10s after they appear */
.mwai-icon-text-container,
.mwai-icon-text-container .mwai-icon-text-close {
animation: mwai-icon-text-autohide 0.4s ease 10s forwards;
}
@keyframes mwai-icon-text-autohide {
to { opacity: 0; visibility: hidden; pointer-events: none; }
}
The 10s is when it starts hiding (change to taste), and 0.4s is the fade length. No need for display: none anywhere. Works on both desktop and mobile, and the chat avatar stays exactly as it is.
