How to Replace "Thinking..." with Animated Ellipsis (...)

Ask the Community General Questions
1

Howdy,

Is there a way to replace the chatbot’s “Thinking…” response with a custom, animated ellipsis (…) – or – simply retain the one that pops-up instantly before it changes to “Thinking…”? (i.e., the native one)

I placed an ellipsis in the “Language & Texts” section of the chatbot configurator, but it doesn’t look quite right (it displays much smaller than the native one).

Thank you!

1 Like
3

Hi @Petar_Dietrich :waving_hand:

I’ve shared your request with the devs and will update you once it’s ready :slightly_smiling_face:

1 Like
4

Hi there, @Petar_Dietrich :waving_hand:

Thank you for waiting!

Here is a CSS code to replace “Thinking” with the animated ellipsis:

/* hide Thinking... */
[class*="dialog-message-loader__ThinkingText-sc"] {
  display: none !important;
}

/* always display dots while thinking */
[class*="dialog-message-loader__SlideWrapper-sc"]:has([class*="dialog-message-loader__DotsContainer-sc"]) {
  opacity: 1 !important;
  transform: none;
}

/* ensure that the message covers the dot animation */
.es-message-assistant [class*="dialog-message-loader__SlideWrapper-sc"] {
  background-color: rgb(245, 245, 245);
}

.es-message-background {
  min-width: 40px;
}

Please try it out and let me know how it worked for you :slightly_smiling_face:

2 Likes
5

Hey @Max,

Thanks for that! It works.

One thing though: I see four (4) small animated dots, not three (3) highly animated dots. Not sure what the typical AI Chatbot ellipsis (…) is supposed to look like, but can you look into that too? The CSS you provided is live on our site. You’re welcome to check it out to confirm my observation.

It would be nice to display three (3) animated dots (or small bullets) with improved animation (i.e., horizontal and vertical animation).

Until then, I can live with what you provided.

Thank you!

1 Like
6

Hi @Petar_Dietrich :waving_hand:

I’ve just tested the widget on your website and see only 3 dots:


Could you please double-check it? If you still see 4 dots, please send me your video screencast :slightly_smiling_face:


As for the improved (horizontal and vertical animation), do you mean something like this?

1 Like
7

Hey @Max,

I see three (3) dots now. However, still evaluating (by browser). If any further issues, I’ll let you know.

Concerning the horizontal and vertical animation of the ellipsis, yes, that’s what I’m referring to. I read a previous, related post about this. Does it still apply or work using your CSS rules above?

Thank you!

1 Like
8

Got it, thanks!

Our devs will try to create a script for this animation and I’ll update you once it’s done :wink:

9

Awesome. Please make sure it feels “buttery” (i.e., smooth transitions). Thank you!

1 Like
10

Hi @Petar_Dietrich :waving_hand:

To add a custom animation, please use the script below in the Custom JS section on the Settings tab of your widget’s settings:

const ellipsisAnimation = document.createElement('style');

ellipsisAnimation.textContent = `
	@keyframes wave {
	  0%, 10%, 40%, 100% {
	    transform: translateY(0);
	    opacity: 0.6;
	  }
	  
	  30% {
	    transform: translateY(-3.8px);
	    opacity: 0.4;
	  }
	}
	
	[class*="dialog-message-loader__Dot-sc"] {
	  animation: wave 2s infinite ease-in-out !important;
	}
	
	[class*="dialog-message-loader__Dot-sc"]:nth-child(1) {
	  animation-delay: 0s !important;
	}
	
	[class*="dialog-message-loader__Dot-sc"]:nth-child(2) {
	  animation-delay: 0.2s !important;
	}
	
	[class*="dialog-message-loader__Dot-sc"]:nth-child(3) {
	  animation-delay: 0.4s !important;
	}
`;

document.head.append(ellipsisAnimation);

Test it out and let me know if you like the result :slightly_smiling_face:

1 Like
12

Thank you, @Max! Perfect.

I smoothed it out a bit. Let’s cal it: Option 2 :slight_smile:

Cheers!

const ellipsisAnimation = document.createElement('style');

ellipsisAnimation.textContent = `
    @keyframes wave {
      0%, 10%, 40%, 100% {
        transform: translateY(0);
        opacity: 0.6;
      }
      
      30% {
        /* Reduced from -3.8px to -2px for a subtler bounce */
        transform: translateY(-2px);
        opacity: 0.4;
      }
    }
    
    [class*="dialog-message-loader__Dot-sc"] {
      animation: wave 2s infinite ease-in-out !important;
    }
    
    [class*="dialog-message-loader__Dot-sc"]:nth-child(1) {
      animation-delay: 0s !important;
    }
    
    [class*="dialog-message-loader__Dot-sc"]:nth-child(2) {
      animation-delay: 0.2s !important;
    }
    
    [class*="dialog-message-loader__Dot-sc"]:nth-child(3) {
      animation-delay: 0.4s !important;
    }
`;

document.head.append(ellipsisAnimation);
2 Likes