Changing The Typing Indicator

Typing indicator of the bot can be changed using CSS. By default, bot shows this typing indicator –

1. Show <agent name> is typing …

Step 1: In the chat window CSS, find the selector .typing-indicator and set the display to none

.typing-indicator { 
display: table; 
margin: 0 auto; /*chatbox typing indicator margin*/ 
position: relative; 
}

Step 2: Add the following CSS

.typing-indicator-agent { 
display: table; 
font-size: 12px; 
color: gray; 
font-style: italic; 
} 

.typing-indicator-agent:after { 
content: ' .'; 
animation: dots 1s steps(5, end) infinite; 
} 

@keyframes dots { 
0%, 20% { 
color: rgba(0,0,0,0); 
text-shadow: 
.25em 0 0 rgba(0,0,0,0), 
.5em 0 0 rgba(0,0,0,0);} 
40% { 
color: gray; 
text-shadow: 
.25em 0 0 rgba(0,0,0,0), 
.5em 0 0 rgba(0,0,0,0);} 
60% { 
text-shadow: 
.25em 0 0 gray, 
.5em 0 0 rgba(0,0,0,0);} 
80%, 100% { 
text-shadow: 
.25em 0 0 gray, 
.5em 0 0 gray;} 
}

After this, typing indicator will look like this

2. Showing a loading GIF

Step 1: In the chat window CSS, find the selector .typing-indicator and set the display to none

.typing-indicator { 
display: table; 
margin: 0 auto; /*chatbox typing indicator margin*/ 
position: relative; 
}

Step 2: Add the following CSS

.typing-indicator-agent { 
display: table; 
font-size: 12px; 
color: transparent; 
font-style: italic; 
background-image: url() 
}

After this, typing indicator will look like this