Typing Indicator

(error)

Danger

Programmable Chat has been deprecated and is no longer supported. Instead, we'll be focusing on the next generation of chat: Twilio Conversations. Find out more about the EOL process here.

If you're starting a new project, please visit the Conversations Docs to begin. If you've already built on Programmable Chat, please visit our Migration Guide to learn about how to switch.

The Programmable Chat Typing Indicator feature enables typing signals to be sent for Members from their client endpoints when they are typing within a Channel.

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

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

Table of contents:

Sending Typing Indicator

The Chat Typing Indicator is always in relation to a Channel - allowing Typing to be correctly indicated within the Channel where the Member is typing.

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

Note: To optimise network traffic, Chat 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, the following code can be used:

Sending the Typing Indicator

1// intercept the keydown event
2inputBox.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    activeChannel.typing();
9  }
10});
11

Consuming Typing Indicator

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

Note: The Typing Indicator signal is not automatically sent by Programmable Chat. Typing events will not be received if the Member does not send them explicitly (see the previous section).

Here is an example of listening for the Typing event and then processing this to display a "typing" message for the relevant Member:

1//set up the listener for the typing started Channel event
2activeChannel.on('typingStarted', function(member) {
3    //process the member to show typing
4    updateTypingIndicator(member, true);
5});
6
7//set  the listener for the typing ended Channel event
8activeChannel.on('typingEnded', function(member) {
9    //process the member to stop showing typing
10    updateTypingIndicator(member, false);
11});

Next: Message Consumption Horizon