AI Chatbot: How to make typing animation more noticeable

Pro Tips Elfsight Widgets Tips
1

Worrying that your AI Chatbot typing animation isn’t catching enough attention and might confuse visitors on your website? We’ve got a solution!

Just add the code below to the Custom JS field on the General tab of your widget’s settings, and watch the animation stand out more clearly:

const styles = document.createElement('style');
styles.innerHTML = `
[class*="dialog-message-dots__Dot-sc"] {
  animation: jump 1s infinite;
}

[class*="dialog-message-dots__Dot-sc"]:nth-child(1) {
  animation-delay: 200ms;
}

[class*="dialog-message-dots__Dot-sc"]:nth-child(2) {
  animation-delay: 400ms;
}

[class*="dialog-message-dots__Dot-sc"]:nth-child(3) {
  animation-delay: 600ms;
}

@keyframes jump {
  0% {
    bottom: 0px;
    opacity: 0.5;
  }
  20% {
    bottom: 3px;
    opacity: 0.3;
  }
  40% {
    bottom: 0px;
    opacity: 0.5;
  }
}
`;
document.head.append(styles);

This video shows how the code works:


Was this solution helpful to you? Let us know in the comment :wink:

2 Likes