How to add a custom typing indicator for a chatbot

AI chatbots increasingly form a core part of onboarding, customer support, product recommendations, feedback gathering, among other types of interactions on many platforms. You can easily integrate an AI chatbot into TalkJS, for example OpenAI’s ChatGPT or Google’s Dialogflow.

One challenge with chatbot integration is that, because a bot doesn’t actually type its response inside the message field, it doesn’t trigger the triple-dot ‘typing indicator’. This means that the user who is in conversation with the AI chatbot might for a few seconds have no indication that the chatbot is generating a response.

To offer your user a smooth experience when engaging with your AI chatbot, you can build a custom typing indicator or message to signal to the user that the bot is working on a response.

This post covers three ways to implement a custom typing indicator or message into your TalkJS chat.

Send a user message with a custom typing indicator

To implement a custom typing indicator, you can set a custom property for a conversation, such as isTyping, and show a typing indicator whenever that custom property is present.

To do this, you can use the REST API to set a custom property on a conversation. In your Theme Editor, you can then check for the presence of that custom isTyping property, and show a message body styled as a typing indicator whenever the property isTyping is present. To show the custom typing indicator, you can add the following:

<TypingIndicator t:if="{{ conversation.custom.isTyping == 'true' }}"/>

Note: The values of a custom object must be strings.

As soon as you receive the request to the chatbot, you can then use the REST API to send a message with the custom property on behalf of the AI chatbot, for which your theme will now show the custom typing indicator.

Once your AI chatbot has generated its response, you can edit the message you sent earlier, to clear the custom property and update the message contents with the full response generated by your AI chatbot.

Send a system message to indicate typing

Instead of a custom typing indicator, you can also send a system message to inform your user that the AI chatbot is generating its response. A system message differs from a user message, in that it is rendered neutrally and shown to all users in a conversation.

As soon as you receive a request to the AI chatbot, you can send a system message, for example with the content "AI chatbot is typing …". Once the AI chatbot has its response ready, you can again delete the system message. You can use the REST API both to send messages and delete messages, including system messages.

HTML panel with a custom typing indicator

You can also use HTML panels to build a custom typing indicator for your AI chatbot. With an HTML panel, you can place an iframe with another embedded HTML document in your chat, just above the message field. You can resize an HTML panel and style it as a typing indicator that matches the look and feel of your brand. This way, HTML panels allow you to extend your TalkJS UI to show a custom typing indicator whenever your AI chatbot is composing its response.

You can control the visibility of HTML panels to make sure that your custom typing indicator’s HTML panel shows only when it’s needed. Use the HTML panel's show() method to show your custom typing indicator as soon as a bot request is received, and use the hide() method to hide the typing indicator as soon as the bot posts its reply.

In a conversation between your user and an AI chatbot, user messages with custom properties, system messages, and HTML panels can all be used to let your user know that the AI chatbot is generating its response.