Quick replies

Quick replies are like short links that offer the user a quick interaction.

It is based on the design of the CAKE badge.

Quick Replies

General information#

  • The quick reply allows the bot to present multiple or related topics that may also be of interest to the user.
  • In addition, the bot can expand the dialog with the user.
  • By clicking on a quick answer, the user immediately jumps to a specific topic and receives more detailed information.

Usage#

  • Keep the user in a conversation loop and offer him new topics.
  • In case of a limited response possibility or if the responses are predictable offer.
  • To maintain clarity, limit the maximum number of quick replies to a minimum.

Overall styling#

  • The text-style is always basic-bold.
  • The text-color always is basic white.
  • The line-height is 120%.
  • The text-color always is basic white.
  • The default background-color is brand-primary-base.
  • The hover background-color changes to brand-primary-darker.
  • The border is in basic-white with a 1px thickness.
  • It always has rounded corners of 50% of its height.

Spacing & measurements#

TypesAttributes Preview
Horizontal spacingpadding: 16pxhorizontal-spacing
Vertical spacingpadding: 4pxvertical-spacing
Horizontal distancemargin: 8pxdistance
Vertical distancemargin: 8pxdistance

What can be modified?#

  • Override the reply text element.

Change log#

2.0.0 Chat - 2021-07-22#

Highlights#

  • Sketch, Doc: "Quick replies" | New layer-styles, text-styles and color-variables settings

Changed#

  • Doc: "Quick replies" | Clean up the documentation for the right structure and sentence case