This article shows you how to customize the typing animation that appears on your Chatbot. This animation — three circles moving up and down — suggests to website visitors that someone is typing a message.

You can control how long the dots display before the next line of message content appears in the Chatbot.

Design principle

Generally, your aim is to make the animation seem realistic.

Longer text messages usually require a longer animation period; short text requires a short animation period. However, you do not want to make the animation too long, otherwise, some website visitors might become impatient and leave.

1 Opening the Message block

You edit typing animation inside a Message block.

  1. Go to the My Bots page.
  2. Locate the Bot you want to modify and then click Edit. The Builder page opens.
  3. Click the Message block which contains the typing animation you want to change. The Message block displays.

Typing animation appears for many kinds of message content. The image of a Message block below shows 4 lines of messages:

  • 3 text lines
  • 1 image
Adding text & image in the Block

2 Adjusting animation time

The toolbar for each message line has a clock icon and number. The number shows many seconds website visitors see typing animation before the message content displays on the Chatbot.

The default setting is 2 seconds, but you can change that figure:

  • the bigger the number, the longer the animation
  1. Hover the mouse pointer on a number. Up and Down arrows display.
  2. Click the Up arrow to increase animation time.
  3. Click the Down arrow to reduce animation time.
  4. Repeat for each message line.
  5. Click Save.
Time interval of block

3 Previewing your Bot

You can preview your Bot and check the animation time. If you want to edit the animation time:

  1. Go to the Builder page and click Preview. The Bot displays on the right side of the page.
  2. Close the preview display.
  3. Go back to the Message block.
  4. Adjust the times.
  5. Click Save.
  6. Preview again.
Preview

Leave a Reply

Your email address will not be published.