Skip to contentSkip to navigationSkip to topbar
Twilio Docs
On this page

Typing Indicator

The Conversations Typing Indicator feature enables typing signals to be sent for Participants from their client endpoints when they are typing within a Conversation.

These signals are then sent to all other connected Participants of the Conversation, allowing for UI features to be implemented, such as showing "User is typing..." style messages or indicators for Conversation Participants. Typing is always within the context of a Conversation and a Participant.

The Typing Indicator feature follows a producer/consumer model, with the Conversations SDKs exposing API methods to set when the User is typing in a Conversation. This is signaled via Conversations in real-time with other Participants of the Conversation, where events are fired for the typing event.

Sending Typing Indicator

typing-indicator-send page anchor

The Conversations Typing Indicator is always in relation to a Conversation - allowing Typing to be correctly indicated within the Conversation where the Participant is typing.

The Typing Indicator signal is not automatically sent by Conversations. The Typing Indicator must be explicitly sent using the relevant SDK API methods.

(warning)

Warning

To optimize network traffic, Conversations client endpoints will only send a Typing signal once every 5 seconds by default, even if the Typing API command is called more frequently. The send threshold value can be configured for a Service instance by setting the TypingIndicatorTimeout property of the Services resource. Note that reducing this value will cause more network traffic to be generated by client endpoints calling the Typing API.

To send the Typing Indicator from a web-based front end, the following JavaScript code can be used:

1
// intercept the keydown event

2
inputBox.on('keydown', function(e) {

3
  // if the RETURN/ENTER key is pressed, send the message

4
  if (e.keyCode === 13) {

5
    sendButton.click();

6
  } else {

7
    // else send the Typing Indicator signal

8
    activeConversation.typing();

9
  }

10
});

Consuming Typing Indicator

typing-indicator-consume page anchor

In order to display the Typing Indicator when other Participants are typing within a Conversation, the Typing Indicator Events must be consumed and processed by the clients. This is done by listening for the relevant Typing Indicator events/callbacks and processing these appropriately.

The Typing Indicator signal is not automatically sent by Conversations. Typing events will not be received if the Participant does not send them explicitly (see the section above on Receiving typing indicators).

Here is an example of listening for the Typing event and then processing this to display a "typing" message for the relevant Participant. You would implement your own updateTypingIndicator method:

1
//set up the listener for the typing started Conversation event

2
activeConversation.on('typingStarted', function(participant) {

3
    //process the participant to show typing

4
    updateTypingIndicator(participant, true);

5
});

6


7
//set  the listener for the typing ended Conversation event

8
activeConversation.on('typingEnded', function(participant) {

9
    //process the participant to stop showing typing

10
    updateTypingIndicator(participant, false);

11
});

What's Next?

whats-next page anchor

Continue learning with the following guides: